@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

@font-face {
  font-family: 'Helvetica Neue LT Std';
  src: url('assets/fonts/HelveticaNeueLTStd-Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #000000;
  --paper: #ffffff;
  --band: rgba(0, 0, 0, 0.2);
  --gutter: 20px;
  --font-display: 'Helvetica Neue LT Std', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Courier Prime', 'Courier New', monospace;
  /* Alçada del frame Figma (1512×982): topall per a .event-photo-band i
     .event-info en pantalles amples, perquè creixin en lateral, no en alçada. */
  --frame-h: 982px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 18px;
}

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

a { color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Tipus "declaració" — Helvetica Neue majúscules, tracking 0.05em.
   Fa servir hero, intro i logos de peu (Biblia de disseny: tokens de xassís
   d'eina no apliquen aquí, aquesta és tipografia pròpia de la peça).
   Tipografia fluida: ~22px a mòbil fins a 42px a escriptori, amb la mateixa
   proporció d'interlínia (1.25 ≈ 52/42). */
.statement {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(22px, 5vw, 42px);
  line-height: 1.25;
  margin: 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh; /* fallback per a navegadors sense svh */
  min-height: 100svh; /* alçada petita del viewport (Safari 15.4+, Chrome 108+) */
  overflow: hidden;
}

/* Canvas decoratiu compartit (hero i mòdul de tancament): omple el contenidor. */
.rain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

/* Overlay fix: es manté a la pantalla durant tot el scroll, no només
   dins l'alçada del hero (petició 2026-09-03). pointer-events:none perquè
   no bloquegi clics/scroll sobre el contingut de sota. */
.hero-overlay {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  pointer-events: none;
}

.hero-text {
  text-align: center;
}

/* Compensació òptica del hero: amb la font de declaració la darrera línia
   deixa més buit de tinta sota la primera, així que el bloc de baix sembla
   tenir més padding que el de dalt. Es compensa en em (proporcional a la
   mida fluida) afegint marge al primer bloc (mesurat al navegador 2026-09-04). */
.hero-overlay > :first-child { margin-top: 0.26em; }

/* ---------- Intro ---------- */
.intro {
  padding: var(--space-7, 60px) var(--gutter);
  display: grid;
  gap: var(--space-6, 40px);
}

.intro em { font-style: italic; }

.intro-contact a { text-decoration: underline; }

/* ---------- Programació ---------- */
.event { border-top: 1px solid var(--paper); }

/* Els 3 retalls venen amb fons transparent (silueta), no fotos
   rectangulars — "contain" perquè mai s'escapci la figura (una figura
   molt estreta amb "cover" la deixava en un fragment irreconeixible).
   Alçada = proporció del bloc al Figma original (1512×982), sempre
   100% d'ample. */
.event-photo-band {
  background: var(--band);
  aspect-ratio: 1512 / 982;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-6, 40px) 0;
}
.event-photo-band img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.event-info {
  padding: var(--space-6, 40px) var(--gutter);
  display: grid;
  gap: var(--space-4, 24px);
}

.event-title {
  margin: 0; /* <h3> porta marge per defecte del navegador */
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: underline;
}
.event-title::before { content: "\2022\a0"; text-decoration: none; } /* • + espai, no subratllat */

.event-meta {
  display: grid;
  gap: var(--space-2, 10px);
  margin: 0;
}
.event-meta > div {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: var(--space-3, 15px);
}
.event-meta dt { text-align: right; font-weight: 400; }
.event-meta dt::after { content: ":"; }
.event-meta dd { margin: 0; text-transform: uppercase; }
.event-meta a { text-decoration: underline; text-transform: none; }

.event-description { margin: 0; } /* <p> porta marge per defecte del navegador */

/* Escriptori: 4 columnes horitzontals (títol | label | valor | descripció),
   ràtio del Figma original (229:229:229:726). Subgrid perquè les 3 files
   de label/valor s'alineïn amb les columnes 2-3 del grid pare. */
@media (min-width: 800px) {
  .event-info {
    grid-template-columns: 229fr 229fr 229fr 726fr;
    column-gap: var(--space-4, 20px);
    align-items: start;
    align-content: start;
    aspect-ratio: 1512 / 982; /* mateixa alçada que .event-photo-band */
  }
  .event-title { grid-column: 1; }
  .event-meta {
    grid-column: 2 / 4;
    grid-template-columns: subgrid;
  }
  .event-meta > div {
    grid-column: 1 / 3;
    grid-template-columns: subgrid;
  }
  .event-description { grid-column: 4; }
}

/* Pantalles més amples que el disseny Figma (1512px): si es deixés
   l'aspect-ratio lliure, aspect-ratio + una alçada màxima recalcula
   l'amplada cap avall en lloc de limitar només l'alçada (el navegador
   tracta la caixa com un element "replaced"). Per això, a partir d'aquí
   es desactiva aspect-ratio i es fixa l'alçada directament: l'amplada
   queda lliure per ocupar tot l'ample disponible. */
@media (min-width: 1512px) {
  .event-photo-band,
  .event-info {
    aspect-ratio: auto;
    height: var(--frame-h);
  }
}

/* ---------- Peu ---------- */
.site-footer {
  padding: var(--space-6, 40px) var(--gutter);
  border-top: 1px solid var(--ink);
  display: grid;
  gap: var(--space-6, 40px);
}

.sponsor-label {
  margin: 0 0 var(--space-4, 24px); /* font-size/line-height/family: heretats del body (Courier 16px/18px) */
}

.sponsor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5, 50px);
}

/* Alçada fixa, ample lliure: cada logo escala segons la seva pròpia
   proporció (contain amb ample fix deixava un coixí transparent molt
   desigual als logos quadrats/circulars enfront dels amples). */
.sponsor-list img { height: 55px; width: auto; }

/* Mòbil: l'overlay del hero és fixed i el seu darrer bloc de text es manté
   sempre a prop del peu de la finestra durant tot el scroll (petició
   2026-09-03). Marge extra perquè al final del scroll aquell text caigui
   sobre espai buit, no sobre el logo de l'Ajuntament. Només a mòbil perquè
   a escriptori l'overlay ja no s'hi acosta prou per tacar el peu. */
@media (max-width: 799px) {
  .site-footer { margin-bottom: 80px; }
}