/* =========================================================================
   Afterhours Filmfestival — Colors & Type
   ---------------------------------------
   Two-color risograph-style print system.
   Base palette: deep Klein-ish blue + warm off-white paper +
   near-black ink, with an orange accent for special moments.
   Every surface carries a paper-grain texture.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts
   -------
   Display:  Bagel Fat One   — bold, rounded, hand-cut feel (closest
                               Google Fonts match for the festival's custom
                               drawn AH26 / Save the Date / Mission lettering).
                               *** SUBSTITUTION FLAG: original lettering looks
                               custom-drawn. If the festival has a real font
                               file (e.g. a Bonjour Sans / Cooper-style cut),
                               drop it into /fonts/ and update --font-display.
   Body:     Familjen Grotesk — clean modern grotesk for running text,
                               labels, captions, programme info.
   Mono:     JetBrains Mono   — credits/timecodes/metadata when needed.
   ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* === Brand colors === */
  --ah-blue:       #1F2BA0;   /* primary deep blue, the festival color */
  --ah-blue-deep:  #161E78;   /* darker shade for press/text on cream */
  --ah-ink:        #0F1430;   /* near-black ink (used on cream and as silhouette in logo) */
  --ah-cream:      #EFE9D6;   /* warm paper off-white */
  --ah-cream-soft: #F5F0E0;   /* lighter paper, for layered surfaces */
  --ah-orange:     #C9621D;   /* accent — sparingly, only on special marks (e.g. Programmbeilage) */
  --ah-white:      #FBF8EE;   /* near-white highlight */

  /* === Semantic foreground / background === */
  --bg:        var(--ah-cream);
  --bg-alt:    var(--ah-blue);
  --bg-soft:   var(--ah-cream-soft);
  --fg:        var(--ah-ink);
  --fg-muted:  color-mix(in oklab, var(--ah-ink) 65%, var(--ah-cream));
  --fg-on-blue:    var(--ah-cream);
  --accent:    var(--ah-blue);
  --accent-on-blue: var(--ah-cream);
  --highlight: var(--ah-orange);

  /* === Type === */
  --font-display: 'Bagel Fat One', 'Cooper Black', 'Recoleta', system-ui, serif;
  --font-body:    'Familjen Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale — display sizes lean BIG, like the posters. */
  --fs-display-xl: clamp(4rem, 12vw, 11rem);   /* Save the Date headline */
  --fs-display-l:  clamp(3rem, 8vw, 7rem);     /* Section openers */
  --fs-display-m:  clamp(2rem, 5vw, 4rem);     /* Hero subhead */
  --fs-h1:         clamp(2rem, 4vw, 3rem);
  --fs-h2:         clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3:         1.5rem;
  --fs-body-l:     1.25rem;
  --fs-body:       1.0625rem;
  --fs-body-s:     0.9375rem;
  --fs-caption:    0.8125rem;
  --fs-eyebrow:    0.75rem;

  --lh-display:  0.92;
  --lh-tight:    1.05;
  --lh-body:     1.45;
  --lh-loose:    1.6;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-eyebrow:  0.18em;

  /* === Spacing (4px base) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* === Radii — corners are mostly square; small radii on inputs only === */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* === Borders — used as thick ink rules, riso-stamp style === */
  --border-hair: 1px solid var(--fg);
  --border-rule: 2px solid var(--fg);
  --border-thick: 4px solid var(--fg);

  /* === Shadows — almost none. Brand is flat-print. Reserved for overlays. === */
  --shadow-none: none;
  --shadow-print: 4px 4px 0 var(--ah-ink);     /* hard print-style offset */
  --shadow-overlay: 0 24px 60px -20px rgba(15, 20, 48, 0.4);

  /* === Grain texture (used as background-image on big surfaces) === */
  --grain-url: url('assets/grain.svg');
}

/* -------------------------------------------------------------------------
   Base typography mappings
   ------------------------------------------------------------------------- */

