/* ==========================================================================
   MTK125. Gálavacsora — microsite
   Ported from Figma: ag6kLnXfVGSoW4ZzE6sKZI, node 1:186 (1920px canvas).

   Layout model
   ------------
   The design has no mobile artboard, so the desktop values below are the Figma
   pixel values verbatim and the two breakpoints step them down.
   Three centred columns come straight out of the design:
     960px  content   (program table, venue) — Figma x=480..1440
    1450px  gallery   (3x450 slides + 2x50 gaps) — Figma x=235..1685
    1340px  footer    (rule + legal text) — Figma x=290..1630

   Background
   ----------
   Figma bakes the hero artwork and the whole-page gradient into ONE 1920x3325
   PNG, so it is applied to <html> at `100% auto` — the artwork then scales with
   the viewport exactly as designed, and the flat colour it ends on
   (--bg-deep, sampled at y>=2350) continues to the bottom of any page height.
   Below 861px that image would shrink the artwork to nothing, so a tighter crop
   (assets/hero-mobile.jpg) takes over and a CSS gradient replaces the rest.
   ========================================================================== */

/* --------------------------------------------------------------- fonts --- */
/* Self-hosted (no Google Fonts hotlink = no GDPR question). Roboto v51 ships
   as a variable font, so one file per subset covers both 400 and 600.
   latin-ext is NOT optional here: ő and ű ("Köszöntők", "Műhelyház") live only
   in that subset, and without it they fall back mid-word. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/roboto-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- tokens --- */
:root {
  /* Figma colour tokens */
  --gold: #bcad86;
  --gold-dim: #8d7b4c;
  --btn-label: #283d4f;
  --footer-bg: #090d18;
  --rule: #dadad9;
  /* sampled from the background export: the flat colour it settles on */
  --bg-deep: #3c5a6b;
  /* measured on the encoded hero-mobile.jpg bottom row (spread 3.5/255), so the
     gradient below it starts on exactly the colour the image ends on */
  --bg-seam: #1b242c;

  --radius-pill: 32px;

  /* columns */
  --content-w: 960px;
  --gallery-w: 1450px;
  --footer-w: 1340px;
  --gutter: 24px;

  /* type — Figma values (>=1025px) */
  --fs-title: 64px;
  --fs-date: 32px;
  --fs-lead: 28px;
  --lh-lead: 40px;
  --fs-h2: 32px;
  --fs-row: 24px;
  --lh-row: 34px;
  --fs-venue-title: 32px;
  --fs-venue: 28px;
  --lh-venue: 45px;
  --fs-btn: 24px;
  --btn-w: 241px;
  --sticky-bottom: 24px;
  --fs-legal: 16px;
  --lh-legal: 24px;

  /* vertical rhythm — derived from the Figma y-coordinates */
  /* title top y=933 on the Figma canvas, minus the 2px hairline trimmed off the
     top of the export, over the trimmed width: 931 / 1916 */
  --art-offset: 48.591%;
  --gap-title-date: 10px;
  --gap-date-cta: 80px;
  --gap-cta-program: 102px;
  --gap-program-table: 11px;
  --gap-row: 15px;
  --row-h: 82px;
  --row-h-first: 100px;
  --row-pad-x: 40px;
  --gap-table-venue: 65px;
  --gap-venue-cta: 83px;
  --gap-cta-gallery: 83px;
  --gap-gallery-footer: 64px;
  --footer-pt: 70px;
  --footer-rule-gap: 21px;
  --footer-pb: 190px;

  /* gallery */
  --slide-gap: 50px;
  --slides-visible: 3;
  --arrow-size: 94px;
  --arrow-offset: 25px;
}

/* ---------------------------------------------------------------- reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  background-color: var(--bg-deep);
  background-image: url('../assets/bg-desktop.jpg');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

body {
  margin: 0;
  font-family: 'Roboto', Arial, Helvetica, sans-serif;
  font-weight: 600;
  color: var(--gold);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
p,
dd,
dl {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* ------------------------------------------------------------- utilities --- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(a, button, .gallery__track):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.btn:focus-visible {
  outline-color: var(--btn-label);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- layout --- */
