/* ==========================================================================
   Ezilda — the cocktail section: /cocktails and /cocktails/<recipe>.
   Loaded after main.css and pages.css (tokens, fonts, header, buttons, gate, footer).
   Built by tools/build_cocktails.py; each liqueur sets --band-bg and --band-accent,
   each cocktail --card-bg and --card-ink.
   ========================================================================== */

/* Introduction of the cocktail page */
.cx-intro { padding: calc(var(--header-h) + clamp(44px, 8vh, 100px)) 0 clamp(40px, 7vh, 80px); }
.cx-intro h1 { max-width: 13ch; }
.cx-intro .lede { margin-top: clamp(20px, 3.5vh, 34px); max-width: 58ch; }
.cx-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 4vh, 40px); }
.cx-jump a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px; border: 1px solid var(--line-dark); border-radius: 99px;
  font: 500 .72rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.cx-jump a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dot); }
.cx-jump a:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* One band per liqueur: its bottle and text on the left, its four cocktails as tall coloured panels on the right. */
.cx-band { background: var(--band-bg); padding-block: clamp(56px, 10vh, 120px); scroll-margin-top: 24px; }
.cx-band-in { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.cx-band-in > * { min-width: 0; }
@media (min-width: 1000px) { .cx-band-in { grid-template-columns: minmax(230px, 1fr) minmax(0, 3.6fr); } }
/* Cocktail page: the bottle stands tall beside the liqueur's text, as high as the text block. */
@media (min-width: 1000px) { .cx-band-in.is-hub { grid-template-columns: minmax(380px, 1.35fr) minmax(0, 3fr); } }
.cx-band-copy { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px clamp(18px, 2.2vw, 30px); align-items: center; }
.cx-band-copy > :not(.cx-band-bottle) { grid-column: 2; }
/* Compatibility anchors must not add grid rows or alter the bottle's placement. */
.cx-band-copy > span[aria-hidden="true"] { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; }
.cx-band-copy .cx-price { color: var(--text-dark); font: 400 .95rem/1.5 var(--sans); letter-spacing: .08em; }
.cx-price span { margin-inline: .4em; color: var(--band-accent); }
.cx-band-bottle {
  grid-column: 1; grid-row: 1 / span 6; align-self: center;
  width: auto; max-width: none; height: clamp(250px, 30vw, 450px); object-fit: contain;
  filter: drop-shadow(0 22px 20px rgba(40, 28, 12, .26));
}
.cx-band-copy .eyebrow { margin: 0; }
.cx-band-copy h2 { font: 300 clamp(2.1rem, 3.3vw, 3.2rem)/1 var(--serif); letter-spacing: -.01em; text-transform: uppercase; }
.cx-band-copy h2 em { display: block; font-style: italic; text-transform: none; color: var(--band-accent); }
.cx-band-copy p { color: var(--muted-dark); font-weight: 300; max-width: 40ch; }
.cx-band-copy .btn { justify-self: start; min-height: 46px; padding: .9em 1.6em; border-color: var(--text-dark); color: var(--text-dark); }
.cx-band-copy .btn:hover { background: var(--text-dark); color: var(--ivory); }

/* The panels: a row on a computer, a swipeable strip on a phone. */
.cx-row { --cx-gap: clamp(14px, 1.6vw, 24px); display: grid; gap: var(--cx-gap); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cx-row::-webkit-scrollbar { display: none; }
@media (max-width: 999px) { .cx-row { grid-auto-columns: min(62vw, 250px); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } }
.cx-swipe { display: none; margin-top: 14px; font: 500 .68rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted-dark); }
@media (max-width: 999px) { .cx-swipe { display: block; } }

/* Each cocktail sits in an arched niche carved in the wall of the background picture, faintly tinted with its colour;
   its name is set below, like a museum label. */
.cx-card { display: grid; gap: 14px; align-content: start; color: var(--text-dark); scroll-snap-align: start; }
.cx-niche {
  position: relative; display: block; aspect-ratio: 3 / 4.1; overflow: hidden; isolation: isolate;
  border-radius: 50% 50% 6px 6px / 36.6% 36.6% 6px 6px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(255, 255, 255, .45), transparent 70%),
    color-mix(in srgb, var(--card-bg) 12%, rgba(252, 248, 241, .78));
  box-shadow: inset 0 22px 34px -20px rgba(70, 48, 26, .42), inset 0 -10px 18px -14px rgba(70, 48, 26, .18), 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cx-niche::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 6%; z-index: 0; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(70, 48, 26, .22), transparent 70%); }