html { color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.ah-display,
h1.ah-display {
  font-family: var(--font-display);
  font-weight: 400;            /* Bagel Fat One only ships at 400 — already heavy */
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
}
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
}
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}
p {
  margin: 0 0 var(--space-4);
  max-width: 62ch;
  text-wrap: pretty;
}
small, .ah-caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}
.ah-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.ah-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0;
}
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--ah-blue); }

/* -------------------------------------------------------------------------
   Surface modifiers
   ------------------------------------------------------------------------- */

.ah-on-blue {
  background: var(--ah-blue);
  color: var(--ah-cream);
}
.ah-on-cream {
  background: var(--ah-cream);
  color: var(--ah-ink);
}
.ah-on-ink {
  background: var(--ah-ink);
  color: var(--ah-cream);
}

/* Grain overlay — apply to any hero/section to get the riso paper feel */
.ah-grain {
  position: relative;
  isolation: isolate;
}
.ah-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: var(--grain-url);
  background-size: 220px 220px;
  opacity: 0.55;
  mix-blend-mode: multiply;
  z-index: 1;
}
.ah-on-blue.ah-grain::after { mix-blend-mode: overlay; opacity: 0.35; }

/* -------------------------------------------------------------------------
   Scroll-reveal animations
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .ah-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .55s ease, transform .55s ease;
  }
  .ah-revealed {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Mobile responsive — 880px breakpoint
   ------------------------------------------------------------------------- */

@media (max-width: 880px) {

  /* Section padding */
  section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* HERO — outer container */
  section#top {
    padding: 24px 20px 32px !important;
    min-height: auto !important;
  }

  /* HERO — top date/location row stacks vertically */
  section#top > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding-bottom: 20px !important;
    font-size: 11px !important;
  }
  section#top > div:first-child > span:last-child {
    text-align: left !important;
  }

  /* HERO — H1 a bit smaller minimum so "Filmfest." fits cleanly */
  section#top h1 {
    font-size: clamp(48px, 14vw, 96px) !important;
  }

  /* HERO — image container: full-width centered, room for the AH26 badge */
  section#top .ah-stack-mobile > div:last-child {
    justify-self: stretch !important;
    max-width: 100% !important;
    margin-bottom: 32px !important;
  }
  /* HERO — AH26 badge: pull inside the image bounds on mobile */
  section#top .ah-stack-mobile > div:last-child > div:last-child {
    bottom: 12px !important;
    left: 12px !important;
    font-size: 22px !important;
  }

  /* COUNTDOWN — label full-width on top, then 2×2 grid of numbers */
  .ah-countdown-mobile {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
  }
  .ah-countdown-mobile > div:first-child {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 14px 0 16px 0 !important;
    border-bottom: 2px solid currentColor;
  }
  /* Numbers: drop the left-border, use bottom-border for grid lines */
  .ah-countdown-mobile > div:not(:first-child) {
    border-left: none !important;
    padding: 18px 12px !important;
  }
  .ah-countdown-mobile > div:nth-child(3),
  .ah-countdown-mobile > div:nth-child(5) {
    border-left: 2px solid currentColor !important;
  }
  .ah-countdown-mobile > div:nth-child(2),
  .ah-countdown-mobile > div:nth-child(3) {
    border-bottom: 2px solid currentColor;
  }

  /* Jury image hidden on mobile to save space */
  .ah-jury-img { display: none !important; }

  /* Richtlinien: no sticky on mobile */
  .ah-sticky-sidebar { position: static !important; top: auto !important; }

  /* Footer */
  footer { padding: 48px 20px 24px !important; }

  /* Touch targets */
  .ah-btn { min-height: 44px; }

  /* Card-style stacked grids only — Programm uses .ah-cards-stack
     (not all .ah-stack-mobile grids want a divider line between children:
     Hero has text+image, Jury has intro+list — they should stack cleanly) */
  .ah-cards-stack > div { border-left: none !important; border-top: 2px solid var(--ah-ink); }
  .ah-cards-stack > div:first-child { border-top: none !important; }
  .ah-cards-stack > div { min-height: auto !important; }
}