/*
 * Theobroma — "Joy in Kolkata" QR microsite (temporary campaign page).
 * Scoped to this page only (base.php keys it off the view basename), so
 * these class names never leak onto any other Theobroma page.
 *
 * Mobile-first: this page is reached almost entirely via a printed QR code
 * scanned on a phone, so base styles target phone widths and desktop is the
 * progressive enhancement (@media min-width: 768px), not the default.
 */

:root {
  /* Sampled directly from the supplied hero photo's stripe tail so the CSS
     stripe band below it (the headline sits there) blends with no seam. */
  --joyk-cream: #FCEAD9;
  --joyk-cream-stripe: #F9E2CC;
  --joyk-ink: #5A3A2A;
  /* NOT var(--brand-primary) — that token is Theobroma's pale mint
     (#B0DCD1, confirmed live), correct for sitewide buttons/CTAs but wrong
     for this warm-maroon heading style.
     #8F411F — sampled directly (pixel-picked) from the Figma "Explore Our
     World" export: title and card labels both measured at RGB(143,65,31).
     Was #c8553d (storefront.css's --about-coral-deep) as a reasonable
     stand-in before an exact comp crop was available — that read visibly
     more orange than the real comp once compared side by side. */
  --joyk-accent: #8F411F;
  /* Gold accent — pixel-sampled from the "Store Opening" crop: the date line
     and the outlet-column divider both measured at RGB(179,136,47). Distinct
     from --joyk-accent (brown); the comp uses both, not one standing in for
     the other. */
  --joyk-gold: #B3882F;
  /* Visual estimate, not pixel-sampled (see .joyk-intro__title) — the dusty
     rose behind "Kolkata,". */
  --joyk-pink: #F0B8C4;
}

.joyk-hero,
.joyk-intro,
.joyk-world,
.joyk-explore,
.joyk-opening {
  box-sizing: border-box;
}

.joyk-hero *,
.joyk-intro *,
.joyk-world *,
.joyk-explore *,
.joyk-opening * {
  box-sizing: border-box;
}

/* ----- Page frame ----- */
/* The whole microsite is ONE bordered card, not five independent full-width
   bands — this is what the comp's rounded top/bottom and continuous side
   scallops actually are. Getting this wrong (border per-section, sized to
   the viewport) was the bug: at desktop the hero PHOTO caps at 600px and
   centres, but the border sat on the full-width SECTION — so the scallops
   rendered out at the browser-window edges, nowhere near the visible card,
   with a huge gap between them. Capping and centring this one wrapper
   instead means every child just fills 100% of it and the border always
   tracks the card's actual edge, at any width.
   Background sits on the body, not here — this element's own box is exactly
   the card, so its background would be invisible under the full-bleed
   hero/opening corners if those didn't already clip to the radius. */
