/* ==========================================================================
   MEXTAPAS — Revamp Styles
   New sections introduced by the 2026 revamp.
   Loaded after styles.css + components.css. Consumes design-system tokens.
   ========================================================================== */

/* --- Atmospheric body background — subtle radial light + grain ----------- */
body {
  background:
    radial-gradient(ellipse at 12% -10%, rgba(244, 184, 48, 0.04), transparent 45%),
    radial-gradient(ellipse at 88% 110%, rgba(92, 64, 51, 0.10), transparent 55%),
    var(--color-black);
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}

main, .nav, .footer, section { position: relative; z-index: 1; }

/* --- Nav: external Shop link gets a subtle distinction ------------------- */
.nav__links a[href^="https://shop"],
.nav__mobile a[href^="https://shop"] {
  color: var(--color-gold);
}
.nav__links a[href^="https://shop"]::after {
  background-color: var(--color-gold-bright);
}

/* --- IMAGE PLACEHOLDER (visual stand-in until real photo is supplied) ----- */
.img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(244, 184, 48, 0.06) 0 12px,
      rgba(244, 184, 48, 0.02) 12px 24px),
    var(--color-black-soft);
  border: 1px dashed rgba(244, 184, 48, 0.45);
  color: var(--color-cream);
}

.img-placeholder__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.img-placeholder__caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-cream);
  opacity: 0.85;
  max-width: 22ch;
  margin: 0 0 var(--space-3);
}

.img-placeholder__dims {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: var(--color-cream);
  opacity: 0.55;
  letter-spacing: 0.05em;
}

/* --- THREE OPERATING PRINCIPLES STRIP ------------------------------------ */
.principles {
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-gray-light);
  border-bottom: 1px solid var(--color-gray-light);
  background:
    linear-gradient(180deg, rgba(244, 184, 48, 0.025), rgba(0, 0, 0, 0)) ,
    var(--color-black-soft);
}

.principles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: 1100px;
  margin: 0 auto;
}

.principles__item {
  position: relative;
  text-align: center;
}

.principles__item .section-number {
  display: block;
  margin: 0 0 var(--space-3);
  font-size: 1.6rem;
}

.principles__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-white);
  line-height: 1.25;
}

.principles__body {
  font-size: 0.95rem;
  color: var(--color-cream);
  opacity: 0.78;
  max-width: 32ch;
  line-height: 1.6;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .principles__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
  }
}

/* --- TAKE MEXTAPAS HOME BAND --------------------------------------------- */
.take-home {
  padding: var(--space-16) 0;
  background:
    linear-gradient(135deg, rgba(244, 184, 48, 0.08) 0%, transparent 50%),
    var(--color-black);
  border-bottom: 1px solid var(--color-gray-light);
}

.take-home__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.take-home__media {
  display: flex;
  justify-content: center;
  align-items: center;
}

.take-home__media img {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.take-home__content {
  padding: var(--space-2) 0;
}

.take-home__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-3);
}

.take-home__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

.take-home__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0;
}

.take-home__body {
  font-size: 1.05rem;
  color: var(--color-cream);
  opacity: 0.85;
  margin-bottom: var(--space-6);
  max-width: 50ch;
  line-height: 1.65;
}

.take-home__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.take-home__cta::after {
  content: '\2197';
  font-size: 1em;
  margin-left: 4px;
}

@media (min-width: 1024px) {
  .take-home__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
}

/* --- HERO: refined typography hooks for revamp --------------------------- */
.hero__label {
  margin-bottom: var(--space-xs);
}

.hero__title {
  letter-spacing: -0.03em;
  line-height: 1.05;
  /* Smaller cap so each forced <br> segment ("The UK's only mezcal", "supper club
     rooted in", "a real Mexican kitchen.") fits the ~512px left column without
     re-wrapping into 5-6 lines and overflowing the viewport. */
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: var(--space-sm);
}

.hero__subtitle {
  line-height: 1.5;
  margin-bottom: var(--space-sm);
  font-size: 0.95rem;
}

.hero__credential {
  margin-bottom: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
}

.hero__credential .hero__difford-stamp {
  width: 44px;
}

/* Desktop: top-align the text right under the nav (no extra gap), give the
   text column a bit more room, and keep the hero capped at one viewport so
   both CTAs stay above the fold. */
@media (min-width: 1024px) {
  .hero {
    min-height: auto;
    max-height: none;
  }

  .hero__inner {
    min-height: auto;
    grid-template-columns: 1fr 1.1fr;
  }

  .hero__content {
    justify-content: center;
    padding: var(--nav-height) var(--space-xl) var(--space-md);
  }

  .hero__image {
    padding-top: 0;
    padding-bottom: 0;
    align-items: flex-start;
  }
}