.content,
.intro,
.program,
.venue,
.cta--center,
.footer__inner {
  width: min(var(--content-w), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* ------------------------------------------------------------------ intro --- */
/* `--art-offset` is a percentage of the page width, exactly like the background
   image's own scaling, so the title keeps its designed distance from the podium
   at every viewport width. */
.intro {
  padding-top: var(--art-offset);
  text-align: center;
}

.intro__title {
  font-size: var(--fs-title);
  line-height: 1;
  font-weight: 600;
}

.intro__date {
  margin-top: var(--gap-title-date);
  color: var(--gold-dim);
  font-size: var(--fs-date);
  line-height: 1;
}

/* -------------------------------------------------------------------- cta --- */
/* 241x64 in Figma: the Button Primary component has a fixed width, with the
   134px label centred inside it — so this is a min-width, not hug-to-content. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: min(var(--btn-w), 100%);
  padding: 20px 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--btn-label);
  font: inherit;
  font-size: var(--fs-btn);
  line-height: 1;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.btn:hover {
  filter: brightness(1.07);
}
.btn:active {
  filter: brightness(0.95);
}

.cta__text {
  max-width: min(766px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* Faithful to Figma: the paragraph is centred on the page while the button sits
   in the right gutter (design x=1513..1754, i.e. 166px from the right edge).
   `clamp` keeps it off the viewport edge as the window narrows; below 1360px the
   two would collide, so the layout stacks (see the breakpoint further down). */
.cta--offset {
  position: relative;
  margin-top: var(--gap-date-cta);
  text-align: center;
}
.cta--offset .cta__btn {
  position: absolute;
  top: 8px;
  /* 166px is the design's right gutter (button right edge at x=1754 of 1920) */
  right: clamp(var(--gutter), calc(50% - 794px), 166px);
}

/* Sticky CTA (desktop only).
   The same element — not a duplicate — is fixed in the bottom right corner from
   the first paint, so it overlaps the hero artwork and the registration link is
   above the fold at any viewport height; its designed position is ~890px down
   the page, which a 13" laptop never shows without scrolling. It rides along
   from there through the programme and the venue block, then steps aside for
   the second, in-page Regisztráció button (see js/main.js for the hand-over).
   `right` is unchanged: on a fixed element the 50% simply resolves against the
   viewport instead. `top` has to be reset: with the base rule's `top: 8px` still
   in force, a `bottom` next to it would over-constrain the auto height and
   stretch the button down the whole viewport. */
@media (min-width: 1025px) {
  .cta--offset .cta__btn.is-pinned {
    position: fixed;
    top: auto;
    bottom: var(--sticky-bottom);
    z-index: 20;
    box-shadow: 0 6px 24px rgb(0 0 0 / 0.45);
    animation: cta-pin-in 0.22s ease-out;
  }
}

@keyframes cta-pin-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

.cta--center {
  margin-top: var(--gap-venue-cta);
  text-align: center;
}

/* ---------------------------------------------------------------- program --- */
.section-title {
  font-size: var(--fs-h2);
  line-height: 1;
  font-weight: 600;
  text-align: center;
}

.program {
  margin-top: var(--gap-cta-program);
}

.program__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-row);
  margin-top: var(--gap-program-table);
  font-size: var(--fs-row);
  line-height: var(--lh-row);
}

/* 656 label + 64 gap + 200 time + 40 inset = the 960 column */
.program__row {
  display: grid;
  grid-template-columns: 656fr 200fr;
  column-gap: 64px;
  align-items: center;
  min-height: var(--row-h);
  padding-right: var(--row-pad-x);
  border-bottom: 1px solid var(--rule);
}
.program__row:first-child {
  min-height: var(--row-h-first);
}

/* No `hyphens: auto` on purpose: it splits "KÖSZÖN-TŐK" even when the line can
   break at a space, and no single label word is wider than the column anyway. */
.program__row dt {
  min-width: 0;
  text-transform: uppercase;
}

.program__row dd {
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ venue --- */
/* 472 map + 43 gap + 445 text = the 960 column */
.venue {
  display: grid;
  grid-template-columns: 472fr 445fr;
  gap: 43px;
  align-items: center;
  margin-top: var(--gap-table-venue);
}

/* Leaflet needs a sized box before it initialises; the design's 472x278 as an
   aspect-ratio gives it one at layout time, so the map never boots into a
   zero-height container and there is no shift when the tiles arrive. */
.venue__map {
  width: 100%;
  aspect-ratio: 472 / 278;
  border-radius: 2px;
  overflow: hidden;
  background: rgb(0 0 0 / 0.2);
}

.venue__map .leaflet-container {
  font-family: inherit;
  background: rgb(0 0 0 / 0.2);
}

/* Zoom buttons in the brand's gold-brown. Kept on a light chip rather than
   gold-on-white, which would only reach ~1.9:1. */
.venue__map .leaflet-control-zoom {
  border: 0;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
}
.venue__map .leaflet-control-zoom a {
  background: #fff;
  color: var(--gold-dim);
  border-bottom-color: rgb(188 173 134 / 0.45);
}
.venue__map .leaflet-control-zoom a:hover,
.venue__map .leaflet-control-zoom a:focus {
  background: #fff;
  color: var(--btn-label);
}
.venue__map .leaflet-control-zoom a.leaflet-disabled {
  background: #fff;
  color: rgb(141 123 76 / 0.35);
}

/* Marker: inline SVG via L.divIcon, so its colours come from the tokens here
   instead of a baked-in PNG. */
.venue-pin svg {
  display: block;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35));
}
.venue-pin__body {
  fill: var(--gold);
  stroke: var(--footer-bg);
  stroke-width: 1.5;
}
.venue-pin__dot {
  fill: var(--footer-bg);
}