body {
  background: var(--joyk-cream-stripe, #F9E2CC);
}
/* No padding here — content fills to the page's true edge (hero photo,
   stripes, everything), and the frame below OVERLAYS it. That's what makes
   the gap before the lace show real background instead of blank space: the
   gap is .joyk-frame's own inset, not a padding box with nothing drawn in
   it. */
.joyk-page {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  background: var(--surface);
}

/* Lace frame: the REAL asset — lace-corner.png (a 70px native crop) plus
   lace-side-strip.png / lace-top-strip.png (one native-scale tile crop,
   repeated 150x into a long image, built with PIL and verified seam-free by
   compositing and looking) — not image-487586, that CDN upload was a lossy,
   flattened-to-white JPEG (darkest pixel sampled at RGB 243 vs a 255
   background, no usable contrast; a CSS radial-gradient semicircle stood in
   for it at first).
   First real-asset attempt stretched the FULL 1027x5409 original into each
   thin edge via object-fit: cover — technically seam-free, but it scales
   the whole source down by ~98%, shrinking every scallop far below the
   corner crop's own size. That mismatch is what read as "duplicate/weird"
   lace at the corner-to-edge join. The pre-tiled strips fix it by keeping
   the SAME native scale as the corner everywhere (see .joyk-frame__edge's
   own comment on the exact 0.514x figure) — cover now only has to crop
   LENGTH, never DENSITY.
   EVERY piece here is a real <img>, not CSS background-image: a
   background-image present on an element since initial paint silently
   fails to render in this environment — confirmed by cloning the exact
   same element after load (the clone renders, the original doesn't) and
   by this exact bug report (edges were rendering as blank white instead of
   lace). border-image was tried too and had the same problem on the tall
   side slices. <img> has none of this.
   lace-side-strip.png is built from a single left-edge tile crop — the
   right edge reuses that same strip mirrored via transform: scaleX(-1)
   (see .joyk-frame__edge--right below), not a second, dedicated asset. */
.joyk-frame {
  position: absolute;
  /* The 10px gap — "space before lace" — shows whatever is actually behind
     it (hero photo / stripe / white section), because the frame is an
     overlay on top of full-bleed content, not a margin with nothing in it. */
  inset: 10px;
  z-index: 999;
  pointer-events: none;
}
/* 18px — matches the corner's own scale (36px shown from a 70px native
   crop = 0.514x; the side/top strips are native-scale tile crops, so 18px
   ≈ 34px * 0.514 keeps every scallop the same size as the corner's,
   instead of the corner's big scallops meeting a shrunken dense row. */
.joyk-frame__edge {
  display: block;
  position: absolute;
  object-fit: cover;
}
.joyk-frame__edge--top,
.joyk-frame__edge--bottom {
  left: 36px;
  width: calc(100% - 72px);
  height: 18px;
}
.joyk-frame__edge--top { top: 0; object-position: left top; }
.joyk-frame__edge--bottom { bottom: 0; object-position: left top; transform: scaleY(-1); }
.joyk-frame__edge--left,
.joyk-frame__edge--right {
  top: 36px;
  height: calc(100% - 72px);
  width: 18px;
}
.joyk-frame__edge--left { left: 0; object-position: left top; }
.joyk-frame__edge--right { right: 0; object-position: left top; transform: scaleX(-1); }
.joyk-frame__corner {
  display: block;
  position: absolute;
  width: 36px;
  height: 36px;
}
.joyk-frame__corner--tl { top: 0; left: 0; }
.joyk-frame__corner--tr { top: 0; right: 0; transform: scaleX(-1); }
.joyk-frame__corner--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.joyk-frame__corner--br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* ----- Hero ----- */
.joyk-hero {
  position: relative;
  line-height: 0;
  /* Matches the stripe band below — shows as the letterbox color on desktop,
     where the image caps at 600px but this section stays full width. */
  background: var(--joyk-cream-stripe);
}
.joyk-hero__media {
  display: block;
  width: 100%;
  /* Kolkata-Microsite-Banner.png is a clean 540x706 standalone banner (bridge/
     balloons/dessert spread, no stripe tail) — replaced the old 428x1600
     composite whose photo content was only ~428x555, which upscaled blurry on
     desktop (hero caps at 600px wide). Box matches the asset's native ratio so
     object-fit: cover shows the whole frame and hands off to the CSS stripe
     band below. */
  aspect-ratio: 540 / 706;
  object-fit: cover;
  object-position: top center;
}
.joyk-hero__logo {
  position: absolute;
  top: var(--s-12);
  left: 50%;
  transform: translateX(-50%);
  width: 270px;
  z-index: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .18));
}

/* ----- Divider — reused under every major heading ----- */
.joyk-ribbon {
  display: block;
  width: 64px;
  height: auto;
  margin: var(--s-3) auto 0;
}

/* ----- Intro band ("Kolkata, We've Arrived...") ----- */
.joyk-intro {
  position: relative;
  background: var(--joyk-cream);
  background-image: repeating-linear-gradient(
    90deg,
    var(--joyk-cream-stripe) 0 24px,
    var(--joyk-cream) 24px 48px
  );
  padding: var(--s-10) var(--s-4);
  text-align: center;
  overflow: hidden;
}
/* Pink embossed outline behind the letters, per the comp — a layered
   "offset duplicate" effect (brown fill, pink copy behind/below it), not a
   flat single colour. No reference FILE was available for this one to
   pixel-sample (shared inline, not saved) — --joyk-pink is a visual
   estimate off the brand's own dusty-pink tones (logo badge, chandelier),
   not a measured value; nudge it if it's off.
   Font stays --font-display, not a rounder/bubblier face like the comp's —
   CLAUDE.md's no-new-fonts rule means this page can't load a different
   family just for one headline; the shadow is what's actually achievable
   here. */