/* --- COOKIE CONSENT BANNER ----------------------------------------------- */
.consent {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 5000;
  background: var(--color-gray-900);
  border: 1px solid var(--color-gray-700);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 540px;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.consent.visible {
  transform: translateY(0);
  opacity: 1;
}
.consent[hidden] { display: none !important; }

.consent__text {
  font-size: 0.88rem;
  color: var(--color-cream);
  line-height: 1.55;
  margin: 0;
}
.consent__text a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 3px; }

.consent__buttons {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.consent__btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 10px 20px;
  border: 1px solid var(--color-gray-700);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.consent__btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.consent__btn--primary {
  background: var(--color-gold);
  color: var(--color-black);
  border-color: var(--color-gold);
}
.consent__btn--primary:hover {
  background: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
  color: var(--color-black);
}

@media (min-width: 640px) {
  .consent {
    bottom: var(--space-6);
    left: var(--space-6);
    right: auto;
  }
}

/* --- PACKAGE CARD: per-person price treatment ---------------------------- */
.card__price-band {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.5vw, 2.1rem);
  font-weight: var(--weight-extrabold);
  color: var(--color-gold);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.card__price-suffix {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-cream);
  opacity: 0.7;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 4px;
  display: inline-block;
}

/* --- Calendly embed wrapper (for events.html) --------------------------- */
.calendly-wrap {
  background: var(--color-gray-900);
  border-top: 2px solid var(--color-gold);
  padding: var(--space-12) 0;
  margin-top: var(--space-12);
}
.calendly-wrap .calendly-inline-widget {
  min-width: 320px;
  height: 720px;
  background: var(--color-gray-900);
}

/* --- Editorial pull-quote variant for hero serif tag --------------------- */
.hero__serif-tag {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gold);
  font-size: 1.1rem;
  margin-bottom: var(--space-3);
  display: block;
  letter-spacing: 0;
}

/* --- FOOTER NEWSLETTER BAND ---------------------------------------------
   Lives at the top of the footer, above the existing 4-column grid.
   Two-column layout on desktop (text left, Klaviyo form right). */
.footer__newsletter {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-10) 0 var(--space-12);
  margin-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-gray-light);
}
.footer__newsletter-content { max-width: 480px; }
.footer__newsletter-heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-white);
  margin-bottom: var(--space-2);
  line-height: 1.2;
}
.footer__newsletter-tagline {
  color: var(--color-cream);
  opacity: 0.78;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 44ch;
}
.footer__newsletter-form {
  width: 100%;
  min-height: 64px;
}
.footer__newsletter-form:empty::before {
  content: 'Loading\2026';
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-cream);
  opacity: 0.4;
  font-size: 0.95rem;
}
@media (min-width: 768px) {
  .footer__newsletter {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-12);
  }
}


/* --- KLAVIYO EMBED ON GOLD BAND -----------------------------------------
   Klaviyo injects its own DOM inside `.klaviyo-form-XXXXXX`. We can't easily
   restyle the form from outside (Klaviyo uses Shadow DOM in some templates),
   so we just give the wrapper sensible width and spacing on our gold section.
*/
.section--gold .klaviyo-form-Vnrbfu {
  max-width: 520px;
  margin: 0 auto;
  min-height: 60px;
}

/* When the Klaviyo form is still booting, the div is empty —
   show a subtle loading state so the section doesn't briefly look broken. */
.section--gold .klaviyo-form-Vnrbfu:empty::before {
  content: 'Loading\2026';
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-black);
  opacity: 0.5;
  font-size: 0.95rem;
}


/* --- RECIPES INDEX ------------------------------------------------------- */
.recipe-section + .recipe-section { margin-top: var(--space-16); }

.recipe-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--color-gray-800);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-10);
}
.recipe-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}
.recipe-section__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-gold);
  letter-spacing: 0;
}
.recipe-section__count {
  color: var(--color-cream);
  opacity: 0.5;
  font-size: 0.85rem;
  font-family: var(--font-serif);
  font-style: italic;
}

.recipe-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-gray-900);
  border: 1px solid var(--color-gray-800);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.recipe-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}
.recipe-card__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--color-gray-800), var(--color-black-soft));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.recipe-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.recipe-card:hover .recipe-card__media img {
  transform: scale(1.04);
}
.recipe-card__media-placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gray);
  text-align: center;
  padding: var(--space-4);
}
.recipe-card__body {
  padding: var(--space-6);
}
.recipe-card__kicker {
  font-size: 0.7rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}
.recipe-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-2);
  color: var(--color-white);
}
.recipe-card__meta {
  font-size: 0.85rem;
  color: var(--color-cream);
  opacity: 0.6;
}

/* --- INDIVIDUAL RECIPE PAGE --------------------------------------------- */
.recipe-hero {
  padding: calc(var(--nav-height) + var(--space-6)) 0 var(--space-12);
  text-align: center;
}
.recipe-hero__breadcrumb {
  font-size: 0.78rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}