/* Marker popup: venue name + directions link.
   The extra right margin keeps the text clear of the close button. */
.venue__map .leaflet-popup-content {
  margin: 14px 34px 14px 16px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gold-dim);
}
/* `a.` is needed to outweigh Leaflet's `.leaflet-container a.leaflet-popup-close-button` */
.venue__map a.leaflet-popup-close-button {
  top: 6px;
  right: 6px;
  padding: 0;
  width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 20px;
  color: var(--gold-dim);
}
.venue__map a.leaflet-popup-close-button:hover,
.venue__map a.leaflet-popup-close-button:focus {
  color: var(--btn-label);
}
/* Scoped to .venue__map so it outweighs Leaflet's own `.leaflet-container a`.
   Blue reads as a link against the gold-brown popup text; #0078a8 clears 4.9:1
   on the popup's white. */
.venue__map .venue-pin__directions {
  display: block;
  margin-top: 6px;
  color: #0078a8;
  font-weight: 600;
  text-decoration: underline;
}
.venue__map .venue-pin__directions:hover,
.venue__map .venue-pin__directions:focus {
  color: #005a80;
}

/* Map data credit, moved out of the map's corner (see index.html) */
.venue__credit {
  display: none;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  text-align: left;
  opacity: 0.65;
}
.venue__credit a {
  text-decoration: none;
}
.venue__credit a:hover {
  text-decoration: underline;
}

.venue__title {
  font-size: var(--fs-venue-title);
  line-height: var(--lh-venue);
  text-align: left;
}

.venue__address {
  font-size: var(--fs-venue);
  line-height: var(--lh-venue);
}

/* ---------------------------------------------------------------- gallery --- */
.gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--arrow-offset);
  margin-top: var(--gap-cta-gallery);
  width: min(
    calc(var(--gallery-w) + 2 * (var(--arrow-size) + var(--arrow-offset))),
    100% - 2 * var(--gutter)
  );
  margin-inline: auto;
}

