/* Wire 3 Fiber — reusable card COMPONENTS
   Offer / teaser cards extracted so they can be reused on the buy flow and
   iterated for promo "teasers". Depends on styles.css (tokens + .btn classes).
   Load order:  styles.css  ->  components.css  ->  <page>.css
   Usage + markup: docs/DESIGN_SYSTEM.md */

/* ---- Offer grid — good / better / best; the middle column is the anchor ---- */
.offers { display:grid; grid-template-columns:1fr 1.14fr 1fr; gap:20px; max-width:1080px; margin:0 auto; text-align:left; align-items:center; }

/* ---- Offer card — white, thin stroke. The ENTIRE card is a link (stretched
   CTA, see .offer-cta::after) and lifts on hover. ---- */
.offer { position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid #D3DBE6;
  border-radius:18px; padding:30px 26px; box-shadow:var(--shadow); cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s; }
.offer:hover { transform:translateY(-5px); box-shadow:0 26px 52px rgba(13,34,64,.17); }
.offer:not(.offer-feature):hover { border-color:#C2CCDA; }

/* ---- Anchor card (.offer-feature) — larger, dark glassy gradient fill with the
   same gradient REVERSED for the border. Tuned to pop on a LIGHT background. ---- */
.offer-feature { padding:42px 32px; border:2px solid transparent;
  background:linear-gradient(150deg,#1E406E 0%,#0A1B34 100%) padding-box,
            linear-gradient(330deg,#1E406E 0%,#0A1B34 100%) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 28px 64px rgba(11,30,58,.38); }
.offer-feature:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 36px 76px rgba(11,30,58,.5); }
.offer-feature .offer-title { color:#fff; }
.offer-feature .offer-line { color:rgba(255,255,255,.72); }
.offer-feature .op-amt { color:#fff; }
.offer-feature .op-unit { color:rgba(255,255,255,.7); }
.offer-feature .offer-save { background:rgba(125,196,0,.18); color:var(--green); border-color:rgba(125,196,0,.5); }

/* ---- "Best value" flag — badge straddling the top border ---- */
.offer-flag { position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:linear-gradient(135deg,var(--green) 0%,var(--blue) 100%); color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.66em; letter-spacing:.07em; text-transform:uppercase;
  padding:5px 14px; border-radius:20px; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.18); }

/* ---- Card content: title, one line, price (+ SAVE pill) ---- */
.offer-title { font-family:var(--font-head); font-weight:800; font-size:1.3em; line-height:1.2; letter-spacing:-.02em; color:var(--navy); }
.offer-line { color:var(--grey-dk); font-size:.94em; font-weight:600; margin-top:9px; }
.offer-price { display:flex; align-items:center; gap:12px; margin:22px 0 26px; }
.op-cost { display:flex; align-items:baseline; gap:6px; }
.op-amt { font-family:var(--font-head); font-weight:800; font-size:2.4em; line-height:1; letter-spacing:-.03em; color:var(--navy); }
.op-unit { color:var(--grey-dk); font-weight:700; font-size:.92em; }
.offer-save { background:rgba(125,196,0,.16); color:var(--green-dk); border:1px solid rgba(125,196,0,.38);
  font-family:var(--font-head); font-weight:700; font-size:.74em; letter-spacing:.03em; padding:5px 10px; border-radius:20px; white-space:nowrap; }

/* ---- CTA — stretched ::after makes the whole card clickable; recolors on card
   hover (the stretched overlay also triggers the button's :hover). ---- */
.offer-cta { width:100%; margin-top:auto; }
.offer-cta::after { content:""; position:absolute; inset:0; z-index:1; border-radius:18px; }
.offer-feature .offer-cta:hover { background:var(--blue); color:#fff; }

@media (max-width:880px){
  .offers { grid-template-columns:1fr; max-width:420px; }
}