/* ---------- OFFERS TILE ---------- */

.offers{
/* knobs */
--accent:#5bb3bf;
--bg1:rgba(255,255,255,.12);
--bg2:rgba(255,255,255,.05);

position:relative; display:flex; flex-direction:column; gap:.75rem;
padding:16px; margin:0; border-radius:14px; color:#fff; text-align:left;

background:linear-gradient(135deg,var(--bg1),var(--bg2));
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
/* color-mix fallback border, then modern one */
border:1.5px solid rgba(91,179,191,.55);
border:1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
box-shadow:0 12px 24px rgba(0,0,0,.12);
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.offers:hover, .offers:focus-within{
transform:translateY(-6px);
box-shadow:0 10px 28px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.03);
border-color:rgba(91,179,191,.8);
border-color:color-mix(in srgb, var(--accent) 80%, transparent);
}

/* media */
.offers .media{
position:relative; border-radius:10px; overflow:hidden;
background-color:#0e0e0e; background-image:var(--img);
background-size:var(--fit, cover); background-position:var(--pos, center);
background-repeat:no-repeat; aspect-ratio:1/1;
}
.offers .media::after{
content:""; position:absolute; inset:0;
background:linear-gradient(to top, rgba(0,0,0,.35), transparent 55%);
pointer-events:none;
}

/* text */
.offers .title{
margin:.35rem 0 0; font-weight:800; letter-spacing:.02em; line-height:1.15;
font-size:clamp(1.05rem, 1.2vw + .7rem, 1.35rem);
color:#324155; /* dark ink for light tiles; override via parent if needed */
}
.offers .summary{
margin:.1rem 0 .2rem; font-size:.98rem; line-height:1.45; color:rgba(46,58,89,.78);
}

/* lists */
.offers .features{ font-size:.95rem; line-height:1.45; color:#b3c7e6; margin:.2rem 0 .5rem; }
.offers .features li{ margin:.22rem 0; }
.offers .features:empty{ display:none; margin:0; padding:0; }

/* CTA */
.offers .cta{
display:inline-flex; justify-content:center; align-items:center;
min-height:44px; padding:.6rem 1.1rem; border-radius:999px;
font-weight:700; letter-spacing:.02em; line-height:1.1; text-decoration:none;
align-self:center;

/* fallback then modern */
border:1px solid rgba(93,162,216,.7);
border:1px solid color-mix(in srgb, var(--accent, #5da2d8) 70%, transparent);
color:var(--ink, #0f172a);
background:linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 100%);
box-shadow:0 2px 8px rgba(0,0,0,.08);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.offers .cta:hover{
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(0,0,0,.16);
border-color:rgba(93,162,216,.95);
border-color:color-mix(in srgb, var(--accent, #5da2d8) 95%, transparent);
background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 100%);
}
.offers .cta:focus-visible{
outline:2px solid rgba(93,162,216,.85);
outline:2px solid color-mix(in srgb, var(--accent, #5da2d8) 85%, white 15%);
outline-offset:2px;
}
.offers .cta:active{
transform:translateY(0);
box-shadow: inset 0 3px 10px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
}
.offers .cta--light{
--ink:#0f172a; --accent:#b7c7d9;
background:linear-gradient(180deg,#FFFFFF 0%,#F3F6FA 100%);
}
.offers .cta--dark{
--ink:#EEF4FF; --accent:#5DA2D8; color:var(--ink);
border-color:rgba(93,162,216,.7);
border-color:color-mix(in srgb, var(--accent) 70%, transparent);
background:linear-gradient(180deg,#0F172A 0%,#1E293B 100%);
box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.offers .cta--dark:hover{ background:linear-gradient(180deg,#13203A 0%,#223149 100%); }

/* prevent legacy leaks */
.offers a{ color:inherit; text-decoration:none; }
.offers .cta::before, .offers .cta::after{ content:none !important; }

/* small screens */
@media (max-width:480px){
.offers{ padding:14px; border-radius:12px; }
.offers .summary{ font-size:.95rem; }
}