.cx-card img {
  position: absolute; z-index: 1; left: 50%; bottom: 1%; width: 108%; max-width: none; height: auto; translate: -50% 0;
  filter: drop-shadow(0 12px 12px rgba(60, 40, 20, .2));
  transform-origin: 50% 100%; transition: translate .7s var(--ease), scale .7s var(--ease);
}
.cx-card:hover img, .cx-card:focus-visible img { translate: -50% -2%; scale: 1.03; }
.cx-card h3 { padding-inline: 2px; font: 400 clamp(1.15rem, 1.45vw, 1.45rem)/1.1 var(--serif); letter-spacing: .03em; text-transform: uppercase; }
.cx-card h3::before { content: ""; display: block; width: 22px; height: 2px; margin-bottom: 10px; background: var(--card-bg); }
.cx-card small { display: block; margin-top: 7px; font: 500 .62rem/1.4 var(--sans); letter-spacing: .2em; color: var(--muted-dark); }
.cx-card:focus-visible { outline-offset: 4px; }
/* Until its picture exists, a panel stays a plain colour with its title. */
.cx-card img[hidden], .cx-hero-media img[hidden] { display: none; }

/* Serving basics */
.cx-basics { display: grid; gap: clamp(20px, 3vw, 40px); padding-block: clamp(56px, 10vh, 120px); }
@media (min-width: 900px) { .cx-basics { grid-template-columns: repeat(3, 1fr); } }
.cx-basics h2 { grid-column: 1 / -1; font: 300 clamp(2rem, 3.6vw, 3.1rem)/1.05 var(--serif); }
.cx-basics h2 em { font-style: italic; color: var(--gold-deep); }
.cx-basics article { border-top: 1px solid var(--text-dark); padding-top: 18px; }
.cx-basics h3 { font: 400 1.5rem/1.15 var(--serif); margin-bottom: 10px; }
.cx-basics p { color: var(--muted-dark); font-weight: 300; }

