/* ==========================================================================
   Recommended and Best Buy: the "Photo finish" award marks (19 Oct 2026)
   See inc/award-marks.php for where each piece is used.
   ========================================================================== */

/* Archivo, served from this site (no call to Google). Variable width, so the
   award name can land stretched and settle to its normal width. */
@font-face{
  font-family:"WNC Archivo";
  src:url("../fonts/archivo-latin-var.woff2") format("woff2");
  font-weight:700 800; font-stretch:62% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --wnc-red:#fc2c30;     /* the logo's red: Best Buy */
  --wnc-blue:#00b4fc;    /* the logo's blue: Recommended */
  --wnc-black:#202420;   /* the logo's outline */
  --wnc-display:"WNC Archivo", "Helvetica Neue", Arial, sans-serif;
}
.wnc-mark--best-buy, .wnc-pf-rule--best-buy, .wnc-card-award--best-buy, .wnc-ahero--best-buy, .wnc-ahero[data-award="best-buy"] .wnc-pf-rule{ --c:var(--wnc-red); }
.wnc-mark--recommended, .wnc-pf-rule--recommended, .wnc-card-award--recommended, .wnc-ahero--recommended, .wnc-ahero[data-award="recommended"] .wnc-pf-rule{ --c:var(--wnc-blue); }

/* ---- the mark ---- */
/* Hugh's option A (21 Oct 2026): one line, boxed in the award's colour */
.wnc-mark{ display:inline-flex; align-items:center; gap:calc(var(--s,1) * 12px); width:max-content; max-width:100%; color:var(--wnc-black); line-height:1; vertical-align:middle;
  padding:calc(var(--s,1) * 9px) calc(var(--s,1) * 14px) calc(var(--s,1) * 9px) calc(var(--s,1) * 12px);
  border:max(2px, calc(var(--s,1) * 2.5px)) solid var(--c); border-radius:calc(var(--s,1) * 12px); background:transparent; box-sizing:border-box; }
