/* ================================================================
   mobile.css — responsive overrides for smartphones
   Caricato dopo tutti gli altri CSS. Si attiva solo in @media.
   ================================================================ */

@media (max-width: 700px) {

  :root {
    --mobile-header-space: calc(4.7rem + env(safe-area-inset-top));
    --mobile-header-visual-space: calc(1.85rem + env(safe-area-inset-top) - 25px);
    --mobile-bottom-space: calc(2rem + env(safe-area-inset-bottom));
  }

  html,
  body {
    height: 100% !important;
    width: 100%;
    overflow-x: hidden !important;
  }

  /* === Sfondo Tavola_disegno_7 su mobile per TUTTE le pagine TRANNE la home ===
     La home (identificata dalla presenza di .home-hero) mantiene il suo video. */
  body:not(:has(.home-hero)) {
    background-color: #F3F2EF;
    background-image: url("../img/bg/Tavola_disegno_7.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
  }

  /* Sulle pagine non-home, nasconde l'immagine di sfondo originale (es. testa.jpg) */
  body:not(:has(.home-hero)) .bg__media {
    display: none !important;
  }

  /* Solo gli HERO delle pagine non-home usano lo sfondo del body
     (Tavola_disegno_7). Le sezioni successive mantengono i propri
     sfondi desktop (--legal-bg, --award-bg, ecc.) per coerenza con il PC. */
  body:not(:has(.home-hero)) .legal-hero::before,
  body:not(:has(.home-hero)) .legal-hero::after,
  body:not(:has(.home-hero)) .authors-hero::before,
  body:not(:has(.home-hero)) .authors-hero::after,
  body:not(:has(.home-hero)) .press-hero::before,
  body:not(:has(.home-hero)) .press-hero::after,
  body:not(:has(.home-hero)) .films-hero::before,
  body:not(:has(.home-hero)) .films-hero::after,
  body:not(:has(.home-hero)) .program-hero::before,
  body:not(:has(.home-hero)) .program-hero::after {
    background: transparent !important;
    background-image: none !important;
  }

  /* Mobile keeps the same section sizing as desktop, but scrolls normally
     instead of snapping between sections. */
  .snap-root {
    height: 100svh !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    scroll-snap-stop: normal !important;
    scroll-padding-top: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  .snap-root > main > .section,
  .snap-root > main > section,
  .snap-root > footer.site-footer {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow: visible !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
    scroll-margin-top: 0 !important;
  }

  .program-day,
  .award,
  .juries,
  .author,
  .event,
  .film,
  .related,
  .press-form,
  .contact-panel,
  .legal-content,
  #news,
  #films {
    align-items: start !important;
  }

  .program-day > .container,
  .award > .container,
  .author > .container,
  .event > .container,
  .film > .container,
  .related > .container,
  .press-form > .container,
  .contact-panel > .container,
  .legal-content > .container,
  .authors-hero > .container,
  #news > .container,
  #films > .container {
    padding-top: var(--mobile-header-space) !important;
    padding-bottom: var(--mobile-bottom-space) !important;
  }

  /* Tail padding extra sulle sezioni tendenzialmente lunghe su mobile:
     mitiga lo snap-back-to-top quando si scorre fino in fondo dando un
     po' di "respiro" sotto al contenuto utile. Footer escluso (gia' suo).
     Posto dopo le regole sopra per vincere la cascata (stessa specificita'). */
  #about > .container,
  #news > .container,
  #films > .container,
  .authors-hero.authors-hero--raised > .container,
  .legal-content > .container,
  .program-day > .container,
  .juries > .container,
  .author > .container,
  .film > .container,
  .event > .container,
  .related > .container {
    padding-bottom: calc(env(safe-area-inset-bottom) + 7rem) !important;
  }

  /* Supporters: respiro verticale simmetrico (loghi non attaccati ai bordi del fondale) */
  #supporters > .container {
    padding-top: calc(env(safe-area-inset-top) + 5.5rem) !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 5.5rem) !important;
  }

  /* Film/event detail pages: prevent horizontal overflow + tame poster height */
  .film__title,
  .event__title {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .film__poster img {
    max-height: 48vh !important;
  }

  .film__meta,
  .event__meta {
    gap: 0.6rem 1rem !important;
  }

  .day__stack,
  .award__stack,
  .juries__stack,
  .author__stack,
  .related__wrap,
  .press-form__wrap,
  .legal-content__wrap {
    height: auto !important;
    min-height: 0;
    align-content: start;
    justify-content: flex-start;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: none !important;
  }

  .film > .container,
  .event > .container,
  .contact-panel > .container,
  .authors-hero > .container {
    transform: none !important;
  }

  /* ---- Scroll interno: footer e sezione mappa/venues ---- */
  .site-footer,
  #films {
    overflow: visible !important;
  }

  /* Breathing room sotto le venues */
  #films .container {
    padding-bottom: calc(env(safe-area-inset-bottom) + 8rem);
  }

  /* ---- Header: pseudo-elemento che riempie la gap sopra con lo stesso stile ---- */
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    gap: 0.5rem;
    overflow: visible; /* permette al ::before di uscire sopra */
  }

  .site-header::before {
    content: '';
    position: absolute;
    top: calc(-1 * env(safe-area-inset-top));
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: #F3F2EF;
  }

  /* Home hero video: keep the 9:16 mobile render below the header.
     iOS browsers report viewport heights differently between Safari/Chrome
     and toolbar states, so the fixed layer is anchored with top + bottom
     instead of a fixed svh height. The video itself is anchored to the
     bottom so any cover crop is taken from the top. */
  body.home-page .bg {
    top: var(--mobile-header-visual-space);
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    background: #F3F2EF;
  }

  body.home-page .bg__video,
  body.home-page .bg__video.is-hidden {
    object-fit: cover;
    object-position: center 89%;
    mix-blend-mode: normal;
    transform: none;
  }

  body.home-page .bg__overlay {
    background: transparent;
  }

  /* Nascondi il pulsante "Acquista" nell'header — accessibile dal menu a tendina */
  .nav__cta-btn {
    display: none;
  }

  /* Mostra il pulsante "Submit your film" anche su mobile.
     Il bottone si allunga per riempire lo spazio disponibile nell'header;
     mostra il testo completo con "..." se non ci sta. Quando il bottone
     è troppo stretto per il testo, JS aggiunge la classe .is-marquee
     e il testo scorre lentamente avanti e indietro. */
  .nav__cta-btn[href*="filmfreeway"] {
    display: inline-flex;
    padding: 0.38rem 0.35rem;
    font-size: 0.62rem;
    height: auto;
    line-height: 1.1;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    justify-content: center;
  }

  .nav__cta-btn[href*="filmfreeway"] .nav__cta-long{
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    will-change: transform;
  }
  .nav__cta-btn[href*="filmfreeway"] .nav__cta-short{ display: none; }

  /* Modalità marquee: lo span perde il vincolo di larghezza, così può
     essere traslato dentro al bottone (che fa da viewport con overflow:hidden). */
  .nav__cta-btn[href*="filmfreeway"].is-marquee{
    justify-content: flex-start;
  }
  .nav__cta-btn[href*="filmfreeway"].is-marquee .nav__cta-long{
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }

  /* Rimpicciolisci il selettore lingua */
  .nav__lang-switch {
    padding: 0.15rem;
    gap: 0.08rem;
    flex-shrink: 0;
  }

  .nav__lang-option {
    min-width: 22px !important;
    height: 28px;
    padding: 0 0.18rem !important;
    font-size: 0.6rem;
  }

  /* Toggle: small pill with "MENU" label on mobile */
  .nav__toggle {
    width: auto;
    height: auto;
    padding: 0.38rem 0.5rem;
    font-size: 0.62rem;
    gap: 0.4rem;
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    margin-left: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .brand {
    min-width: 0;
    gap: 0.45rem;
    flex-shrink: 0;
  }

  .brand__text {
    display: none;
  }

  .nav__dropdown {
    flex-shrink: 0;
  }

  /* Pannello nav: dropdown ancorato sotto l'header su mobile */
  .nav__panel {
    position: fixed;
    top: 64px;
    right: 0.7rem;
    left: 0.7rem;
    inset: 64px 0.7rem auto 0.7rem;
    min-width: 0;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    padding: 1.2rem 1.2rem 1.4rem;
  }
  .nav__panel a {
    font-size: clamp(1.05rem, 4.6vw, 1.4rem);
    padding-left: 0.4rem;
  }

  /* ---- Hero ---- */
  .hero__title {
    font-size: clamp(1.9rem, 9vw, 2.8rem);
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
  }

  .program-hero .hero__title,
  .films-hero .hero__title,
  .press-hero .hero__title,
  .legal-hero .hero__title,
  .authors-hero .hero__title,
  .contact-hero .hero__title {
    font-size: clamp(1.8rem, 8.6vw, 2.25rem);
    line-height: 1.08;
  }

  .hero__subtitle {
    font-size: 0.92rem;
    margin: 0.7rem 0 1.2rem;
    max-width: min(100%, 32ch);
    overflow-wrap: break-word;
  }

  .hero__actions .btn {
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
  }

  /* ---- About ---- */
  .about__title {
    font-size: clamp(1.5rem, 7vw, 2.2rem);
  }

  /* ---- Sezioni generiche ---- */
  .section {
    padding: 3rem 0;
  }

  .section--full {
    padding: 0;
  }

  .section__title {
    font-size: clamp(1.2rem, 6vw, 1.7rem);
    overflow-wrap: break-word;
  }

  .section__desc {
    max-width: min(100%, 34ch);
    overflow-wrap: break-word;
  }

  .section__header,
  .day__copy--wide,
  .award__copy--wide,
  .author__copy {
    width: 100%;
    max-width: calc(100vw - 2rem);
    min-width: 0;
  }

  /* ---- Poster strip ---- */
  .poster-strip {
    grid-auto-columns: minmax(148px, 176px);
  }

  .poster img {
    height: 220px;
  }

  /* ---- Carosello film ---- */
  .carousel {
    padding: 0.8rem 40px 1rem;
    max-width: 100%;
  }

  .carousel__btn {
    width: 36px;
    height: 36px;
  }

  .carousel__btn--prev { left: -2px; }
  .carousel__btn--next { right: -2px; }

  /* ---- Carosello news: card compatta per smartphone ---- */
  .carousel--news .carousel__track {
    --cardW: min(calc(100vw - 5.5rem), 280px);
  }

  .carousel--news .news-card {
    grid-template-columns: 1fr;
    height: auto;
  }

  .carousel--news .news__img {
    height: 150px;
  }

  .carousel--news .news__body {
    padding: 1rem 1.1rem 1.3rem;
    gap: 0.5rem;
  }

  .carousel--news .card {
    height: auto !important;
    padding: 0;
  }

  .carousel--news .news__title {
    font-size: 1rem;
  }

  .carousel--news .news__text {
    font-size: 0.88rem;
  }

  /* ---- Mappa ---- */
  .map-section {
    height: auto !important;
    transform: none !important;
  }

  .map-card {
    min-height: 0;
  }

  .festival-map {
    min-height: 280px;
    height: 38vh;
  }

  .map-card__info {
    border-radius: 18px;
    padding: 1rem;
  }

  /* ---- Footer: scrollabile internamente se il contenuto supera 100vh ---- */
  .site-footer {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Estendi lo sfondo sotto la home indicator di iOS */
    padding-bottom: env(safe-area-inset-bottom);
    align-items: flex-start;
  }

  .footer__wrap {
    padding: calc(var(--mobile-header-space) + 0.75rem) 0 calc(env(safe-area-inset-bottom) + 2.5rem);
  }

  body.home-page .site-footer .footer__wrap {
    padding-bottom: calc(env(safe-area-inset-bottom) + 4.5rem);
  }

  .footer__headline {
    font-size: clamp(1.7rem, 8vw, 2.6rem);
  }

  .footer__lead {
    font-size: 0.92rem;
  }

  .footer__panel {
    padding: 1.1rem 1rem 0.9rem;
  }

  /* Newsletter inline → stack verticale */
  .footer__form {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .footer__input,
  .footer__submit {
    width: 100%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  /* ---- Giurie (in_competition) ---- */
  .award-carousel--wide {
    padding-left: 44px;
    padding-right: 44px;
    max-width: 100%;
  }

  .juries__grid {
    grid-template-columns: 1fr;
  }

  .jury-card {
    height: auto;
    min-height: 0;
    border-radius: 18px;
  }

  .jury-card__img {
    height: 140px;
  }

  /* ---- Carosello in concorso ---- */
  .award-carousel--wide {
    padding: 0 48px;
    max-width: 100%;
  }

  .award-carousel--wide .carousel__track {
    --cardW: clamp(148px, 58vw, 200px);
  }

  html.js .timeline__list::before {
    transform: translateY(-50%) scaleX(1) !important;
    opacity: 1 !important;
    animation: none !important;
  }

  html.js .timeline__list::after {
    display: none !important;
  }

  html.js .timeline:not(.is-active) .t-node,
  html.js .timeline:not(.is-active) .t-time,
  html.js .timeline:not(.is-active) .t-card,
  html.js .timeline:not(.is-active) .t-card::before {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html.js .timeline .t-card {
    --settle: 0px;
    transition: none !important;
  }

  html.js .timeline .t-card::before {
    height: var(--branch-gap) !important;
  }

  /* ---- Press form ---- */
  .press-form__wrap {
    max-width: 100%;
    padding-bottom: clamp(3rem, 7vh, 5rem);
  }

  .form {
    gap: 0.65rem;
  }

  .form textarea {
    min-height: 110px;
  }

  /* ---- Contatti ---- */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-panel > .container {
    background: transparent;
    border-radius: 0;
  }

  .contact-newsletter {
    border-radius: 18px;
  }

  /* ---- Legal ---- */
  .legal-scroll {
    max-height: none !important;
    overflow: visible !important;
  }

  .legal-card {
    border-radius: 18px;
  }

  /* ---- Detail pages: film/event + related ---- */
  .film__grid,
  .event__grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .film__header,
  .event__header,
  .related__header {
    margin-bottom: 0.9rem;
  }

  .film__title,
  .event__title {
    white-space: normal;
    font-size: clamp(1.45rem, 8vw, 2.2rem);
  }

  .film__poster {
    max-width: 300px;
  }

  .film__poster img {
    max-height: 36vh;
  }

  .event__media {
    min-height: 0;
    border-radius: 18px;
  }

  .film__block,
  .event__block {
    padding: 1rem;
    border-radius: 18px;
  }

  .related__grid {
    grid-template-columns: 1fr;
  }

  .related-card {
    border-radius: 18px;
  }

  .related-card__img {
    height: 140px;
  }

  /* ---- Autori / giurie biografiche ---- */
  .author__card {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .author__media {
    min-height: 0;
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,0.16);
  }
  .author__media img {
    height: auto;
  }

  .author__body {
    padding-left: 0;
    gap: 0.85rem;
  }

  .author__body::before {
    display: none;
  }

  /* ---- Modale consenso biglietti ---- */
  .ticket-modal__dialog {
    width: calc(100% - 2rem) !important;
    max-width: 420px !important;
    border-radius: 18px !important;
  }

  .ticket-modal__body {
    padding: 1.2rem 1.1rem 1rem !important;
  }

  .ticket-modal__title {
    font-size: 1.2rem !important;
  }

  .ticket-modal__actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .ticket-modal__btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* === Hero Home: bottoni più piccoli e riposizionati su mobile === */

/* Sovrascrive le variabili che spostano i bottoni nella home.
   IMPORTANTISSIMO: ogni valore DEVE avere un'unità (px, vw, vh, %, rem...).
   "0" è ok, "-100" da solo NO -> rompe l'intera transform e i bottoni non si muovono. */
.home-hero .hero__content {
  --homeButtonsX: -0px;       /* orizzontale: 0 = come container; -2vw = un po' a sinistra; 4vw = un po' a destra */
  --homeButtonsY: calc(-18vh + 10px);     /* verticale rispetto al centro schermo: 0 = centrati, -20vh = più in alto, +20vh = più in basso */
  --homeButtonsGap: 0.6rem;          /* spazio tra bottoni e divisorio */
  --homeButtonsDividerWidth: 22px;   /* lunghezza del trattino tra i due bottoni */
}

/* Bottoni più piccoli (sostituisce la regola esistente a riga 243) */
.hero__actions .btn {
  padding: 0.45rem 0.7rem;
  font-size: 0.78rem;
  border-radius: 999px; /* opzionale: pill style */
}
}

/* ---- Extra small ≤ 380px ---- */
@media (max-width: 380px) {

  .nav__lang-option {
    min-width: 27px;
    padding: 0 0.28rem;
    font-size: 0.58rem;
  }

  .hero__title {
    font-size: clamp(1.6rem, 10vw, 2.2rem);
  }

  .about__title {
    font-size: clamp(1.3rem, 8vw, 1.8rem);
  }

  .footer__headline {
    font-size: clamp(1.5rem, 9vw, 2.2rem);
  }
}