/* Layout di pagina, mobile-first. I colori e gli spazi vengono dai token del design system. */
:root {
  --page-max: 1224px;
  --page-pad: var(--space-4, 16px);
  --page-gap: 56px;
  color-scheme: light dark;
}

@media (min-width: 768px) {
  :root {
    --page-pad: 24px;
  }
}

html[data-cm-theme="light"] {
  color-scheme: light;
}

html[data-cm-theme="dark"] {
  color-scheme: dark;
}

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

/* Il reset del DS fissa html/body a 100% di altezza: cosi' l'header sticky smetterebbe di restare fisso. */
html,
body {
  height: auto;
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--surface-page, #f2f2f2);
  color: var(--text-body, #333333);
  font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: var(--space-2, 8px);
  top: -100px;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: var(--surface-card, #fff);
  color: var(--text-strong, #0e1e30);
  z-index: 100;
}

.skip-link:focus {
  top: var(--space-2, 8px);
}

#site-header {
  overflow-x: clip; /* il box di ricerca nascosto di cm-top-navbar sporge a destra; in verticale i menu devono poter uscire */
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 64px;
  background: var(--surface-card, #fff);
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--page-gap);
  padding-bottom: var(--page-gap);
}

/* Altezza dell'hero come nel prototipo (spazio riservato prima del render: CLS). */
#hero {
  height: clamp(320px, 32vw, 444px);
  background: var(--surface-inverse, #0e1e30);
}

#hero {
  position: relative;
  overflow: hidden;
}

/* cm-hero riempie il contenitore (che ha gia' le proporzioni): la slide statica e' sotto, poi sparisce. */
#hero > cm-hero {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.hero-static {
  position: absolute;
  inset: 0;
  color: var(--text-on-dark, #fff);
}

.hero-static-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-static-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14, 30, 48, 0.55) 0%, rgba(14, 30, 48, 0.15) 55%, rgba(14, 30, 48, 0) 100%);
}

.hero-static-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  height: 100%;
  max-width: 1224px;
  margin-inline: auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.hero-static-title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
}

.hero-static-brand {
  color: var(--color-action, #ff5c00);
}

.hero-static-text {
  margin: 0;
  max-width: 480px;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35;
  text-wrap: balance;
}

.page-section {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 24px);
}

#events {
  gap: 28px;
  min-height: 600px;
}

#community {
  min-height: 420px;
}

#magazine {
  min-height: 420px;
}

.page-section[hidden] {
  display: none;
}

/* Fino a quando i componenti non sono pronti il contenuto resta invisibile (visibility non conta come layout shift). */
.page-section:not(.is-ready) > * {
  visibility: hidden;
}

/* Caroselli a tutta larghezza: le card scorrono fino al bordo dello schermo e la prima parte allineata al contenuto. */
.page-section cm-carousel {
  margin-inline: calc(var(--page-pad) * -1);
  --cm-carousel-inset: var(--page-pad);
}

.page-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

#app-error {
  max-width: var(--page-max);
  margin: var(--space-8, 32px) auto;
  padding: var(--page-pad);
  color: var(--text-strong, #0e1e30);
}

/* Titolo e categoria sulle card a tutta immagine restano leggibili su foto chiare. */
cm-article-card {
  --cm-article-card-overlay-gradient: linear-gradient(
    to top,
    rgba(14, 30, 48, 0.92) 0%,
    rgba(14, 30, 48, 0.7) 45%,
    rgba(14, 30, 48, 0) 90%
  );
}