/* ==========================================================================
   Makecampus - landing genitori ciclo 2027/28
   Mobile first. Breakpoint: 44em (700px) e 64em (1024px).
   ========================================================================== */

:root {
  /* Colori (campionati dagli screenshot) */
  --color-teal: #009ca6;
  --color-teal-text: #00757d;      /* teal piu' scuro per testo piccolo su fondo chiaro (contrasto 5:1) */
  --color-coral: #fc6666;
  --color-ink: #1d1d1d;
  --color-text: #444444;
  --color-white: #ffffff;
  --color-bg-alt: #f5f5f5;
  --color-line: #e5e5e5;
  --color-muted-dark: #9a9a9a;
  --color-tag-bg: rgba(0, 156, 166, 0.16);
  --color-btn-text: #ffffff;

  /* Font */
  --font-title: "Merriweather Sans", "Segoe UI", Arial, sans-serif;
  --font-text: "Karla", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Spaziature */
  --space-xs: 0.5rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --section-y: 4rem;
  --gutter: 1.25rem;
  --container: 67.5rem;            /* 1080px */

  /* Sticky bar: altezza di riserva sopra il primo blocco dopo l'hero */
  --bar-h: 7rem;
}

@media (min-width: 44em) {
  :root {
    --section-y: 5.5rem;
    --gutter: 2rem;
    --bar-h: 6.25rem;
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

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

img,
video {
  height: auto;
}

h1, h2, h3, p, ul, ol, figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

strong {
  font-weight: 700;
}

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink);
}

h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.5rem;
}

:focus-visible {
  outline: 3px solid var(--color-teal-text);
  outline-offset: 3px;
}

.on-dark :focus-visible {
  outline-color: var(--color-white);
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.section--alt {
  background: var(--color-bg-alt);
}

.eyebrow {
  margin-bottom: var(--space-s);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-text);
}

/* ---------- Pulsanti ---------- */

.btn {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  border-radius: 2px;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  color: var(--color-btn-text);
}

.btn--coral {
  background: var(--color-coral);
}

.btn--teal {
  background: var(--color-teal);
}

.btn:hover {
  filter: brightness(1.06);
}

.btn--small {
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}

/* ---------- 1. Hero ---------- */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--color-ink);
  color: var(--color-white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__header {
  padding-top: 3rem;
}

.hero__logo {
  width: 10rem;
  height: auto;
}

.hero__body {
  padding-block: 2rem 4rem;
}

.hero__eyebrow {
  margin-bottom: var(--space-m);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.hero h1 {
  max-width: 13em;
  font-size: clamp(2rem, 1.2rem + 3.8vw, 3.5rem);
  line-height: 1.2;
  color: var(--color-white);
}

.hero__tag {
  display: inline-block;
  max-width: 100%;
  margin-top: var(--space-m);
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-teal);
  background: var(--color-tag-bg);
  font-family: var(--font-title);
  font-size: clamp(1.0625rem, 0.8rem + 1.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-teal);
}

.hero__text {
  max-width: 50rem;
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
}

.hero__text strong {
  color: var(--color-white);
}

.hero .btn {
  width: 100%;
}

.hero__note {
  max-width: 50rem;
  margin-top: var(--space-s);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

@media (min-width: 44em) {
  .hero .btn {
    width: auto;
    padding-inline: 2.4rem;
    padding-block: 0.9rem;
  }

  .hero__header {
    padding-top: 4.75rem;
  }

  .hero__logo {
    width: 11.1875rem; /* 179px */
  }

  .hero__body {
    padding-block: 3.625rem 6rem;
  }
}

/* ---------- Contenitore sticky bar ---------- */

.after-hero {
  padding-top: calc(var(--bar-h) / 2);
  background: var(--color-white);
}

/* ---------- 2. Loghi ---------- */

.brands {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-line);
}

.brands__title {
  margin-bottom: var(--space-l);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-teal-text);
}

.brands__img {
  width: 100%;
  max-width: 61.3125rem; /* 981px */
  height: auto;
  margin-inline: auto;
}

@media (max-width: 43.74em) {
  .brands__img {
    max-width: 21.6875rem; /* 347px */
  }
}