/* ---------- Recipe page ---------- */
.cx-hero { display: grid; padding-top: var(--header-h); background: var(--ivory); }
/* The hero starts under the menu, so the menu always sits on the ivory page and never on a dark panel. */
@media (min-width: 900px) { .cx-hero { grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; } }
.cx-hero-media { position: relative; overflow: hidden; min-height: min(118vw, 620px); background: var(--band-bg) var(--band-img, none) 50% 50% / cover no-repeat; }
@media (max-width: 899px) { .cx-hero-media { background-image: var(--band-img-m, var(--band-img, none)); } }
@media (min-width: 900px) { .cx-hero-media { min-height: 0; } }
.cx-hero-media img { position: absolute; left: 50%; bottom: 4%; height: 84%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 18px 18px rgba(60, 40, 20, .24)); }
.cx-hero-copy { display: grid; align-content: center; gap: 0; padding: clamp(36px, 6vw, 96px) var(--gutter); }
.cx-hero-copy .crumbs { margin-bottom: 26px; }
.cx-hero-copy h1 { font: 300 clamp(2.7rem, 5vw, 4.8rem)/.98 var(--serif); letter-spacing: -.02em; }
.cx-hero-copy .lede { margin-top: 22px; max-width: 46ch; }
.cx-facts { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--text-dark); }
@media (min-width: 560px) { .cx-facts { grid-template-columns: repeat(4, 1fr); } }
.cx-facts div { display: grid; gap: 4px; padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line-dark); }
.cx-facts dt { font: 500 .66rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.cx-facts dd { margin: 0; font: 400 1.2rem/1.25 var(--serif); }

.cx-body { display: grid; gap: clamp(36px, 6vw, 80px); padding-block: clamp(56px, 10vh, 110px); align-items: start; }
@media (min-width: 900px) { .cx-body { grid-template-columns: minmax(300px, 1fr) 1.45fr; } }
.cx-ingredients { border: 1px solid var(--line-dark); border-radius: 4px; padding: clamp(22px, 3vw, 34px); background: rgba(255, 255, 255, .45); }
@media (min-width: 900px) { .cx-ingredients { position: sticky; top: 24px; } }
.cx-ingredients h2, .cx-method h2 { font: 300 clamp(1.8rem, 2.6vw, 2.4rem)/1.05 var(--serif); margin-bottom: 16px; }
.cx-ingredients ul { border-top: 1px solid var(--line-dark); }
.cx-ingredients li { display: grid; grid-template-columns: 5.2em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); font-weight: 300; }
.cx-ingredients li b { font: 500 1.05rem/1.4 var(--serif); color: var(--gold-deep); }
.cx-copy {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px;
  border: 1px solid var(--text-dark); border-radius: 2px; background: transparent;
  font: 500 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.cx-copy:hover { background: var(--text-dark); color: var(--ivory); }
.cx-copy[data-done] { border-color: var(--gold-deep); color: var(--gold-deep); background: transparent; }
.cx-method ol { counter-reset: step; display: grid; gap: 4px; }
.cx-method li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-dark); font-weight: 300; }
.cx-method li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--gold); border-radius: 50%; font: 400 1.1rem/1 var(--serif); color: var(--gold-deep); }
.cx-tip { margin-top: 30px; padding: 4px 0 4px 20px; border-left: 2px solid var(--gold); }
.cx-tip strong { display: block; margin-bottom: 6px; font: 500 .7rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-deep); }
.cx-tip p { color: var(--muted-dark); font-weight: 300; }

.cx-product { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: clamp(36px, 5vh, 56px); padding: clamp(20px, 3vw, 36px); background: var(--band-bg); border-radius: 4px; }
.cx-product img { width: clamp(70px, 9vw, 120px); height: auto; filter: drop-shadow(0 14px 14px rgba(40, 28, 12, .2)); }
.cx-product h3 { font: 300 clamp(1.6rem, 2.4vw, 2.2rem)/1.05 var(--serif); margin-bottom: 10px; }
.cx-product h3 em { font-style: italic; color: var(--band-accent); }
.cx-product p { color: var(--muted-dark); font-weight: 300; max-width: 52ch; }
.cx-product a { display: inline-block; margin-top: 14px; font: 500 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--gold); }
.cx-product a:hover { color: var(--gold-deep); }

.cx-related { padding-block: clamp(48px, 8vh, 100px); border-top: 1px solid var(--line-dark); }
.cx-related h2 { font: 500 .75rem/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 24px; }
.cx-related .cx-row { grid-auto-columns: minmax(0, 250px); }
@media (max-width: 999px) { .cx-related .cx-row { grid-auto-columns: min(62vw, 250px); } }
.cx-all { display: inline-block; margin-top: 24px; font: 500 .72rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--gold); }

@media (prefers-reduced-motion: reduce) { .cx-card img { transition: none; } .cx-card:hover img { translate: -50% 0; scale: 1; } }

@media (min-width: 1000px) {
  .cx-intro { display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 8%; align-items: end; }
  .cx-intro .crumbs, .cx-intro .eyebrow { grid-column: 1 / -1; }
  .cx-intro h1 { grid-column: 1; grid-row: 3 / span 2; font-size: clamp(3.6rem, 5.6vw, 6rem); }
  .cx-intro .lede { grid-column: 2; margin-top: 0; }
  .cx-jump { grid-column: 2; margin-top: 24px; gap: 8px; }
  .cx-jump a { font-size: .6rem; letter-spacing: .1em; padding: 10px 12px; }
}

