/* =========================================================================
   PGO — Concept "Outdoor moderno / dinamico"
   home.css — Stili specifici della HOME (index.html)
   Caricato DOPO styles.css. Estende/sovrascrive solo classi di pagina,
   senza toccare il design system condiviso.
   ========================================================================= */

/* ============================================================ HERO SLIDESHOW
   Lo sfondo dell'hero diventa uno slideshow in crossfade.
   Convive con la struttura esistente: .hero, .hero__bg::after (scrim),
   .hero__inner, .hero__scroll restano invariati.
   ========================================================================= */
@layer sections {

  /* Lo slideshow vive nello stesso layer di sfondo dell'hero (z-index: -2).
     Lo scrim .hero__bg::after globale resta sopra le slide e sotto il testo. */
  .hero__slides {
    position: absolute;
    inset: 0;
    z-index: -1;          /* sopra le immagini-slide, sotto il testo */
    pointer-events: none; /* il contenuto hero resta cliccabile */
  }

  .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1100ms var(--ease-out);
    will-change: opacity;
  }
  .hero__slide.is-active { opacity: 1; }

  .hero__slide img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 42%;
  }

  /* Indicatori cliccabili (puntini) */
  .hero__dots {
    position: absolute;
    left: 50%;
    bottom: clamp(4.5rem, 11vh, 7rem); /* sopra il "Esplora" della freccia */
    translate: -50% 0;
    z-index: 3;
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    background: rgba(8, 26, 18, 0.28);
    backdrop-filter: blur(6px);
  }

  .hero__dot {
    inline-size: 11px;
    block-size: 11px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out),
                transform var(--t-fast) var(--ease-out);
  }
  .hero__dot:hover { transform: scale(1.18); }
  .hero__dot[aria-current="true"] { background: #fff; }
  .hero__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }

  /* ===================================================== HERO — CONTENUTO
     Centrato in colonna: logo grande, titolo, sottotitolo, CTA, chip.
     ===================================================================== */
  .hero__content--centered {
    max-width: 56rem;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__logo {
    inline-size: clamp(112px, 18vw, 168px);
    block-size: clamp(112px, 18vw, 168px);
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.92);
    padding: clamp(8px, 1.4vw, 14px);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34),
                0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    margin-bottom: var(--sp-5);
  }

  .hero__title {
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--fs-900);
    line-height: var(--lh-tight);
    letter-spacing: -0.015em;
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4);
  }

  .hero__subtitle {
    margin-top: var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--fs-600);
    font-weight: var(--fw-semi);
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.01em;
    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.34);
  }

  /* Azioni e chip centrati (override dell'allineamento di default) */
  .hero__content--centered .hero__actions { justify-content: center; }
  .hero__content--centered .hero__chips { justify-content: center; }
}

/* ===================================================== I COMUNI DEL SENTIERO
   Sezione a STEMMI araldici reali. Estende .partners (centrata).
   - .comuni__row : i 3 comuni ATTUALI grandi (Arogno · Bissone · Val Mara)
   - .valmara-group : cluster dei 3 storici PIÙ PICCOLI sotto Val Mara
   Gli stemmi sono PNG trasparenti mostrati con object-fit:contain (no riquadri).
   ========================================================================= */
@layer sections {

  /* --- Intestazione + frase introduttiva --- */
  .comuni__head { max-width: 64ch; margin-inline: auto; }
  .comuni__intro {
    margin-top: var(--sp-4);
    font-size: var(--fs-500);
    color: var(--c-text-soft);
    line-height: var(--lh-snug, 1.5);
  }

  /* --- Riga principale: 3 comuni attuali --- */
  .comuni__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;        /* la colonna Val Mara è più alta */
    gap: clamp(var(--sp-5), 5vw, var(--sp-8));
    margin-top: var(--sp-7);
    padding: 0;
  }

  /* --- Singolo stemma (crest) --- */
  .crest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    text-align: center;
  }

  /* Lo "scudo" è solo un contenitore trasparente per il PNG: niente bordo/box pesante. */
  .crest__shield {
    inline-size: clamp(104px, 16vw, 150px);
    block-size: clamp(104px, 16vw, 150px);
    display: grid;
    place-items: center;
    transition: transform var(--t-med) var(--ease-out),
                filter var(--t-med) var(--ease-out);
    filter: drop-shadow(0 6px 14px rgba(16, 40, 28, 0.16));
  }
  .crest__shield img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .crest:hover > .crest__shield {
    transform: translateY(-4px) scale(1.03);
    filter: drop-shadow(0 12px 22px rgba(16, 40, 28, 0.24));
  }

  .crest__name {
    font-family: var(--font-display);
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
    color: var(--c-ink);
    letter-spacing: 0.01em;
  }
  .crest__tag {
    font-size: 0.66rem;
    font-weight: var(--fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--c-brand);
    margin-top: calc(-1 * var(--sp-2));
  }

  /* --- Colonna Val Mara: stemma attuale + cluster storico sotto --- */
  .crest--valmara { position: relative; }

  .valmara-group {
    margin-top: var(--sp-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) clamp(var(--sp-4), 3vw, var(--sp-6)) var(--sp-5);
    border-radius: var(--r-lg);
    background: var(--c-green-050);
    border: 1px solid var(--c-line);
  }

  .valmara-group__label {
    font-size: var(--fs-300);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--c-brand);
  }

  .valmara-group__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4) clamp(var(--sp-4), 3vw, var(--sp-5));
    padding: 0;
  }

  /* Mini-stemmi storici riuniti in Val Mara */
  .crest--mini { gap: var(--sp-2); }
  .crest--mini .crest__shield {
    inline-size: clamp(58px, 9vw, 80px);
    block-size: clamp(58px, 9vw, 80px);
    filter: drop-shadow(0 4px 9px rgba(16, 40, 28, 0.14));
  }
  .crest--mini .crest__name {
    font-size: var(--fs-400);
    font-weight: var(--fw-semi);
  }

  /* --- Nota finale --- */
  .comuni__note {
    margin-top: var(--sp-7);
    font-size: var(--fs-400);
    color: var(--c-text-soft);
    max-width: 64ch;
    margin-inline: auto;
    text-align: center;
  }

  /* --- Responsive --- */
  /* Tablet/desktop: l'aria-flex-start fa "galleggiare" la colonna Val Mara più alta;
     il cluster resta visivamente sotto lo stemma di Val Mara. */
  @media (min-width: 768px) {
    .crest--valmara { align-self: stretch; }
  }

  /* Mobile: tutto impilato in colonna, cluster a piena larghezza ma contenuto. */
  @media (max-width: 600px) {
    .comuni__row { gap: var(--sp-6); }
    .valmara-group { inline-size: min(100%, 22rem); }
    .valmara-group__list { gap: var(--sp-4) var(--sp-5); }
  }
}

/* ============================================================ MOTION (comuni)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .crest:hover > .crest__shield { transform: none; }
}

/* ============================================================ MOTION
   Rispetta prefers-reduced-motion: niente crossfade, niente hover-lift.
   (Lo styles.css globale azzera già transition-duration; qui rinforziamo
    e garantiamo che la prima slide resti sempre visibile.)
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none !important; }
}


/* ===================== Galleria in Home: quadrati uniformi (come la pagina Galleria) */
@layer sections {
  .section--deep .gallery { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 600px) {
    .section--deep .gallery { grid-template-columns: repeat(3, 1fr); }
  }
  .section--deep .gallery__item,
  .section--deep .gallery__item--wide,
  .section--deep .gallery__item--tall {
    grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1;
  }
}