/* ---- hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-7) var(--space-6);
  /* The hero paints its own opaque gradient, which covered the page's grain and
     left the first thing anyone sees as the one flat panel on the site. The
     tile is layered on top of the gradients — first image listed wins — so the
     hero reads as the same paper as everything below it. */
  background-image:
    var(--paper-texture),
    radial-gradient(120% 90% at 85% 0%, rgba(238, 127, 45, 0.18), transparent 60%),
    linear-gradient(180deg, var(--color-surface-2), var(--color-bg));
  background-size: var(--paper-texture-size), auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  overflow: hidden;
}
.hero__inner { display: grid; gap: var(--space-6); align-items: center; }
.hero__bless {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.hero h1 { font-size: var(--fs-display); margin-bottom: var(--space-4); }
.hero__lead { font-size: var(--fs-lead); color: var(--color-muted); max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* Elegant geometric stand-in until real food photography exists (UI-02).
   Deliberately abstract — it must never read as a photo of a product. */
/* The ring shows on phones too. In the hero's grid it lands directly beneath
   the CTAs, which is exactly where the trust cards used to sit — so that strip
   is hidden at this width rather than the two stacking. */
.hero__art { display: block; position: relative; }
[data-trust-strip] { display: none; }
@media (min-width: 700px) { [data-trust-strip] { display: block; } }
.hero__stage {
  position: relative;
  display: block;
  width: min(400px, 78vw);
  aspect-ratio: 1;
  margin-inline: auto;
}
.hero__stage--bare { display: none; }
.hero-coin[hidden] ~ .hero__stage--bare { display: block; }

.hero__plate {
  position: absolute;
  /* sits just outside the photo, so the frame reads as a border rather than an
     overlay. The old ring was a conic gradient behind a circular mask, which
     only ever produced a circle — a rectangle needs a real dashed border. */
  inset: -14px;
  display: block;
  border: 3px dashed var(--brand-accent);
  border-radius: calc(var(--radius-xl) + 14px);
  opacity: 0.75;
}
.hero__stage--bare .hero__plate::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 35% 30%, var(--brand-primary-soft), var(--color-surface-2));
  box-shadow: var(--shadow-md);
  mask: none; -webkit-mask: none;
}

/* ---- brand story -------------------------------------------------------- */
.story__inner { display: grid; gap: var(--space-6); align-items: center; }
.story h2 { margin-block: var(--space-2) var(--space-4); }
.story p { color: var(--color-muted); margin-bottom: var(--space-3); max-width: 52ch; }
.story .btn { margin-top: var(--space-3); }
.story__art {
  min-height: 220px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 30% 30%, var(--brand-accent-soft), transparent 55%),
    linear-gradient(140deg, var(--brand-primary-soft), var(--color-surface-2));
  border: 1px solid var(--color-line);
}

/* ---- why grid ----------------------------------------------------------- */
.why-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.why-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.why-card__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--brand-accent);
  margin-bottom: var(--space-2);
}
.why-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.why-card p { font-size: var(--fs-sm); color: var(--color-muted); }

/* ---- steps -------------------------------------------------------------- */
.steps { display: grid; gap: var(--space-5); grid-template-columns: 1fr; counter-reset: s; }
.step { position: relative; padding-top: var(--space-4); border-top: 2px solid var(--color-line-strong); }
.step__n {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  margin-bottom: var(--space-3);
  background: var(--brand-primary);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  border-radius: 50%;
}
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--space-1); }
.step p { font-size: var(--fs-sm); color: var(--color-muted); }

/* ---- festival banner ---------------------------------------------------- */
.festival {
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: var(--color-on-primary);
  text-align: center;
}
.festival h2 { color: var(--color-on-primary); margin-block: var(--space-2) var(--space-3); }
.festival p { max-width: 52ch; margin-inline: auto; margin-bottom: var(--space-5); color: rgba(255, 253, 249, 0.86); }
.festival .section-head__eyebrow { color: var(--brand-accent); }

/* ---- locate ------------------------------------------------------------- */
.locate { display: grid; gap: var(--space-5); }
.locate__facts { display: grid; gap: var(--space-4); align-content: start; }
.locate__facts strong { display: block; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); margin-bottom: var(--space-1); }
.locate__facts p { font-size: var(--fs-sm); }
.locate__map {
  width: 100%;
  min-height: 280px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

/* ---- responsive --------------------------------------------------------- */
@media (min-width: 700px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .hero { padding-block: var(--space-9) var(--space-8); }
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; }
  .hero__art { display: block; }
  .story__inner { grid-template-columns: 1.1fr 0.9fr; }
  .story__art { min-height: 320px; }
  .locate { grid-template-columns: 1fr 1.3fr; align-items: start; }
}
@media (min-width: 1100px) {
  .why-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* ---- hero coin: today's specials, flipped inside the decorative ring ------
   The ring (.hero__plate) stays as the frame; this sits inside it. Only real
   catalogue photos ever appear here — home.js leaves it hidden otherwise. */
/* Normal flow: the ring stacks above, the caption sits below it — outside the
   circle, not crowded inside. The disc used to be sized as a % of a grid track
   that `place-content: center` had already shrunk to fit its contents, which is
   why the photo rendered as a thumbnail regardless of the width given. */
.hero-coin {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}
.hero-coin[hidden] { display: none; }
.hero-coin__link {
  position: absolute;
  inset: 0;
  perspective: 1000px;
  border-radius: var(--radius-xl);
}
.hero-coin__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(var(--turn, 0deg));
  transition: transform 760ms cubic-bezier(0.45, 0.05, 0.3, 1);
}
.hero-coin__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--color-surface);
}
.hero-coin__face--back { transform: rotateY(180deg); }
.hero-coin__face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-coin__cap {
  pointer-events: none;
  text-align: center;
  max-width: 20ch;
}
.hero-coin__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--color-text);
  line-height: var(--lh-devanagari);
}
.hero-coin__price {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
}
.hero-coin__link:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 8px; }

/* A spinning coin is decorative motion — remove it entirely when asked, and
   cross-fade instead so the rotation still communicates "there is more". */
@media (prefers-reduced-motion: reduce) {
  .hero-coin__inner { transition: none; }
}


/* ---- phone hero: centred ------------------------------------------------
   On a narrow column the left-aligned invocation, headline and lead read as
   drifting off to one side with the ring centred beneath them. Centred only
   here; the desktop two-column hero stays left-aligned against its artwork. */
@media (max-width: 699.98px) {
  .hero__copy { text-align: center; }
  .hero__lead { margin-inline: auto; }
  .hero__cta { justify-content: center; margin-top: var(--space-5); }
  /* the stacked hero was running on a desktop-sized rhythm; tighten it so the
     ring, its caption and the section below sit on one consistent scale */
  .hero { padding-block: var(--space-5) var(--space-5); }
  .hero__inner { gap: var(--space-4); }
  .hero-coin { gap: var(--space-3); }
  .hero-coin__cap { max-width: 30ch; }
}