@import "tokens/fonts.css";
@import "tokens/colors.css?v=readability-20260921-1";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/effects.css";

/* Mobile layout --------------------------------------------------------
   The exported design-system components use inline desktop grid values.
   These focused overrides keep the poster-like visual language, while
   preventing the fixed desktop tracks from forcing horizontal scrolling. */
html, body { max-width: 100%; overflow-x: hidden; }

/* The manifesto heading used to be wider than its grid track (809px of text
   inside a 522px column at 1549px), so it visually collided with the quote.
   Give the display column more room and cap the type before that happens. */
#cultura h2 {
  font-size: clamp(42px, 4.15vw, 64px) !important;
  line-height: .94 !important;
}

@media (max-width: 600px) {
  .enquiry-fab { display: none; }
}

/* Supporting copy on navy remains fully opaque. Orange stays reserved for
   brand accents, rules and actions. */
footer > div:last-child > div { color: var(--white) !important; }

/* Preserve complete logo artwork and alphabetical reading order at every size. */
.allies-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .allies-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  #cultura > div {
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr) !important;
    gap: clamp(40px, 4vw, 56px) !important;
  }

  #cultura > div > * { min-width: 0; }
}

@media (max-width: 767px) {
  :root {
    --page-gutter: 18px;
    --space-9: 48px;
    --space-10: 60px;
    --space-11: 72px;
    --size-heading: 24px;
    --size-subheading: 20px;
    --size-lead: 18px;
    --size-body: 16px;
    --size-small: 15px;
    --size-eyebrow: 14px;
    --size-micro: 12px;
  }

  body { line-height: 1.6; }

  header > div {
    padding: 12px var(--page-gutter) !important;
    gap: var(--space-3) !important;
  }
  header nav { display: none !important; }
  header img { max-width: 132px; height: auto !important; }
  header button, header a[role="button"] { margin-left: auto; white-space: nowrap; }

  #inicio > div:nth-of-type(1) { padding-top: var(--space-6) !important; }
  #inicio > div:nth-of-type(1) img { height: 88px !important; }
  #inicio > div:nth-of-type(2) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-7) !important;
    padding: var(--space-7) var(--page-gutter) var(--space-8) !important;
  }
  #inicio h1 { font-size: clamp(48px, 15vw, 66px) !important; }
  #inicio > div:nth-of-type(3) > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 0 var(--page-gutter) !important;
  }
  #inicio > div:nth-of-type(3) > div > div {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: var(--space-2) !important;
    padding: var(--space-4) var(--space-2) !important;
  }

  .countband > div { padding: var(--space-8) var(--page-gutter) !important; }
  .countband > div > div:first-child > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
    gap: var(--space-4) !important;
  }
  .countband > div > div:first-child > div:last-child > div {
    min-width: 0 !important;
  }
  .countband > div > div:first-child > div:last-child > span { display: none !important; }
  .countband .rows { align-items: flex-start; flex-direction: column; width: 100%; }

  #programa > div,
  #registro > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-7) !important;
    padding: var(--space-10) var(--page-gutter) !important;
  }
  #programa > div > div:first-child { position: static !important; }
  #expectativas [style*="grid-template-columns"],
  #galeria [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .allies-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-5);
  }
  #expectativas [style*="minmax(min(100%, 380px)"] { min-width: 0 !important; }

  #accesos > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-8) !important;
  }
  #accesos figure { min-height: 0 !important; aspect-ratio: 4 / 3 !important; }

  #foro > div,
  #accesos > div,
  #patrocinio > div,
  #teaser > div,
  #expectativas > div,
  #galeria > div {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }

  h2 {
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.12 !important;
    text-wrap: balance;
  }
  h3 {
    font-size: 23px !important;
    line-height: 1.15 !important;
  }
  #cultura h2 {
    font-size: clamp(32px, 8.8vw, 38px) !important;
    line-height: .98 !important;
  }
  #cultura p { font-size: 16px !important; }
  #cultura > div > div:last-child {
    padding-left: var(--space-5) !important;
  }
  #registro img { max-width: min(100%, 360px); margin-inline: auto; }

  footer > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-7) !important;
    padding: var(--space-9) var(--page-gutter) var(--space-7) !important;
  }
  footer img { max-width: 40%; height: auto !important; }
  footer > div > div:first-child > div:first-child { gap: var(--space-4) !important; }

  /* Avoid invisible sections when the scroll observer is throttled on mobile. */
  [style*="will-change: opacity"] {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
}