.joyk-intro__title {
  margin: 0;
  font-family: var(--font-display);
  /* No bigger named token than --fs-56 (3.5rem) — this is a deliberate
     one-off display size past that scale, same reasoning as the desktop
     override below it. */
  font-size: 5rem;
  font-weight: var(--fw-bold);
  color: var(--joyk-accent);
  line-height: var(--lh-tight);
  /* Softened with blur + a tighter offset — a hard 0-blur offset read as a
     sharp duplicate/double-vision outline rather than a soft emboss. */
  text-shadow: 2px 3px 3px var(--joyk-pink, #F0B8C4);
}
/* Inline, not absolutely positioned — it needs to sit right against the end
   of "Kolkata," wherever that lands, which only the text's own flow knows.
   An absolutely-positioned copy was floating off to the side instead of
   overlapping the comma like the comp. Lifted up with translateY so it
   drapes down OVER the top of the text (lying on it) instead of just
   touching it at the baseline. */
.joyk-intro__cat {
  display: inline-block;
  width: 72px;
  height: auto;
  vertical-align: middle;
  margin-left: -99px;
  margin-top: 17px;
  transform: translateY(-64px) rotate(-10deg);
}
/* Darker ink brown, distinct from "Kolkata,"'s lighter accent — keeps it a
   quiet subtitle rather than competing with the much bigger headline above
   it. Sitewide font (var(--font-body), inherited) — no separate font family
   on this page. */
.joyk-intro__sub {
  margin: var(--s-1) 0 0;
  font-style: italic;
  font-size: var(--fs-16);
  color: var(--joyk-ink);
}

/* ----- "Step Into Our World Of Joy" ----- */
.joyk-world {
  background: var(--surface);
  border-radius: var(--r-4) var(--r-4) 0 0;
  margin-top: -1px;
  padding: var(--s-8) var(--s-4);
}
.joyk-world__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
/* NOT var(--fg-1) — pixel-sampled: title, body and the closing tagline are
   all the same --joyk-accent brown in the comp, not the generic dark-gray
   body-text token. */
.joyk-world__title {
  margin: 0 0 var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--joyk-accent);
}
.joyk-world__media {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto var(--s-5);
  border-radius: var(--r-3);
}
.joyk-world__copy {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--joyk-accent);
}
.joyk-world__copy--emphasis {
  font-style: italic;
}
/* The comp sets this closing line apart — bold AND italic, not just italic
   like the sentence before it. */
.joyk-world__copy--tagline {
  margin: 0;
  font-style: italic;
  font-weight: var(--fw-bold);
}

/* ----- "Explore Our World" category grid ----- */
.joyk-explore {
  background: var(--joyk-cream);
  background-image: repeating-linear-gradient(
    90deg,
    var(--joyk-cream-stripe) 0 24px,
    var(--joyk-cream) 24px 48px
  );
  padding: var(--s-8) var(--s-4);
}
.joyk-explore__title {
  margin: 0 0 var(--s-6);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--joyk-accent);
}
/* Explicit 2 / 3 / 2 rows, not a generic wrap — the comp hand-lays these out
   that way (confirmed against the crop: row 1 and row 3 both have 2 items,
   row 2 has 3, all the same card size). A single flex-wrap list at a fixed
   item width wraps by available space instead and fell out as 3/3/1, so the
   view renders three separate row lists rather than one 7-item list. */
.joyk-explore__grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  max-width: 480px;
  margin: 0 auto;
}
.joyk-explore__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--s-6);
}
/* Fixed, uniform plate size across every row — the Figma comp draws all seven
   plates the same small size, centered, with generous whitespace (a 2-item row
   is NOT bigger than the 3-item row; the extra space becomes margin). flex: 1
   grew each item to fill its row, which blew the 2-item rows up ~1.8x past the
   comp. clamp() keeps the plate dainty on small phones and caps it on wide
   viewports; justify-content + the row gap handle the spacing. */
.joyk-explore__item {
  flex: 0 0 auto;
  width: clamp(88px, 22vw, 116px);
}
.joyk-explore__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  width: 100%;
  text-decoration: none;
  color: inherit;
}
.joyk-explore__media {
  /* Bare photo directly on the stripe, no card/background — matches the
     comp. These are background-keyed PNGs (local asset, not the raw CDN
     JPEGs — see the view's comment), so a CSS shadow replaces the contact
     shadow that was baked into the original white backdrop.
     Box ratio matches the normalized plate canvas (420x300). The source
     PNGs were trimmed of their baked-in transparent padding (~26% top /
     ~31% bottom, plate filling only ~63% width) and re-centered to fill
     the frame — a 1/1 box over those left each plate tiny and floating
     with a large image→label gap (see the comp: big plates, tight label). */
  width: 100%;
  aspect-ratio: 420 / 300;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12));
  transition: transform var(--dur, .2s) var(--ease, ease);
}
.joyk-explore__link:hover .joyk-explore__media,
.joyk-explore__link:focus-visible .joyk-explore__media {
  transform: scale(1.04);
}
.joyk-explore__label {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--joyk-accent);
}