/* ---------- 3. Video ---------- */

.video {
  padding-block: 3rem 0;
}

.video__frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--color-ink);
}

/* ---------- 4. Tre cose da sapere ---------- */

.facts__lead {
  max-width: 45rem;
  margin-top: var(--space-s);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.facts__list {
  display: grid;
  gap: var(--space-l);
  margin-top: 3.5rem;
}

.fact {
  padding-top: 1.5rem;
  border-top: 3px solid var(--color-ink);
}

.fact__num {
  margin-bottom: 0.5rem;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-teal-text);
}

.fact h3 {
  margin-bottom: var(--space-m);
  font-size: 1.75rem;
}

.fact p:not(.fact__num) {
  font-size: 1rem;
  line-height: 1.8;
}

@media (min-width: 64em) {
  .facts__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.3rem;
  }
}

/* ---------- 5. Programma ---------- */

.program__intro {
  max-width: 45rem;
  margin-top: var(--space-l);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.areas {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

.area {
  padding: 1.75rem 1.5rem;
  border-left: 4px solid var(--color-teal);
  background: var(--color-white);
}

.area__label {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-teal-text);
}

.area h3 {
  margin-bottom: var(--space-s);
  font-size: 1.75rem;
}

.area p:not(.area__label) {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.program__split {
  display: grid;
  gap: var(--space-l);
  margin-top: 3.5rem;
}

.program__text {
  max-width: 28rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.gallery {
  position: relative;
  width: 100%;
  max-width: 32.75rem; /* 524px */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-line);
}

.gallery li {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: gallery-fade 24s linear infinite;
  animation-delay: -0.6s;
}

.gallery li:nth-child(2) { animation-delay: 3.4s; }
.gallery li:nth-child(3) { animation-delay: 7.4s; }
.gallery li:nth-child(4) { animation-delay: 11.4s; }
.gallery li:nth-child(5) { animation-delay: 15.4s; }
.gallery li:nth-child(6) { animation-delay: 19.4s; }

.gallery li:first-child {
  opacity: 1;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 6 immagini, 4s ciascuna: dissolvenza in 0,6s, pausa, dissolvenza out in 0,6s */
@keyframes gallery-fade {
  0%      { opacity: 0; }
  2.5%    { opacity: 1; }
  16.67%  { opacity: 1; }
  19.17%  { opacity: 0; }
  100%    { opacity: 0; }
}

/* Pallini di navigazione: sopra l'immagine, in basso al centro, sincronizzati con il ciclo.
   Il carosello parte sempre: con "riduci movimento" attivo resta una dissolvenza, senza altri spostamenti. */
.gallery-wrap {
  position: relative;
  width: 100%;
  max-width: 32.75rem;
}

.gallery__dots {
  position: absolute;
  inset: auto 0 0.875rem 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
}

.gallery__dots li {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(29, 29, 29, 0.35);
  animation: gallery-dot 24s linear infinite;
  animation-delay: -0.6s;
}

.gallery__dots li:nth-child(2) { animation-delay: 3.4s; }
.gallery__dots li:nth-child(3) { animation-delay: 7.4s; }
.gallery__dots li:nth-child(4) { animation-delay: 11.4s; }
.gallery__dots li:nth-child(5) { animation-delay: 15.4s; }
.gallery__dots li:nth-child(6) { animation-delay: 19.4s; }

@keyframes gallery-dot {
  0%      { background-color: rgba(255, 255, 255, 0.5); }
  2.5%    { background-color: #ffffff; }
  16.67%  { background-color: #ffffff; }
  19.17%  { background-color: rgba(255, 255, 255, 0.5); }
  100%    { background-color: rgba(255, 255, 255, 0.5); }
}

@media (min-width: 44em) {
  .areas {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .area {
    padding: 2.5rem 2.6rem;
  }

  .program__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 32.75rem); /* 524px */
    gap: 3rem;
    align-items: start;
  }

}

/* ---------- 6. Corpo docente ---------- */

.faculty__intro {
  max-width: 45rem;
  margin-top: var(--space-m);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.faculty__list {
  display: grid;
  gap: 2.5rem;
  margin-top: 3.5rem;
}

.teacher img {
  width: 100%;
  aspect-ratio: 320 / 359;
  object-fit: cover;
}

.teacher h3 {
  margin-top: var(--space-m);
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.teacher p {
  font-size: 0.9375rem;
  line-height: 1.7;
}

@media (min-width: 38em) {
  .faculty__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
  }
}

@media (min-width: 64em) {
  .faculty__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem 3.75rem;
  }
}

/* ---------- 7. Campus ---------- */

.campus__grid {
  display: grid;
  gap: var(--space-l);
  margin-top: 3rem;
}

.campus__img {
  width: 100%;
  max-width: 31.875rem; /* 510px */
  height: auto;
}

.campus__content p {
  font-size: 1.0625rem;
  line-height: 1.7;
}

.campus__content p + p {
  margin-top: var(--space-m);
}

.callout {
  margin-top: var(--space-l);
  padding: 1.75rem 1.5rem;
  background: var(--color-ink);
  color: var(--color-white);
}

.callout .callout__text {
  margin-bottom: var(--space-m);
  font-size: 0.875rem;
  line-height: 1.6;
}

.callout .btn {
  width: 100%;
  font-size: 1rem;
}

.callout .callout__note {
  margin-top: var(--space-m);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

@media (min-width: 44em) {
  .campus__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3.75rem;
    align-items: start;
  }

  .callout {
    padding: 2.5rem;
  }

  .callout .btn {
    width: auto;
    padding-inline: 1.5rem;
  }
}

/* ---------- 8. Fondazione ---------- */

.foundation {
  padding-bottom: calc(var(--bar-h) + 2rem); /* spazio per la sticky bar a fine contenitore */
}

.foundation__intro {
  max-width: 45rem;
  margin-top: var(--space-m);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.why {
  margin-top: 3rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--color-line);
}

.why h3 {
  margin-bottom: var(--space-m);
  font-size: 1.75rem;
}

.why p {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.stats {
  display: grid;
  gap: var(--space-l);
  margin-top: 3rem;
  text-align: center;
}

.stat__num {
  font-family: var(--font-title);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-teal);
}

.stat__label {
  margin-top: var(--space-s);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
}

.foundation__outro {
  max-width: 45rem;
  margin-top: 3rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

@media (min-width: 44em) {
  .why {
    padding: 2.5rem;
  }

  .stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* ---------- Sticky bar (solo CSS) ----------
   L'ancora e' sticky con bottom:0 ed e' l'ultimo elemento di .after-hero.
   Finche' il contenitore e' nel viewport la barra resta attaccata al bordo basso.
   All'inizio del contenitore e' sotto l'hero (esce dal basso con lo scroll),
   alla fine del contenitore scorre via insieme alla sezione Fondazione. */

.sticky-anchor {
  position: sticky;
  bottom: 0;
  z-index: 100;
  height: 0;
}

.sticky-bar {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 3px solid var(--color-teal);
  background: var(--color-ink);
  color: var(--color-white);
}

.sticky-bar__text {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.sticky-bar .btn {
  width: 100%;
}

@media (min-width: 44em) {
  .sticky-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
    padding-block: 1.25rem;
    padding-inline: 3rem;
  }

  .sticky-bar__text {
    font-size: 0.875rem;
    text-align: left;
  }

  .sticky-bar .btn {
    width: auto;
  }
}

/* Versione con slide-in dal basso dopo l'hero e slide-out verso il basso all'arrivo del form.
   Usa le animazioni guidate dallo scroll (solo CSS). Dove non sono supportate
   resta il comportamento sticky di base descritto sopra. */

.after-hero {
  position: relative;
}

.after-hero__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: var(--bar-h);
  pointer-events: none;
}

@supports (animation-timeline: view()) and (timeline-scope: --a) {
  body {
    timeline-scope: --hero-end, --form-start;
  }

  .after-hero__sentinel {
    view-timeline: --hero-end block;
  }

  .signup {
    view-timeline: --form-start block;
  }

  .sticky-anchor {
    position: fixed;
    inset: auto 0 0 0;
  }

  .sticky-bar {
    translate: 0 100%;
    animation: bar-in linear both, bar-out linear both;
    animation-timeline: --hero-end, --form-start;
    animation-range: exit 0% exit 100%, entry 0% entry 7rem;
  }

  @keyframes bar-in {
    from { translate: 0 100%; }
    to   { translate: 0 0; }
  }

  @keyframes bar-out {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
  }
}

/* ---------- 9. Form ---------- */

.signup {
  padding-block: calc(var(--section-y) - 1rem) var(--section-y);
  padding-inline: var(--gutter);
  background: var(--color-ink);
  color: var(--color-white);
  text-align: center;
}

.signup__inner {
  max-width: 45.5rem; /* 728px */
  margin-inline: auto;
}

.signup__eyebrow {
  margin-bottom: var(--space-m);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-teal);
}

.signup h2 {
  color: var(--color-white);
}

.signup__lead {
  max-width: 38rem;
  margin: var(--space-l) auto 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-white);
}

.signup__stats {
  margin-top: var(--space-l);
  padding-block: 1.25rem;
  border-block: 1px solid #4a4a4a;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-teal);
}

.signup__sep {
  margin-inline: 0.4em;
}

.signup__contact {
  margin-top: var(--space-l);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-muted-dark);
}

.signup__contact a {
  text-decoration: underline;
}

/* ---------- Footer ---------- */

.footer {
  padding: 2.5rem var(--gutter);
  border-top: 1px solid #4a4a4a;
  background: var(--color-ink);
  color: var(--color-muted-dark);
  font-size: 0.8125rem;
  line-height: 1.6;
  text-align: center;
}

.footer a {
  font-weight: 700;
  text-decoration: none;
  color: var(--color-white);
}

.footer a:hover,
.footer__consent:hover {
  text-decoration: underline;
}

.footer__consent {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--color-white);
  cursor: pointer;
}

/* ---------- Banner cookie (CookieConsent) ---------- */

#cc-main {
  --cc-font-family: var(--font-text);
  --cc-btn-primary-bg: var(--color-teal-text);
  --cc-btn-primary-border-color: var(--color-teal-text);
  --cc-btn-primary-hover-bg: var(--color-ink);
  --cc-btn-primary-hover-border-color: var(--color-ink);
  --cc-toggle-on-bg: var(--color-teal-text);
  --cc-link-color: var(--color-teal-text);
}

