/* The "Featured calculator" card (Pages/Shared/_FeaturedCalculator.cshtml), shared by the home
   page and every category page so the two stay alike (Ugur, 2026-11-04). After site.css, whose
   tokens it uses. The rules down to .hp-note moved here unchanged from home.css. */
.hp-go { font-weight:600; color:var(--accent); }
.hp-go:hover, .hp-go:focus-visible { color:var(--accent-strong); text-decoration:underline; }

.hp-featured { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md); overflow:hidden; }
.hp-featured-head { padding:16px 22px; border-bottom:1px solid var(--line); }
.hp-featured-head h2 { margin:0; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.hp-featured-media { background:var(--bg); border-bottom:1px solid var(--line); }
.hp-featured-media img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; }
.hp-featured-body { padding:22px 22px 24px; }
.hp-featured-meta { margin:0; font-size:.82rem; color:var(--muted); }
.hp-featured-meta a { font-weight:600; color:var(--brand-teal); }
.hp-featured-meta a:hover { text-decoration:underline; }
.hp-featured h3 { margin:10px 0 0; font-family:var(--font-display); font-weight:600; font-size:1.8rem; line-height:1.15;
  letter-spacing:-.015em; color:var(--ink); }
.hp-featured-blurb { margin:12px 0 0; font-size:1rem; line-height:1.6; color:#3f4757; }
.hp-featured-foot { margin:20px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; }
.hp-note { font-size:.82rem; color:var(--muted); }

.hp-featured a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }