/*
 * Kukburi — Offers page (templates/page-offers.html). 3 campaign cards,
 * from the shared kukburi/offer-cards block (inc/blocks.php's
 * kukburi_render_offer_cards()): Kukburi Duo (in-place builder), Pasta &
 * Caesar (in-place builder), and KUKBURI 660 (informational — no builder
 * of its own since it auto-activates off cart total; as of 2026-10-02 its
 * card is a <button> that expands an in-column details panel, see the
 * KUKBURI 660 section at the bottom). Each card leads with a square promo
 * photo (.offer-card-img). No "coming soon" placeholder remains.
 *
 * As of 2026-09-21 the .offer-card* rules live here again, back from a
 * brief stay in site.css: an intermediate pass had the header's nav icon
 * opening these same cards in an in-place expand panel (needing this
 * styling loaded site-wide), but that was reverted back to a plain link
 * to this page — so this styling is only ever needed here again, not on
 * every page. Card language borrows directly from this site's existing
 * .dish-card/.testi-card treatment (var(--cream-card) + 1px var(--line)
 * border) so this reads as the same design system, not a new one.
 */

/* Page heading (templates/page-offers.html's section.offers-banner),
 * restyled 2026-10-03 to the owner's mockup. Sizes are the mockup's,
 * converted to a 1366px viewport: eyebrow 26px, title 115px, subtitle
 * 22px (eyebrow/subtitle retuned from 22/24 the same day), 26px between
 * each line, 150px from the subtitle to the cards. Each size scales
 * linearly down to its phone value at 390px (eyebrow 19, title 56,
 * subtitle 16, cards gap 64) via clamp(); the vw term is divided
 * by var(--z) because above 1366px inc/viewport-scale.php zooms the whole
 * page by --z (= viewport / 1366), and an un-divided vw would be zoomed a
 * second time — this way the max values land exactly at 1366 and the
 * zoom alone handles bigger screens. The title is also capped by the
 * viewport width: "FIRSATLAR" (the widest title) is ~5.6× its font-size
 * wide, so dividing the viewport minus the 2×20px phone gutters (and a
 * little slack) by 5.8 keeps it on one line on phones narrower than
 * 390px (it would overflow from ~375px down otherwise). That cap only
 * ever bites below ~390px.
 * Scoped to .offers-banner: parts/duo-banner.html, revealed further down
 * this same page, is a .page-banner too and stays as it was. */
.page-banner.offers-banner{ padding-bottom: 0; }
.page-banner.offers-banner .eyebrow{
	margin: 0 auto 26px; font-size: clamp(15px, calc(16.21px + .7172vw / var(--z, 1)), 26px);
	font-weight: 800; letter-spacing: .02em; line-height: 1.2;
}
.page-banner.offers-banner h1{
	margin: 0; font-size: min(clamp(40px, calc(32.43px + 6.045vw / var(--z, 1)), 115px), calc((100vw / var(--z, 1) - 48px) / 5.8));
	font-weight: 900; line-height: 1; letter-spacing: .01em; text-transform: uppercase;
}
.page-banner.offers-banner p:not(.eyebrow){
	margin: 26px auto 0; font-size: clamp(16px, calc(13.61px + .6148vw / var(--z, 1)), 22px);
	font-weight: 600; line-height: 1.3;
}
/* Arabic: no letter case to transform, and any letter-spacing breaks
 * the script's joins, so tracking is 0 — sizes/weights follow the same
 * hierarchy in the existing Noto Naskh Arabic (body[dir=rtl] rules in
 * site.css). A taller line box than Jost's 1 so the title's marks
 * don't crowd the lines above and below. */
.page-banner.offers-banner .i18n-ar .eyebrow,
.page-banner.offers-banner .i18n-ar h1{ letter-spacing: 0; }
.page-banner.offers-banner .i18n-ar h1{ line-height: 1.25; }
/* Subtitle → cards: the cards' own section supplies the space (the
 * banner has no bottom padding above), less .offers-grid's own 10px top
 * padding, which is the cards' and left alone. */
.offers-banner + section{ padding-top: calc(clamp(64px, calc(29.65px + 8.811vw / var(--z, 1)), 150px) - 10px); }

