/* ==========================================================================
   Bonus Landing – small cards (Landing settings → Offer sections → Card size)
   Loaded only when the option is on; the <link> carries the media query, so "phones only" needs no second copy.
   Card: band · logo block left, brand + offer title right · button · Lisätietoja. "Lisätietoja" opens the details
   sheet at the bottom of the screen, so the card never changes height.
   ========================================================================== */

/* Flag the script reads to know a card is in the small layout right now. */
.offer-card{--bl-compact:1}

/* ---- Band ---- */
.offer-list .offer-label{min-height:0;padding:6px 12px;font-size:10.5px;letter-spacing:.12em;line-height:1.3}
.offer-podium__tier-label,.offer-podium__tier-label--gold{padding:6px 12px;font-size:10.5px;letter-spacing:.12em;line-height:1.3}

/* ---- Body: logo | brand + title, then button, then Lisätietoja ---- */
.offer-list .wrap-content,.offer-podium__card-body{
	display:grid;grid-template-columns:116px minmax(0,1fr);grid-template-areas:"logo main" "cta cta" "more more";
	align-items:center;align-content:start;gap:10px 12px;padding:12px;
}
.offer-list .offer-logo,.offer-row--2 .offer-logo,.offer-podium__logo-wrap,.offer-podium__card--gold .offer-podium__logo-wrap{grid-area:logo;align-self:stretch;height:auto;min-height:72px;padding:10px}
.offer-list .offer-logo img,.offer-row--2 .offer-logo img{width:auto;max-width:100%;height:auto;max-height:44px}
.offer-podium__logo-wrap img,.offer-podium__card--gold .offer-podium__logo-wrap img{max-height:44px}
.offer-logo-text{font-size:15px}
.offer-body{grid-area:main;min-width:0}
.offer-main{gap:3px}
.offer-list .offer-brand{display:block;margin:0;overflow:hidden;color:var(--c-grey-500);font-size:11.5px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-align:left;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.offer-list .offer-title{margin:0;min-height:0;-webkit-line-clamp:3;font-size:15px;letter-spacing:-.01em;line-height:1.25;text-align:left}
.offer-list .offer-description{display:none}
.offer-list .spacer{display:none}
.offer-list .offer-button{grid-area:cta;min-height:44px;padding:11px 16px;border-radius:11px;font-size:14px}
.offer-list .btn-expand-detail{grid-area:more;justify-self:center;padding:3px 2px 1px;font-size:13px}
.btn-expand-detail[data-sheet-only]{visibility:visible;pointer-events:auto}
.offer-list .btn-expand-detail::after{transform:translateY(-1px) rotate(-45deg)} /* points to the sheet, not down into the card */

/* Rows: a little tighter, the curated row uses the same card */
.offer-row--2{gap:14px}
.offer-row--3,.offer-row--grid{gap:14px}
.offer-podium__grid{gap:14px}
.offer-podium__rank,.offer-podium__rank--gold{left:-8px;top:-9px;width:28px;height:28px;border-width:2px;font-size:13px}

/* ---- Details sheet ---- */
.bl-sheet{position:fixed;inset:0;z-index:110;display:flex;align-items:flex-end;justify-content:center}
.bl-sheet[hidden]{display:none}
.bl-sheet__backdrop{position:absolute;inset:0;background:rgba(9,15,28,.58);animation:bl-sheet-fade .2s ease both}
.bl-sheet__panel{
	position:relative;width:100%;max-width:520px;max-height:88vh;max-height:88dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
	padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px));background:#fff;border:1.5px solid var(--c-navy);border-bottom:0;border-radius:20px 20px 0 0;
	box-shadow:0 -24px 60px -20px rgba(9,15,28,.6);animation:bl-sheet-up .28s cubic-bezier(.2,.8,.2,1) both;
}
.bl-sheet__panel::before{content:"";display:block;width:44px;height:4px;margin:-8px auto 14px;background:var(--c-grey-300);border-radius:4px}
.bl-sheet__close{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:var(--c-grey-100);border:0;border-radius:50%;color:var(--c-navy);font-size:22px;line-height:1;cursor:pointer}
.bl-sheet__close:hover{background:var(--c-grey-200)}
.bl-sheet__close:focus-visible{outline:3px solid rgba(31,43,63,.45);outline-offset:2px}
.bl-sheet__head{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:12px;margin:0 0 14px}
.bl-sheet__logo{display:flex;align-items:center;justify-content:center;min-height:72px;padding:10px;border:1px solid rgba(9,15,28,.06);border-radius:var(--radius-md);color:#fff;font-size:15px;font-weight:800;text-align:center}
.bl-sheet__logo img{width:auto;max-width:100%;height:auto;max-height:44px;object-fit:contain}
.bl-sheet__brand{margin:0 0 3px;padding-right:40px;color:var(--c-grey-500);font-size:11.5px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}
.bl-sheet__title{margin:0;color:var(--c-navy);font-size:16px;font-weight:800;letter-spacing:-.015em;line-height:1.25;overflow-wrap:anywhere}
.bl-sheet__desc{margin:0 0 14px;color:var(--c-text);font-size:14.5px;font-weight:500;line-height:1.55}
.bl-sheet__body.offer-list{margin:0}
.bl-sheet .detail-content{display:block;margin:0 0 16px;padding:12px 14px;background:var(--c-grey-100);border-radius:var(--radius-md)}
.bl-sheet .offer-list .offer-button{min-height:50px;font-size:15px}
html.bl-sheet-open{overflow:hidden}
@keyframes bl-sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes bl-sheet-fade{from{opacity:0}to{opacity:1}}

@media (min-width:768px){
	.bl-sheet{align-items:center;padding:24px}
	.bl-sheet__panel{max-width:460px;padding:26px 24px 24px;border-bottom:1.5px solid var(--c-navy);border-radius:20px;box-shadow:0 30px 70px -24px rgba(9,15,28,.7)}
	.bl-sheet__panel::before{display:none}
}
@media (prefers-reduced-motion:reduce){
	.bl-sheet__panel,.bl-sheet__backdrop{animation:none}
}