.wnc-mark > *{ flex:none; }
.wnc-mark__sw{ width:calc(var(--s,1) * 62px); height:auto; overflow:visible; display:block; }
.wnc-mark__sw .o{ fill:none; stroke:currentColor; stroke-width:17; stroke-linecap:round; }
.wnc-mark__sw .l{ fill:var(--wnc-red); } /* the logo in its own colours on both awards */
.wnc-mark__sw .echo{ opacity:0; }
.wnc-mark__txt{ display:flex; align-items:center; gap:calc(var(--s,1) * 7px); }
.wnc-mark__wm{ height:calc(var(--s,1) * 15px); width:auto; display:block; margin:0; }
.wnc-mark__txt b{ font-family:var(--wnc-display); font-weight:800; font-stretch:100%; font-size:calc(var(--s,1) * 20px); letter-spacing:-.01em; white-space:nowrap; transform-origin:0 100%; color:var(--wnc-black); }
.wnc-mark__ic{ width:calc(var(--s,1) * 24px); height:calc(var(--s,1) * 24px); display:block; transform-origin:50% 60%; }
.wnc-mark__ic .f{ fill:#c39a34; }
.wnc-mark__ic .st{ stroke:#c39a34; stroke-width:1.2; stroke-linejoin:round; }
.wnc-mark__ic .s{ fill:none; stroke:#c39a34; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wnc-mark__ic .hl{ fill:#9c7a22; }

.wnc-mark--heading{ --s:1; }
.wnc-mark--cover{ --s:1.2; }
.wnc-mark--article{ --s:.6; }
.wnc-mark--nav{ --s:.56; }
.wnc-mark--link{ --s:.8; }
.wnc-mark--card{ --s:.62; }
@media (max-width:1100px){ .wnc-mark--card{ --s:.56; } }
@media (max-width:600px){ .wnc-mark--card{ --s:.62; } .wnc-mark--heading{ --s:.78; } .wnc-mark--cover{ --s:.78; } .wnc-mark--cover.wnc-mark--recommended{ --s:.68; } .wnc-mark--link{ --s:.68; } }
@media (max-width:370px){ .wnc-mark--card, .wnc-mark--heading, .wnc-mark--cover{ --s:.6; } }

/* ---- review cards: the line along the foot of the photo ---- */
.wcn-thumb{ position:relative; }
.wnc-pf-rule{ position:absolute; left:0; right:0; bottom:0; height:4px; z-index:2; overflow:hidden; pointer-events:none; }
.wnc-pf-rule > i{ position:absolute; top:0; bottom:0; display:block; background:var(--c); font-style:normal; }
.wnc-pf-rule .t{ left:0; right:0; transform-origin:0 50%; }
.wnc-pf-rule .x1, .wnc-pf-rule .x2, .wnc-pf-rule .x3{ left:0; width:20%; opacity:0; }

/* "whichnewcar Best Buy" above the title */
.wnc-card-award{ display:flex; margin:0 0 8px; }

/* ---- section headings and the Spec Snapshot ---- */
.wcn-h2--award{ line-height:0; }
.wcn-section--award .wcn-section__head{ flex-wrap:wrap; row-gap:8px; align-items:center; }
.wcn-facts .wnc-mark--article{ display:flex; width:max-content; max-width:100%; margin:6px auto; }
/* award only, no specs: the badge alone, larger, and not sticky, so it does not float down the page */
.wcn-facts--award-only{ background:none; border:0; padding:0; position:static; }
.wcn-facts--award-only .wnc-mark--article{ --s:.8; margin:0 auto 0 0; }
@media (max-width:980px){ .wcn-facts--award-only .wnc-mark--article{ margin:0 0 4px; } }

/* ---- award pages and Top Picks: the panel that replaced the banner ---- */
.wnc-ahero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); max-width:1200px; margin:clamp(14px,2.5vw,28px) auto clamp(20px,3vw,36px); border-radius:18px; overflow:hidden; border:1px solid #d7e2ee; background:linear-gradient(160deg,#e4eff9 0%,#d3e5f5 100%); box-shadow:0 14px 34px rgba(15,23,42,.08); }
.wnc-ahero--nocars{ grid-template-columns:1fr; }
.wnc-ahero__copy{ padding:clamp(22px,4vw,48px); display:grid; align-content:space-between; gap:26px; min-width:0; }
.wnc-ahero__words{ display:grid; gap:16px; }
.wnc-ahero__ttl{ position:relative; }
.wnc-ahero__title{ margin:0; font-family:var(--wnc-display); font-weight:800; font-stretch:100%; font-size:clamp(44px,6.6vw,88px); line-height:.9; letter-spacing:-.035em; color:var(--wnc-black); transform-origin:0 100%; text-wrap:balance; }
.wnc-ahero__title span{ display:block; color:var(--c, #0284c7); }
/* one long word: narrower and smaller, so it fits its column at every width */
.wnc-ahero--recommended .wnc-ahero__title{ font-stretch:80%; font-size:clamp(34px,4.3vw,58px); letter-spacing:-.025em; }
@media (max-width:800px){ .wnc-ahero--recommended .wnc-ahero__title{ font-size:clamp(34px,10.5vw,64px); } }
.wnc-ahero__title.ghost{ position:absolute; inset:0; color:transparent; -webkit-text-stroke:1.5px var(--c, #0284c7); opacity:0; pointer-events:none; }
.wnc-ahero__title.ghost span{ color:transparent; }
.wnc-ahero__def{ margin:0; max-width:40ch; font-size:clamp(15px,1.5vw,18px); line-height:1.5; color:#334155; }
.wnc-ahero--top-picks .wnc-ahero__def{ max-width:46ch; font-size:clamp(15px,1.35vw,17px); }
.wnc-ahero--top-picks .wnc-ahero__title{ font-size:clamp(42px,5.6vw,76px); }
.wnc-ahero--top-picks .wnc-ahero__copy{ align-content:center; }
.wnc-ahero__links{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px clamp(14px,2.4vw,22px); border-top:1px solid #c9dbec; }
@media (max-width:640px){ .wnc-ahero__links{ grid-template-columns:1fr; } }
.wnc-ahero__links a{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:12px 16px; border-radius:12px; background:rgba(255,255,255,.55); border:1px solid #c9dbec; text-decoration:none; color:var(--wnc-black); }
.wnc-ahero__links a:hover{ background:rgba(255,255,255,.85); }
.wnc-ahero__go{ font-weight:700; font-size:14px; white-space:nowrap; }
.wnc-ahero__go i{ font-style:normal; display:inline-block; transition:transform .25s ease; }
.wnc-ahero__links a:hover .wnc-ahero__go i{ transform:translateX(4px); }

.wnc-ahero__pic{ position:relative; aspect-ratio:3/2; min-height:100%; overflow:hidden; background:#cbd9e6; }
.wnc-ahero__slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s; color:inherit; text-decoration:none; }
.wnc-ahero__slide.is-on{ opacity:1; visibility:visible; transition:opacity .6s ease; z-index:1; }
.wnc-ahero__slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; margin:0; }
.wnc-ahero__cap{ position:absolute; left:16px; top:16px; display:grid; gap:2px; background:#fff; color:var(--wnc-black); padding:7px 11px; border-radius:7px; box-shadow:0 4px 14px rgba(15,23,42,.14); max-width:calc(100% - 32px); }
.wnc-ahero__cap b{ font-size:14px; font-weight:700; line-height:1.25; }
.wnc-ahero__cap small{ font-size:12px; font-weight:600; color:#64748b; }
.wnc-ahero__slide:hover .wnc-ahero__cap small{ color:#0284c7; }
.wnc-ahero__dots button:focus-visible, .wnc-ahero__slide:focus-visible{ outline:3px solid #0284c7; outline-offset:2px; }
.wnc-ahero__dots{ position:absolute; left:0; right:0; bottom:18px; z-index:3; display:flex; justify-content:center; gap:6px; }
.wnc-ahero__dots button{ width:22px; height:5px; padding:0; border:0; border-radius:3px; background:rgba(255,255,255,.6); cursor:pointer; transition:width .3s ease; }
.wnc-ahero__dots button[aria-current="true"]{ background:#fff; width:34px; }
.wnc-pf-rule--hero{ height:8px; z-index:3; }

@media (max-width:800px){
  .wnc-ahero{ grid-template-columns:1fr; }
  .wnc-ahero__pic{ min-height:0; }
  .wnc-ahero__copy{ gap:20px; }
}
@media (max-width:480px){
  .wnc-ahero{ border-radius:14px; }
  .wnc-ahero__cap{ left:10px; top:10px; max-width:calc(100% - 20px); padding:6px 9px; }
  .wnc-ahero__cap b{ font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  .wnc-ahero__slide, .wnc-ahero__slide.is-on, .wnc-ahero__dots button, .wnc-ahero__go i{ transition:none; }
}