/* ==========================================================================
   Stili propri della pagina genitori
   ========================================================================== */

/* Pulsanti con bordo (PDF) */

.btn--outline {
  border: 2px solid var(--color-white);
  background: transparent;
  color: var(--color-white);
}

.btn--outline-dark {
  border: 2px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
}

.btn--outline:hover,
.btn--outline-dark:hover {
  filter: none;
  background: var(--color-white);
  color: var(--color-ink);
}

.btn--outline-dark:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

@media (min-width: 44em) {
  .actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .actions--center {
    justify-content: center;
  }
}

/* Hero: sottotitolo come titolo di secondo livello */

.hero h2.hero__tag {
  letter-spacing: normal;
  color: var(--color-teal);
}

.hero__eyebrow {
  text-transform: uppercase;
}

/* Tre cose da sapere: paragrafi successivi nella stessa colonna */

.fact p + p {
  margin-top: var(--space-s);
}

/* Programma: due paragrafi nella colonna di testo */

.program__text p + p {
  margin-top: var(--space-m);
}

/* Campus: documento informativo */

.campus__doc {
  margin-top: var(--space-l);
}

.campus__doc .btn {
  width: 100%;
  margin-top: var(--space-m);
}

@media (min-width: 44em) {
  .campus__doc .btn {
    width: auto;
  }
}

/* Fondazione: titolo del riquadro come titolo di terzo livello nella colonna */

.foundation__intro + .why {
  margin-top: 3rem;
}

/* Chiusura */

.signup .actions {
  margin-top: var(--space-l);
}

.signup__lead + .actions {
  margin-top: var(--space-l);
}

.signup__contact a {
  color: var(--color-white);
}