/* ---------- The cocktails inside the existing pages ---------- */

/* Home page, after the three bottles: the twelve cocktails in one rail (St-Germain's « Classiques ou réinterprétés » row). */
.cx-home { background: var(--paper); color: var(--text-dark); padding-block: clamp(64px, 12vh, 140px); overflow: hidden; }
.cx-home-in { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.cx-home-in > * { min-width: 0; }
@media (min-width: 1000px) { .cx-home-in { grid-template-columns: minmax(250px, 1fr) minmax(0, 3.2fr); } }
.cx-home-copy { display: grid; gap: 20px; justify-items: start; }
.cx-home-copy .eyebrow { margin: 0; }
.cx-home-title { font: 300 clamp(2.4rem, 4.2vw, 4.2rem)/.98 var(--serif); letter-spacing: -.02em; }
.cx-home-title em { display: block; font-style: italic; color: var(--gold-deep); }
.cx-home-copy p { color: var(--muted-dark); font-weight: 300; max-width: 38ch; }
.cx-arrows { display: none; gap: 10px; }
@media (min-width: 1000px) { .cx-arrows { display: flex; } }
.cx-arrows button {
  display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--text-dark); border-radius: 50%;
  background: transparent; color: var(--text-dark); transition: background-color .4s var(--ease), color .4s var(--ease), opacity .4s;
}
.cx-arrows button:hover:not(:disabled) { background: var(--text-dark); color: var(--ivory); }
.cx-arrows button:disabled { opacity: .3; cursor: default; }
.cx-arrows svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* A rail shows four cards at a time on a computer and scrolls sideways; on a phone it is the usual swipe strip. */
.cx-row.is-rail { grid-auto-columns: calc((100% - 3 * var(--cx-gap)) / 4); scroll-behavior: smooth; }
@media (max-width: 999px) { .cx-row.is-rail { grid-auto-columns: min(62vw, 250px); } }
@media (prefers-reduced-motion: reduce) { .cx-row.is-rail { scroll-behavior: auto; } }
.cx-rail-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.cx-rail-foot .cx-swipe { margin: 0; }
.cx-rail-foot .cx-all { margin: 0; }

/* Liqueurs page: each liqueur is a band, its bottle and text on the left, its four cocktails on the right. */
.cx-band-copy.is-liqueur { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
.cx-band-copy.is-liqueur > * { grid-column: 1; }
.cx-band-copy.is-liqueur .recipe-visual {
  width: min(100%, 280px); aspect-ratio: 3 / 4.1;
  border-radius: 50% 50% 6px 6px / 36.6% 36.6% 6px 6px;
  background: color-mix(in srgb, var(--band-accent) 10%, rgba(251, 247, 240, .74));
  box-shadow: inset 0 22px 34px -20px rgba(70, 48, 26, .42), inset 0 -10px 18px -14px rgba(70, 48, 26, .18), 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
@media (max-width: 999px) { .cx-band-copy.is-liqueur .recipe-visual { width: min(70%, 260px); } }
.cx-band-copy.is-liqueur h2 { text-transform: none; }
.cx-row-title { margin-bottom: 14px; font: 500 .72rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); }

/* Background pictures of the cocktail bands (tools/build_cocktails.py sets --band-img and --band-img-m).
   A missing picture leaves the plain colour. */
.cx-band, .cx-home { background-image: var(--band-img, none); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
@media (max-width: 999px) {
  .cx-band, .cx-home {
    /* Keep the copy legible when cover brings foliage shadows behind it. */
    background-image: linear-gradient(180deg, rgba(255, 250, 244, .7), rgba(255, 250, 244, .55) 42%, rgba(255, 250, 244, 0) 72%), var(--band-img-m, var(--band-img, none));
    background-position: 50% 0;
  }
}