/* Offer and brand cards (includes/cards.php). Loaded site-wide: the cards appear in archives, home and single pages.
   Built to read well from ~230px wide (4 per row on a laptop next to the filters). Images 3:2, never cut.
   Uses the shared scale of style.css: --sc-radius (16px) for the card, --sc-radius-control (12px) inside, --sc-font-title. */
.sc-card { container:sccard / inline-size; position:relative; display:flex; flex-direction:column; height:100%; background:var(--sc-card); border:1px solid var(--sc-line); border-radius:var(--sc-radius); overflow:hidden; color:var(--sc-text); font-family:ubuntu, sans-serif; transition:border-color .2s, box-shadow .2s; }
.sc-card:hover { border-color:var(--sc-green); box-shadow:0 6px 18px -10px rgba(14,64,15,.45); }
.sc-card *, .sc-card *::before, .sc-card *::after { box-sizing:border-box; }
.sc-card p, .sc-card h3 { margin:0; }

/* Media: 3:2, whole image */
.sc-card__media { position:relative; aspect-ratio:3/2; background:var(--sc-cream); overflow:hidden; }
.sc-card__img { display:block; width:100%; height:100%; object-fit:cover; }
.sc-card__media--logo { background:#fff; border-bottom:1px solid var(--sc-line); }
.sc-card__media--logo .sc-card__img { object-fit:contain; }
.sc-card__noimg { display:block; width:100%; height:100%; background:linear-gradient(135deg, var(--sc-mint-soft), var(--sc-cream)); }
.sc-card__initial { display:grid; place-items:center; width:100%; height:100%; font-family:var(--sc-font-title); font-size:44px; font-weight:700; color:var(--sc-green); }
.sc-card__flag { position:absolute; top:10px; left:10px; padding:3px 10px; border-radius:999px; background:var(--sc-text); color:#fff; font-size:12px; font-weight:700; }
.sc-card.is-expired .sc-card__img { filter:grayscale(1); opacity:.65; }

/* Body */
.sc-card__body { display:flex; flex-direction:column; gap:8px; flex:1; padding:12px 14px 14px; }
.sc-card__brand { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; color:var(--sc-muted); }
.sc-card__brand > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-card__brandlogo { flex:0 0 36px; width:36px; height:24px; border:1px solid var(--sc-line); border-radius:6px; background:#fff; overflow:hidden; }
.sc-card__brandlogo img { display:block; width:100%; height:100%; object-fit:contain; }
.sc-card__title { font-family:var(--sc-font-title); font-size:17px; font-weight:700; line-height:1.25; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sc-card__link { color:inherit; text-decoration:none; }
.sc-card__link::after { content:""; position:absolute; inset:0; z-index:1; } /* whole card clickable, one link */
.sc-card__link:focus-visible { outline:none; }
.sc-card:has(.sc-card__link:focus-visible) { outline:3px solid var(--sc-mint); outline-offset:2px; }
.sc-card__benefit { align-self:flex-start; padding:3px 10px; border-radius:999px; background:var(--sc-mint-soft); color:var(--sc-green); font-size:13px; font-weight:700; line-height:1.4; }
.sc-card.is-expired .sc-card__benefit { background:#eef1ed; color:var(--sc-muted); }
.sc-card__sector { font-size:13px; color:var(--sc-muted); }

/* Footer line: where + when (offer) / counts + badges (brand) */
.sc-card__foot { margin-top:auto !important; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 10px; padding-top:8px; border-top:1px solid var(--sc-line); font-size:12.5px; color:var(--sc-muted); }
.sc-card__where::before { content:"📍 "; }
.sc-card__when.is-urgent { color:#b45309; font-weight:700; }
.sc-card__when.is-expired { color:var(--sc-muted); }
.sc-card__chips, .sc-card__badges { display:flex; flex-wrap:wrap; gap:4px; }
.sc-card__chips span { padding:1px 8px; border:1px solid var(--sc-line); border-radius:999px; color:var(--sc-text); }
.sc-card__badge { padding:2px 8px; border-radius:999px; background:var(--sc-mint-soft); color:var(--sc-green); font-size:11.5px; font-weight:700; }
.sc-card__badge--soft { background:#eef1ed; color:var(--sc-muted); }

/* Narrow cards (4 per row next to the filters on a laptop): a step smaller, where + when on two lines. */
@container sccard (max-width: 250px) {
  .sc-card__body { padding:10px 12px 12px; gap:6px; }
  .sc-card__title { font-size:15.5px; }
  .sc-card__brand { font-size:12px; }
  .sc-card__benefit { font-size:12px; padding:2px 8px; }
  .sc-card__foot { flex-direction:column; align-items:flex-start; gap:2px; }
}

/* Inside Elementor loop items: the template is a single shortcode widget; let the card fill the grid cell.
   min-width:0 so a grid column can be narrower than the card's longest unbreakable line (the brand line doesn't wrap):
   without it the 4 columns came out uneven (357/501/343/253px) and overflowed the page. */
.e-loop-item:has(.sc-card), .e-loop-item:has(.sc-card) * { min-width:0; }
/* …but never below 200px: the grid sits in Elementor containers that shrink around their content, and after a FacetWP search on
   /realta/ (1 result) the whole grid collapsed to 68px with a 2px card (a vertical line). 4 columns on a laptop are 218px, so
   they still fit; on a phone the single column is wider anyway. */
.e-loop-item:has(.sc-card) { min-width:200px; }
.elementor-widget-loop-grid:has(.sc-card), .facetwp-template:has(.sc-card) { width:100%; max-width:100%; }
.sc-card { min-width:0; }
.e-loop-item .elementor-widget-shortcode:has(.sc-card), .e-loop-item .elementor-widget-shortcode:has(.sc-card) .elementor-shortcode { width:100%; height:100%; }
.e-loop-item:has(.sc-card) > .e-con, .e-loop-item:has(.sc-card) > .e-con > .e-con-inner { height:100%; padding:0; }