/* Latirra × Estrella Damm — Eat Spain Drink Spain Thailand 2026.
   Shared by the campaign's two pages, aperitivo-espanol.html and
   movies-under-the-stars.html. Everything structural (nav, .page-hero,
   .azulejo, .grid-2/-3, .card, .form, .band-dark, .band-terra, .footer) comes
   from /styles.css; this file only adds what the campaign needs and nothing
   else on the site loads it. Both pages lift out together after 4 October.

   Same posture as espana-campeones.css: Spanish national colours and Spanish
   language only. Estrella Damm and ICEX are named as partners in body copy —
   no sponsor logos, marks or lockups are reproduced here. */

/* ── Thai pairing ─────────────────────────────────────────────────────────
   Albert Sans carries no Thai glyphs, so Thai runs would fall back to an
   arbitrary system face. Name a Thai stack explicitly via :lang() — no extra
   webfont request, just a better fallback order. Identical to the rule in
   espana-campeones.css; duplicated rather than hoisted into styles.css so
   each campaign's stylesheet stays self-contained and removable. */
:lang(th){
  font-family:"Noto Sans Thai","Leelawadee UI","Sarabun","Thonburi",var(--sans);
  line-height:1.62;                 /* Thai needs more leading for its ascenders/descenders */
}
.th{display:block;margin-top:10px}
section .th,.page-hero .th{font-size:15px;opacity:.9}
/* Thai has no inter-word spaces, so a narrow measure lets the browser break
   inside a word. Give Thai lines their natural width instead. */
.page-hero .th,.esds-facts .th,.esds-note .th{max-width:none}

/* ── Hero ─────────────────────────────────────────────────────────────────
   Full-bleed photo behind a forest scrim. .page-hero carries a ridgeline
   ::after that reads as noise over a photograph, so both pages opt out. */
.esds-hero{
  position:relative;overflow:hidden;padding:96px 0 84px;text-align:center;
  display:flex;align-items:center;min-height:min(66vh,560px);
}
.esds-hero>.wrap{position:relative;z-index:2;width:100%}
.esds-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.esds-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(11,26,17,.86) 0%, rgba(11,26,17,.58) 46%, rgba(11,26,17,.92) 100%);
}
.esds-hero::after{display:none}
.esds-hero h1{font-size:clamp(40px,6.6vw,76px);margin:.12em 0 .18em}
.esds-hero p{max-width:50ch;margin:0 auto;color:#efe0cf;text-wrap:balance}

/* Campaign eyebrow + flag chip. Qualified with .esds-hero so it outranks
   `.esds-hero p` rather than tying with it.
   .page-hero .eyebrow is Sand (#DDBFA7), tuned for a flat Forest ground; over
   a photograph it falls short of AA, so this flips to Cream. */
.esds-hero .esds-flag{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  max-width:none;color:var(--cream);
}
.flag-es{
  display:inline-block;width:26px;height:17px;border-radius:2px;flex:none;
  /* Spain: 1:2:1 horizontal bands, official red #AA151B / yellow #F1BF00 */
  background:linear-gradient(to bottom,
    #AA151B 0 25%, #F1BF00 25% 75%, #AA151B 75% 100%);
  box-shadow:0 0 0 1px rgba(248,227,210,.35);
}

/* ── Key-facts strip (dates, price, capacity) ─────────────────────────────
   Same construction as espana-campeones' .promo-terms: a hairline grid built
   from a 1px background showing through the gaps. */
.esds-facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin:34px 0 26px;text-align:left;
  background:#2b4636;border:1px solid #2b4636;border-radius:10px;overflow:hidden;
}
.esds-facts>div{background:var(--forest);padding:20px 18px}
.esds-facts dt{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--sand);margin-bottom:8px}
.esds-facts dd{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--cream)}
.esds-facts dd .th{font-family:inherit;font-size:14px;color:#c9bba7;margin-top:6px}

.esds-h2{font-size:clamp(27px,3.9vw,44px);margin-bottom:14px}
.esds-note{max-width:60ch;font-size:15px;color:var(--muted);text-wrap:pretty}
.band-dark .esds-note{color:#e3d4c1}

/* ── Running order ────────────────────────────────────────────────────────
   An ordered list of programme blocks. Deliberately NOT a timetable: the
   published run-of-show is the proposal's, its per-block clock times do not
   reconcile against the runtimes, and a public page must not print a start
   time a guest could hold us to. Sequence + runtime is what we can stand
   behind, so that is what this renders. */
.esds-order{list-style:none;counter-reset:esds;border-top:1px solid var(--line)}
.esds-order li{
  display:grid;grid-template-columns:auto 1fr auto;gap:6px 22px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.esds-order li::before{
  counter-increment:esds;content:counter(esds);
  font-family:var(--serif);font-size:15px;color:var(--salmon-deep);
  border:1px solid var(--line);border-radius:50%;
  width:32px;height:32px;display:grid;place-items:center;align-self:start;
}
.esds-order .h{font-family:var(--serif);font-size:22px;line-height:1.25}
.esds-order .d{grid-column:2;color:var(--muted);font-size:14.5px;margin-top:4px}
.esds-order .r{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;align-self:start;padding-top:6px;
}

/* ── Aperitivo list ───────────────────────────────────────────────────────
   Reuses the menu-page rhythm (.mlist/.mrow) but as its own grouped block so
   the campaign page does not have to import menu.html's markup wholesale. */
.esds-group{margin-top:44px}
.esds-group h3{font-size:clamp(22px,2.8vw,30px)}
.esds-group .k{color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.esds-list{border-top:1px solid var(--line);margin-top:16px}
.esds-list .row{
  display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.esds-list .nm{font-family:var(--serif);font-size:20px}
.esds-list .pr{font-family:var(--serif);font-size:18px;color:var(--salmon-deep);white-space:nowrap}

@media(max-width:840px){
  .esds-hero{padding:72px 0 64px}
  .esds-facts{grid-template-columns:repeat(2,1fr)}
  .esds-order li{grid-template-columns:auto 1fr;gap:4px 16px}
  .esds-order .r{grid-column:2;padding-top:2px}
}
@media(max-width:480px){
  .esds-facts{grid-template-columns:1fr}
}