/* minmax(0, 1fr), not a bare 1fr — a bare 1fr track's implicit min-width:
 * auto refuses to shrink a column below its content's intrinsic width,
 * so the Kukburi Duo card's own long paragraph text was ballooning its
 * column and squeezing the other two (confirmed live via
 * getComputedStyle(...).gridTemplateColumns before this fix, back when
 * this bug first showed up in the header panel's own narrower grid). */
/* align-items:start (2026-10-02): the KUKBURI 660 grid item is now a
 * wrapper holding its card AND an expandable details panel — with the old
 * default stretch, opening that panel would stretch the DUO / Pasta &
 * Caesar cards to match. start is the baseline (mobile single column, and
 * any browser without subgrid); the desktop block right below restores
 * equal card heights without that side effect. */
.offers-grid{
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
	padding: 10px 0 60px; align-items: start;
}
@media (max-width: 900px){ .offers-grid{ grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
/* Desktop: the K660 wrapper spans two rows of the parent grid and passes
 * them to its own children via subgrid — the card button sits in row 1
 * beside DUO / Pasta & Caesar (all three stretch to the same height, so
 * their CTAs line up), the details panel sits in row 2 under it in the same
 * column. Row 2 only ever holds the panel, so opening it can't change row
 * 1's height. row-gap 0 so the empty row 2 (panel hidden) adds no space;
 * the panel brings its own top spacing (.k660-details padding-top). */
@media (min-width: 901px){
	@supports (grid-template-rows: subgrid){
		.offers-grid{ row-gap: 0; align-items: stretch; }
		.offer-card-wrap{ grid-row: span 2; display: grid; grid-template-rows: subgrid; }
		.offer-card-wrap > .offer-card{ grid-row: 1; align-self: stretch; }
		.offer-card-wrap > .k660-details{ grid-row: 2; }
	}
}

.offer-card{
	position: relative; display: flex; flex-direction: column; gap: 10px;
	background: var(--cream-card); border: 1px solid var(--line); border-radius: 12px;
	padding: 28px 22px 24px; text-decoration: none; color: inherit;
	min-height: 260px; font-size: 1rem;
}
a.offer-card, button.offer-card{ transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; }
a.offer-card:hover, button.offer-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }
/* KUKBURI 660's card face is a real <button> (it toggles a panel, it
 * doesn't navigate) — strip UA button styling so it renders exactly like
 * the two <a> cards. font-size is deliberately NOT reset here (.offer-card
 * already sets 1rem); family/weight/line-height/letter-spacing don't
 * inherit into buttons by default, so they're restored explicitly. */
button.offer-card{
	width: 100%; margin: 0; text-align: start; appearance: none; -webkit-appearance: none;
	font-family: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit;
}

/* Promo image (2026-10-02) — first child of each card, full card width,
 * no padding above it: negative margins pull it out over the card's own
 * 28px/22px padding, and calc(100% + 44px) restores the width those side
 * margins remove. 11px top radius = the card's 12px outer radius minus its
 * 1px border, i.e. the curve of the card's inner edge, so the photo sits
 * flush inside the border with no cream sliver at the corners. width/
 * height attributes (1024x1024 from wp_get_attachment_image) + aspect-
 * ratio reserve the square before the file arrives — no layout shift.
 * Symmetric margins, so nothing changes under dir="rtl". */
.offer-card-img{
	display: block; width: calc(100% + 44px); max-width: none; height: auto;
	aspect-ratio: 1 / 1; object-fit: cover;
	margin: -28px -22px 8px; border-radius: 11px 11px 0 0;
}
/* Disabled (sold-out ingredient) cards: the photo loses most of its colour
 * so it reads as unavailable rather than just faded — same grayscale(.65)
 * the sold-out dish cards use (assets/css/menu-cards.css). */
.offer-card-disabled .offer-card-img{ filter: grayscale(.65); }

/* Status badge — only a disabled card's red "Unavailable" pill uses this
 * (the green "Available Now"/"Automatic Offer" pills were removed
 * 2026-10-03). It's a stamp centred on the photo (moved there from the
 * photo's top corner, 2026-10-03; same position in EN/TR/AR), out of the
 * flow, so a disabled card's title sits the same 26px under its photo as
 * every other card's and all three cards stay equal height.
 * .offer-card is position:relative and the square photo fills the
 * card's padding box from its top edge, so the photo's centre is 50% of
 * the padding-box width across AND down: left:50% for the first, and
 * margin-top:50% for the second (a margin percentage resolves against the
 * containing block's WIDTH, even vertically — `top:50%` would use the
 * card's height instead), then translate(-50%,-50%) centres the pill on
 * that point. Painted above the photo (z-index), with a soft shadow to
 * lift it off the greyed photo, and kept at full opacity — see
 * .offer-card-disabled below. */
.offer-card-badge{
	position: absolute; top: 0; left: 50%; margin-top: 50%; transform: translate(-50%, -50%); z-index: 1;
	font-family: 'Jost',sans-serif; font-weight: 700; white-space: nowrap;
	font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px 20px; border-radius: 999px;
	box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.offer-card-badge-soon{ background: var(--paper-2); color: var(--ink); opacity: .75; }
/* Unavailable (2026-09-28, inc/blocks.php's kukburi_render_offer_cards())
 * — a real dish/add-on this offer needs is currently sold out/unavailable,
 * distinct from -soon (that one just isn't built yet): a literal red,
 * same one .availability-badge/.availability-inline-badge already use for
 * "unavailable" (assets/css/menu-cards.css / item-modal.css), not this
 * theme's --green/--paper-2 tokens which both already mean something else
 * here. .offer-card-disabled is the card ITSELF (rendered as a plain
 * <div>, not <a> — see that function's own comment on why a missing href
 * is what actually makes this unclickable, not just this dimming) —
 * deliberately not touching a.offer-card's own hover/cursor rules above,
 * which simply never match a <div> in the first place. */
.offer-card-badge-unavailable{ background: #A4402F; color: #fff; }
/* Dimming moved from the whole card (was `.offer-card-disabled{opacity:.6}`)
 * to the photo and text (2026-10-03), so the red badge overlaid on the
 * photo stays crisp at full opacity — a child can't be made more opaque
 * than its parent. Applied to the title/copy/CTA elements themselves, not
 * their .i18n wrappers: those are display:contents, which opacity has no
 * effect on. The card's own background and border are no longer faded. */
.offer-card-disabled .offer-card-img,
.offer-card-disabled .offer-card-title,
.offer-card-disabled .offer-card-copy,
.offer-card-disabled .offer-card-cta{ opacity: .6; }

.offer-card-title{ font-size: 1.4rem; margin: 8px 0 0; max-width: 80%; }
.offer-card-copy{ font-size: .92rem; line-height: 1.5; opacity: .8; margin: 0; flex-grow: 1; }

.offer-card-cta{
	margin-top: auto; padding-top: 10px; font-family: 'Jost',sans-serif; font-weight: 700;
	font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink);
	display: inline-flex; align-items: center; gap: 6px;
}
.offer-card-cta::after{ content: "→"; transition: transform .2s ease; }
body[dir="rtl"] .offer-card-cta::after{ content: "←"; }
a.offer-card:hover .offer-card-cta::after{ transform: translateX(4px); }
body[dir="rtl"] a.offer-card:hover .offer-card-cta::after{ transform: translateX(-4px); }

/* Placeholder slots — deliberately inert: no cursor:pointer, no hover
 * lift/shadow (the two things that signal "clickable" on the real card
 * above), dashed border instead of a solid one, muted icon+copy instead
 * of a title, and no CTA row at all. Reads clearly as "reserved for
 * later," not as a broken or fake button. */
.offer-card-placeholder{
	border-style: dashed; align-items: center; text-align: center; justify-content: center;
	background: transparent;
}
.offer-card-icon{ color: var(--ink); opacity: .35; }
.offer-card-icon svg{ width: 34px; height: 34px; }
.offer-card-copy-muted{ opacity: .55; flex-grow: 0; max-width: 220px; margin: 0 auto; }

/* #duo-inline-section — the "Kukburi Duo" card's in-place reveal target
 * (assets/js/duo.js toggles [hidden] off on click). Explicit override,
 * not just the bare attribute — see templates/page-offers.html's own
 * comment on why. */
#duo-inline-section[hidden]{ display: none; }
#duo-inline-section{ padding-top: 20px; border-top: 1px solid var(--line); }
/* parts/duo-banner.html's own .page-banner rule (site.css) carries
 * 170px of top padding sized to clear a fixed header on a FRESH page
 * load — correct on /duo/ itself (where this part sits right under the
 * header), wrong here: this copy of it appears mid-page, revealed below
 * the 3 offer cards, not at the top of the viewport. Cut down to normal
 * section spacing for this context only — bottom padding (which frames
 * the builder below it) is untouched. */
#duo-inline-section .page-banner{ padding-top: 40px; }
@media (max-width: 780px){ #duo-inline-section .page-banner{ padding-top: 30px; } }

/* #pasta-caesar-inline-section — the "Pasta & Caesar" card's own in-place
 * reveal target, same mechanism/reasoning as #duo-inline-section above
 * (assets/js/pasta-caesar-builder.js toggles [hidden] off on click). No
 * .page-banner override needed here — this section has no page-banner
 * part in it at all (see templates/page-offers.html's own comment on
 * why), just the wrap+builder padding below. */
#pasta-caesar-inline-section[hidden]{ display: none; }
#pasta-caesar-inline-section{ padding: 20px 0 60px; border-top: 1px solid var(--line); }


/* KUKBURI 660 card (reworked 2026-10-02 — see inc/blocks.php's
 * kukburi_render_offer_cards()). Now a text-only card face like the other
 * two (photo / badge / title / one line / toggle label) that expands an
 * in-column details panel, replacing the old 660₺ figure, 3,000₺ line,
 * Mango/Cola thumbnails, "2L INCLUDED" and long description — their rules
 * (.k660-figure-*, .k660-images, .k660-included, the card's own min-height
 * and smaller-copy overrides) were removed with that markup.
 *
 * Title/copy are <span>s here (a <button> can't contain h2/p), so the
 * title re-states exactly what the other cards' h2.offer-card-title gets
 * from site.css's h1–h4 rule (Jost 900, line-height 1.05; Noto Naskh
 * Arabic under RTL) on top of the shared .offer-card-title/.offer-card-copy
 * sizing above. */
.offer-card-k660 .offer-card-title{ display: block; font-family: 'Jost', sans-serif; font-weight: 900; line-height: 1.05; }
body[dir="rtl"] .offer-card-k660 .offer-card-title{ font-family: 'Noto Naskh Arabic', serif; }
.offer-card-k660 .offer-card-copy{ display: block; }

/* Toggle label — same .offer-card-cta look as the other cards' "View
 * Offer →", with a ↓/↑ arrow instead (in both directions — up/down don't
 * mirror). Two label spans, one shown per aria-expanded state, so the
 * label can never disagree with the real state. Hidden entirely until
 * the inline init script marks the wrapper .is-js: with JS off the panel
 * is simply always open, and a "Hide details" that does nothing would be
 * a broken control. */
.offer-card-k660 .k660-toggle-label{ display: none; }
.offer-card-wrap.is-js .offer-card-k660 .k660-toggle-label{ display: inline-flex; }
.offer-card-k660 .k660-label-open,
.offer-card-k660[aria-expanded="true"] .k660-label-closed{ display: none; }
.offer-card-k660[aria-expanded="true"] .k660-label-open{ display: inline; }
.offer-card-k660 .k660-toggle-label::after,
body[dir="rtl"] .offer-card-k660 .k660-toggle-label::after{ content: "↓"; }
.offer-card-k660[aria-expanded="true"] .k660-toggle-label::after,
body[dir="rtl"] .offer-card-k660[aria-expanded="true"] .k660-toggle-label::after{ content: "↑"; }
button.offer-card-k660:hover .k660-toggle-label::after{ transform: translateY(2px); }
button.offer-card-k660[aria-expanded="true"]:hover .k660-toggle-label::after{ transform: translateY(-2px); }

/* Details panel. Spacing above it lives in padding (not a margin on the
 * inner box) so assets/js/offers.js's 0 -> scrollHeight reveal animates
 * the whole thing, gap included, with nothing jumping at the end.
 * Explicit [hidden] rule — same reason as #duo-inline-section's above. */
.k660-details{ padding-top: 12px; }
.k660-details[hidden]{ display: none; }
.k660-details-inner{
	background: var(--cream-card); border: 1px solid var(--line); border-radius: 12px; padding: 22px;
}
.k660-details-copy{ margin: 0 0 18px; font-size: .92rem; line-height: 1.5; }
.k660-shop-btn{ text-decoration: none; }
/* Hash landings (#offer-card-k660 / #k660-details) clear the sticky
 * header instead of tucking under it — 180px covers the full-height
 * header (162px measured at 1366px: topbar + navrow) plus breathing room;
 * the header only gets shorter once it compacts on scroll. */
#offer-card-k660, #k660-details{ scroll-margin-top: 180px; }