/* ----- Store Opening band ----- */
.joyk-opening {
  background: var(--surface);
  padding: var(--s-8) var(--s-4) var(--s-10);
  text-align: center;
}
.joyk-opening__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  color: var(--joyk-accent);
}
.joyk-opening__chandelier {
  width: 36px;
  height: auto;
  flex: none;
}
.joyk-opening__chandelier--right {
  transform: scaleX(-1);
}
.joyk-opening__lead {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-14);
  color: var(--joyk-accent);
}
/* Gold, not --joyk-ink — pixel-sampled: this line is the ONE piece of text
   in the whole section that isn't the brown accent. Badged on a tinted pill
   rather than left as plain text, per feedback that the date needed to read
   as a called-out fact, not just another line. */
.joyk-opening__date {
  display: inline-block;
  margin: 0 0 var(--s-6);
  padding: var(--s-2) var(--s-5);
  font-size: var(--fs-20);
  white-space: nowrap;
  font-weight: var(--fw-bold);
  color: var(--joyk-gold);
  background: color-mix(in srgb, var(--joyk-gold) 10%, var(--surface));
  border: 1.5px solid var(--joyk-gold);
  border-radius: 999px;
}
/* Two columns with a gold divider between them, at every width — the comp
   shows this side-by-side even on a narrow crop, not just desktop. */
.joyk-opening__outlets {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 var(--s-5);
  margin: 0 0 var(--s-6);
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
}
.joyk-opening__outlet {
  grid-row: 1;
}
.joyk-opening__outlet:first-child { grid-column: 1; }
.joyk-opening__outlet:last-child { grid-column: 3; }
.joyk-opening__outlets::before {
  content: '';
  grid-row: 1;
  grid-column: 2;
  width: 1px;
  background: var(--joyk-gold);
}
.joyk-opening__outlet-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  font-size: var(--fs-16);
  color: var(--joyk-accent);
  margin-bottom: var(--s-1);
}
.joyk-opening__pin {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--nonveg, #E23434);
}
.joyk-opening__outlet-address {
  margin: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-body);
  color: var(--joyk-accent);
}
/* "Enjoy 15% Off" — flourish ribbons flanking plain text, with the numeral
   called out much bigger and embossed (brown fill + a gold drop-shadow,
   matching the two-tone numeral pixel-sampled from the comp — it isn't a
   flat single colour like the surrounding words). */
.joyk-opening__offer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
}
.joyk-opening__offer .joyk-ribbon {
  width: 32px;
  margin: 0;
  flex: none;
}
.joyk-opening__offer-text {
  font-size: var(--fs-20);
  font-weight: var(--fw-semibold);
  color: var(--joyk-accent);
}
/* Badged the same way as the date (tinted pill, not plain text) — the
   embossed text-shadow alone read as "bigger text", not "the headline
   number of this whole band", per feedback. */
.joyk-opening__offer-percent {
  display: inline-block;
  padding: var(--s-1) var(--s-4);
  font-size: var(--fs-40);
  font-weight: var(--fw-bold);
  color: var(--joyk-accent);
  text-shadow: 2px 2px 0 var(--joyk-gold);
  background: color-mix(in srgb, var(--joyk-gold) 14%, var(--surface));
  border-radius: var(--r-3);
}
.joyk-opening__social {
  display: flex;
  justify-content: center;
  gap: var(--s-6);
}
.joyk-opening__social a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  color: var(--joyk-accent);
  text-decoration: none;
}
.joyk-opening__social img {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ----- Desktop -----
   .joyk-page itself caps at 600px (see the page-frame rule up top) — nothing
   below needs its own width cap, only type/image scale-ups now that there's
   more room inside that fixed-width card. */
@media (min-width: 768px) {
  .joyk-hero__logo {
    top: var(--s-16);
    width: 320px;
  }
  .joyk-intro__cat {
    /* Pull the cat back over the end of "Kolkata," and sit it at the word's
       top — same ratios that work on mobile (~1.4x the cat's width of negative
       margin, lift ~0.8x the font size), scaled to the 5.5rem desktop headline.
       The old -16px / -82px left it floating detached to the upper right. */
    width: 100px;
    margin-left: -140px;
    transform: translateY(-70px) rotate(-10deg);
  }
  .joyk-ribbon {
    width: 72px;
  }
  /* No bigger token than --fs-56 exists sitewide — this hero headline is a
     one-off display size beyond that scale, so it's a literal value. */
  .joyk-intro__title {
    font-size: 5.5rem;
  }
  .joyk-explore__grid {
    max-width: 540px;
  }
  .joyk-explore__item {
    /* Fixed size on desktop too (the clamp's vw term would otherwise shrink the
       plates on a narrow-but-≥768 window); a touch larger than mobile. */
    width: 132px;
  }
  .joyk-opening__outlets {
    gap: 0 var(--s-8);
  }
  .joyk-opening__date {
    font-size: var(--fs-28);
    padding: var(--s-2) var(--s-6);
  }
}