.gallery__track {
  display: flex;
  gap: var(--slide-gap);
  flex: 0 1 var(--gallery-w);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__slide {
  flex: 0 0
    calc(
      (100% - (var(--slides-visible) - 1) * var(--slide-gap)) /
        var(--slides-visible)
    );
  scroll-snap-align: start;
  background: var(--gold);
}
.gallery__slide img {
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
}

.gallery__arrow {
  flex: 0 0 auto;
  width: var(--arrow-size);
  height: var(--arrow-size);
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.gallery__arrow:hover:not(:disabled) {
  opacity: 0.75;
}
.gallery__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.gallery__arrow--next {
  scale: -1 1;
}
.gallery__caret {
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------------- footer --- */
.footer {
  margin-top: var(--gap-gallery-footer);
  padding-block: var(--footer-pt) var(--footer-pb);
  background: var(--footer-bg);
}

.footer__inner {
  width: min(var(--footer-w), 100% - 2 * var(--gutter));
  border-top: 1px solid var(--gold);
  padding-top: var(--footer-rule-gap);
}

.footer__legal {
  font-weight: 400;
  font-size: var(--fs-legal);
  line-height: var(--lh-legal);
}

/* ============================================================ breakpoints === */

/* The offset CTA button would start overlapping the centred paragraph at about
   1300px, so it stacks under it from here down. */
@media (max-width: 1360px) {
  .cta--offset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .cta--offset .cta__btn {
    position: static;
  }
}

/* ------------------------------------------------------------ tablet --- */
@media (max-width: 1024px) {
  :root {
    --gutter: 20px;

    --fs-title: 48px;
    --fs-date: 26px;
    --fs-lead: 22px;
    --lh-lead: 32px;
    --fs-h2: 28px;
    --fs-row: 20px;
    --lh-row: 28px;
    --fs-venue-title: 28px;
    --fs-venue: 24px;
    --lh-venue: 34px;
    --fs-btn: 20px;
    --btn-w: 210px;
    --fs-legal: 15px;
    --lh-legal: 23px;

    --gap-date-cta: 56px;
    --gap-cta-program: 72px;
    --gap-table-venue: 48px;
    --gap-venue-cta: 56px;
    --gap-cta-gallery: 56px;
    --gap-gallery-footer: 48px;
    --row-h: 68px;
    --row-h-first: 68px;
    --row-pad-x: 0px;
    --footer-pt: 48px;
    --footer-pb: 96px;

    --slide-gap: 24px;
    --slides-visible: 2;
  }

  .program__row {
    column-gap: 32px;
  }

  .venue {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
    text-align: center;
  }
  .venue__figure {
    width: 100%;
    max-width: 472px;
  }
  .venue__credit {
    text-align: center;
  }
  .venue__title {
    text-align: center;
  }

  /* Arrows are dropped from here down — the track is a native swipe/scroll
     carousel and stays keyboard-reachable via `tabindex` on the track. */
  .gallery__arrow {
    display: none;
  }
}

/* ------------------------------------------------------------ mobile --- */
/* The full-page background export would shrink the artwork to a sliver, so a
   tighter crop takes over. Its height is 100vw * 1148/1120 = 102.5vw; the
   gradient is placed 20px above that so its flat first stop (--bg-seam, the
   crop's own bottom row) overlaps the seam and hides any rounding drift. */
@media (max-width: 860px) {
  html {
    background-image:
      url('../assets/hero-mobile.jpg'),
      linear-gradient(
        180deg,
        var(--bg-seam) 0%,
        #19232d 8.3%,
        #1a2530 16.7%,
        #1d2b36 25%,
        #23333f 33.3%,
        #293c49 41.7%,
        #2d4351 50%,
        #324a59 58.3%,
        #365161 66.7%,
        #395566 75%,
        #3b5869 83.3%,
        #3b596a 91.7%,
        var(--bg-deep) 100%
      );
    background-position:
      top center,
      center calc(102.5vw - 20px);
    background-size:
      100% auto,
      100% 1120px;
    background-repeat: no-repeat, no-repeat;
  }

  :root {
    /* title top y=931 of the 1120x1148 crop: 931/1120 */
    --art-offset: 83.13vw;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;

    --fs-title: clamp(26px, 7.6vw, 34px);
    --fs-date: 19px;
    --fs-lead: 17px;
    --lh-lead: 26px;
    --fs-h2: 24px;
    --fs-row: 15px;
    --lh-row: 21px;
    --fs-venue-title: 22px;
    --fs-venue: 18px;
    --lh-venue: 26px;
    --fs-btn: 18px;
    --btn-w: 190px;
    --fs-legal: 13px;
    --lh-legal: 20px;

    --gap-title-date: 8px;
    --gap-date-cta: 36px;
    --gap-cta-program: 52px;
    --gap-table-venue: 36px;
    --gap-venue-cta: 40px;
    --gap-cta-gallery: 40px;
    --gap-gallery-footer: 40px;
    --gap-row: 10px;
    --row-h: 0px;
    --row-h-first: 0px;
    --footer-pt: 36px;
    --footer-pb: 64px;

    --slide-gap: 16px;
    /* 1.5 slides in view, as requested */
    --slides-visible: 1.5;
  }

  .cta--offset {
    gap: 24px;
  }
  /* the design's two hard-coded line breaks would read badly here */
  .cta__text br {
    display: none;
  }

  /* Label wraps freely, the time never does — this is what keeps the table
     inside the viewport without a horizontal scroller. */
  .program__row {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: baseline;
    padding-block: 10px;
  }
  .program__row dd {
    text-align: right;
  }

  /* full-bleed track so the half slide reads as an intentional peek */
  .gallery {
    width: 100%;
  }
  /* The basis must stay definite: the slides size in percentages of the track,
     so an `auto` basis makes the track content-sized and it collapses. */
  .gallery__track {
    flex: 1 1 100%;
    padding-inline: var(--gutter);
    scroll-padding-inline-start: var(--gutter);
  }
  .gallery__slide:last-child {
    margin-right: var(--gutter);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__track {
    scroll-behavior: auto;
  }
  .btn,
  .gallery__arrow {
    transition: none;
  }
  .cta--offset .cta__btn.is-pinned {
    animation: none;
  }
}