.recipe-hero__breadcrumb a {
  color: var(--color-gold);
  text-decoration: none;
}
.recipe-hero__breadcrumb a:hover { color: var(--color-gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.recipe-hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 18ch;
  margin: 0 auto var(--space-4);
}
.recipe-hero__subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gold);
  font-size: 1.45rem;
  line-height: 1.45;
  max-width: 52ch;
  margin: 0 auto var(--space-6);
}
.recipe-hero__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--color-cream);
  opacity: 0.85;
}
.recipe-hero__meta div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.recipe-hero__meta strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-white);
  font-weight: var(--weight-semibold);
}
.recipe-hero__meta span {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
  color: var(--color-gold);
  font-weight: var(--weight-semibold);
}

.recipe-image {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto var(--space-16);
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-gray-800), var(--color-gray-900));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-gray-800);
}
.recipe-image img { width: 100%; height: 100%; object-fit: cover; }
.recipe-image__placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-gray);
  font-size: 1.1rem;
}

.recipe-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  max-width: 960px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .recipe-body { grid-template-columns: 1fr 1.6fr; gap: var(--space-16); }
}

.ingredients h2,
.method h2 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-6);
  font-weight: var(--weight-bold);
}
.ingredients h2::after,
.method h2::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-gold);
  margin-top: var(--space-2);
}
.ingredients ul {
  list-style: none;
  padding: 0;
}
.ingredients li {
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--color-gray-800);
  font-size: 1.15rem;
  color: var(--color-cream);
  line-height: 1.55;
}
.ingredients li:last-child { border-bottom: none; }
.ingredients .qty {
  color: var(--color-gold);
  font-weight: var(--weight-semibold);
  font-family: var(--font-serif);
  font-style: italic;
  margin-right: var(--space-2);
}

.method ol {
  list-style: none;
  counter-reset: step;
  padding: 0;
}
.method li {
  position: relative;
  padding-left: 60px;
  padding-bottom: var(--space-6);
  counter-increment: step;
  color: var(--color-cream);
  line-height: 1.7;
  font-size: 1.18rem;
}
.method li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--color-gold);
  font-weight: 500;
}

.founder-note {
  margin-top: var(--space-16);
  padding: var(--space-8);
  background: var(--color-gray-900);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-sm);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.founder-note__label {
  font-size: 0.7rem;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
  display: block;
}
.founder-note p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--color-cream);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

.recipe-ctas {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-gray-800);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   STORY — Recipes video (Doña Eva teaching Julio, vertical 9:16 loop)
   Sits in a .split layout, stacks on mobile (video on top, text below).
   ========================================================================== */
.split__video {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-black);
}

.recipes-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  .split__video {
    display: flex;
    justify-content: center;
    background: transparent;
    overflow: visible;
  }

  .recipes-video {
    width: auto;
    max-height: 640px;
    max-width: 100%;
  }
}

/* ==========================================================================
   STORY — Hero overlay (Canela building exterior at dusk, bright sky)
   Slightly darker gradient than the default .page-hero__bg::after so the
   heading reads cleanly against the bright sky portion of the photo.
   ========================================================================== */
/* Lighter overlay (~35-40% average) so the CANELA sign and building detail
   show through. A horizontal gradient keeps the left side a bit darker for
   headline contrast and the right side lighter where the sign sits. */
.page-hero--story .page-hero__bg::after {
  background: linear-gradient(to right,
      rgba(13, 13, 13, 0.55) 0%,
      rgba(13, 13, 13, 0.38) 50%,
      rgba(13, 13, 13, 0.22) 100%);
}

/* The CANELA sign sits ~35-40% from the top of the image. Anchor the
   crop on that band so the logo stays in view regardless of hero height. */
.page-hero--story .page-hero__bg img {
  object-position: center 38%;
}

/* Desktop and larger tablets: let the hero fill the full viewport so the
   photo crops less aggressively and the building is shown more completely.
   Pin the heading content to the left half so it does not collide with the
   gold CANELA sign on the right of the photo. */
@media (min-width: 768px) {
  .page-hero--story {
    min-height: 100vh;
    text-align: left;
  }

  .page-hero--story .container {
    max-width: 55%;
    margin-left: 0;
    margin-right: auto;
  }

  /* Override the global .page-hero p centering so the subtitle aligns left
     within the now left-pinned container. */
  .page-hero--story p {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Mobile: text returns to full-width centered (default .page-hero behaviour),
   and the image crop biases toward the right of the photo so the CANELA sign
   stays visible when the image is cropped horizontally to fit a narrow viewport. */
@media (max-width: 767px) {
  .page-hero--story .page-hero__bg img {
    object-position: 70% 38%;
  }
}