/* ==========================================================================
   TN Barbershop — responsive.css
   Breakpoint: 1100 (laptop), 900 (tablet / menu mobile), 760 (smartphone),
   480 (smartphone stretti). Approccio ricomposto, non solo ridimensionato.
   ========================================================================== */

@media (min-width: 1600px) {
  :root { --max: 1360px; }
}

/* Banner cookie come barra bassa su desktop: non copre i contenuti principali */
@media (min-width: 901px) {
  .cookie-banner {
    left: 20px;
    right: 100px;
    width: auto;
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title actions" "text actions";
    align-items: center;
    column-gap: 40px;
    padding: 18px 26px;
  }
  .cookie-banner[hidden] { display: none; }
  .cookie-banner__title { grid-area: title; margin-bottom: 4px; font-size: 1.2rem; }
  .cookie-banner__text { grid-area: text; margin: 0; }
  .cookie-banner__actions { grid-area: actions; display: flex; flex-wrap: nowrap; }
  .cookie-banner__actions .btn { white-space: nowrap; }
}

@media (max-width: 1100px) {
  .nav { gap: 24px; }
  .nav__list { gap: 22px; }
  .hero__chip { left: -8%; }
}

/* ---------- Tablet e menu mobile ---------- */
@media (max-width: 900px) {
  :root { --header-h: 76px; }

  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 36px;
    padding: calc(var(--header-h) + 20px) var(--gutter) 40px;
    background: var(--black-950);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
    overflow-y: auto;
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .nav__list { flex-direction: column; gap: 6px; width: 100%; }
  .nav__link {
    display: block;
    padding: 10px 0;
    font-family: var(--font-serif);
    font-size: clamp(2.1rem, 9vw, 3.2rem);
    font-weight: 450;
    line-height: 1.1;
    letter-spacing: -0.015em;
  }
  .nav__link::after { display: none; }
  .nav__link { color: var(--beige-50); }
  .nav__link.is-active { color: var(--green-300); }
  .nav.is-open .nav__list li,
  .nav.is-open .nav__cta { animation: nav-link-in 0.7s var(--ease) both; }
  .nav.is-open .nav__list li:nth-child(1) { animation-delay: 0.08s; }
  .nav.is-open .nav__list li:nth-child(2) { animation-delay: 0.14s; }
  .nav.is-open .nav__list li:nth-child(3) { animation-delay: 0.2s; }
  .nav.is-open .nav__list li:nth-child(4) { animation-delay: 0.26s; }
  .nav.is-open .nav__list li:nth-child(5) { animation-delay: 0.32s; }
  .nav.is-open .nav__cta { animation-delay: 0.42s; }
  .nav__cta { min-height: 54px; padding: 0 32px; }

  .hero { padding-bottom: 80px; }
  .hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .hero__media { width: min(78%, 400px); margin-top: 8px; }
  .hero__lead { max-width: 52ch; }

  .about__grid { grid-template-columns: 1fr; gap: 56px; }
  .about__media { width: min(100%, 520px); }

  .menu { grid-template-columns: 1fr; }
  .menu:has(.menu__col[hidden]) { grid-template-columns: 1fr; }

  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-auto-rows: clamp(220px, 46vw, 360px);
  }
  .gallery__item--1 { grid-column: 1 / -1; grid-row: auto; }
  .gallery__item--2, .gallery__item--3, .gallery__item--4, .gallery__item--5,
  .gallery__item--6, .gallery__item--7, .gallery__item--8 { grid-column: auto; grid-row: auto; }

  .location__card { grid-template-columns: 1fr; }
  .location__map { min-height: 360px; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  .lightbox[open] { grid-template-columns: 56px 1fr 56px; }
}

/* ---------- Smartphone ---------- */
@media (max-width: 760px) {
  :root { --radius: 14px; }
  .float-cta { transition: opacity 0.3s ease, transform 0.3s var(--ease), visibility 0s linear 0s; }

  .section__head { align-items: flex-start; }
  .section__title { max-width: none; }

  .hero { min-height: auto; padding-top: calc(var(--header-h) + 36px); }
  .hero__scroll { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__media { width: min(82%, 360px); }
  .hero__chip { left: -12%; border-width: 5px; }
  .hero__place { right: -10px; font-size: 0.74rem; padding: 9px 14px; }

  .about__note { right: 12px; bottom: 14px; max-width: 160px; padding: 14px 16px; font-size: 1rem; }
  .about__media::before { inset: 14px -10px -14px 14px; }
  .stats { gap: 24px 36px; }

  .price-row { grid-template-columns: 1fr auto auto; gap: 12px; padding: 18px 0; }
  .price-row__dots { display: none; }
  .price-row--star .price-row__name::after { display: block; width: max-content; margin: 6px 0 0; }

  .cta__actions .btn { flex: 1 1 100%; }

  .float-cta { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .float-cta.is-hidden { opacity: 0; visibility: hidden; transform: scale(0.8); pointer-events: none; }

  .cookie-banner { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 16px; border-radius: 16px; }
  .cookie-banner__title { font-size: 1.1rem; }
  .cookie-banner__text { margin-bottom: 14px; font-size: 0.8rem; line-height: 1.5; }
  .cookie-banner__actions { gap: 8px; }
  .cookie-banner__actions .btn { min-height: 44px; padding: 0 8px; font-size: 0.8rem; }
  .prefs__head, .prefs__body { padding-inline: 20px; }
  .prefs__foot { padding-inline: 20px; }

  .footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__bottom { flex-direction: column; }

  .lightbox[open] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .lightbox__figure { padding: 64px 12px 84px; }
  .lightbox__img { max-height: calc(100dvh - 170px); }
  .lightbox__prev, .lightbox__next { position: absolute; bottom: 18px; z-index: 2; }
  .lightbox__prev { left: calc(50% - 62px); }
  .lightbox__next { left: calc(50% + 12px); }
}

@media (max-width: 480px) {
  .brand__name { font-size: 1.08rem; }
  .gallery__grid { gap: 8px; grid-auto-rows: clamp(200px, 58vw, 300px); }
  .switch__state { display: none; }
  .legal table { font-size: 0.85rem; }
}

/* Schermi molto bassi (smartphone in orizzontale) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .nav { justify-content: flex-start; }
  .nav__link { font-size: 1.6rem; padding: 4px 0; }
}