/* ═══════════════════════════════════════════════════
   RESPONSIVE QUERIES — Dott.ssa Mariella Casa
   ═══════════════════════════════════════════════════
   Breakpoints:
     Tablet:  ≤ 900px  (56.25em)
     Mobile:  ≤ 580px  (36.25em)
     Small:   ≤ 400px  (25em)
   ═══════════════════════════════════════════════════ */


/* ─── Tablet  ≤ 900px ─────────────────────────────── */
@media (max-width: 56.25em) {

  :root {
    --header-h: 7rem;
  }

  /* Ribbon: nascosto su tablet/mobile */
  .contact-ribbon { display: none; }

  /* Header: torna a top: 0 perché il ribbon è nascosto */
  .header { padding: 0 2.4rem; top: 0; }

  /* Hero: ripristina padding-top senza ribbon */
  .section-hero { padding-top: var(--header-h); }

  .header__hamburger { display: flex; }

  .header__nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: #fff;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: height 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
                visibility 0s linear 0.4s;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    z-index: 999;
  }

  .menu-open .header__nav {
    height: calc(100dvh - var(--header-h));
    visibility: visible;
    transition: height 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
                visibility 0s linear 0s;
  }

  .menu-open { overflow: hidden; }

  .nav__list {
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 0;
    padding: 2.4rem;
  }

  .nav__link {
    font-size: 2.4rem;
    width: 100%;
    padding: 1.8rem;
    text-align: center;
    display: block;
    border-radius: var(--radius-sm);
  }

  .nav__link--cta {
    margin-left: 0;
    margin-top: 1.6rem;
    display: block;
    text-align: center;
  }

  /* Nav overlay: attivo su tablet/mobile */
  .nav-overlay { display: block; }

  /* Contatti rapidi nel menu mobile */
  .nav__item--contacts { display: list-item; }

  .menu-open .header__hamburger span:first-child {
    transform: translateY(9px) rotate(45deg);
  }

  .menu-open .header__hamburger span:nth-child(2) {
    opacity: 0;
  }

  .menu-open .header__hamburger span:last-child {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    gap: 4rem;
    text-align: center;
    padding-block: 5rem;
  }

  .hero__quote { text-align: left; }

  .hero__actions { justify-content: center; }

  .hero__image-wrap { order: -1; }

  .hero__image {
    width: min(46rem, 88%);
    margin-inline: auto;
  }

  /* Services */
  .services-grid { grid-template-columns: 1fr 1fr; }

  /* About */
  .about__layout {
    grid-template-columns: 1fr;
    gap: 5.6rem;
  }

  .about__image-wrap {
    position: static;
  }

  /* On tablet, restore natural photo aspect ratio (landscape source) */
  .about__image {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
  }

  /* Offset frame meno prominente su tablet — usa inset invece di transform */
  .about__image-frame::before {
    inset: 0.8rem -0.8rem -0.8rem 0.8rem;
  }

  .about__image-frame:hover::before {
    inset: 1rem -1rem -1rem 1rem;
  }

  /* Trust badges sotto la foto, senza margin negativo */
  .trust-bar {
    margin-top: 2rem; /* era -2.4rem */
    padding: 0;
  }

  /* Reviews */
  .reviews__grid { grid-template-columns: 1fr 1fr; }

  /* Contact */
  .contact__layout {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .footer__grid > *:first-child {
    padding-right: 0;
    border-right: none;
    padding-bottom: 3.2rem;
    border-bottom: 1px solid rgba(var(--clr-primary-rgb), .12);
  }

  .footer__map iframe { height: 300px; }

  /* Bonus Banner */
  .bonus-banner__inner {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
    padding: 3.2rem 2.4rem;
  }

  .bonus-banner__icon { font-size: 5.6rem; }

  .bonus-banner::after { display: none; }

  /* How it works */
  .how__steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Hide the connector line on single-column layout */
  .how__steps::before { display: none; }

  .how__step { padding: 3.6rem 2.4rem 2.8rem; }

  /* Wave dividers */
  .wave-divider svg { height: 40px; }

  /* Areas */
  .areas__grid { grid-template-columns: repeat(3, 1fr); }

  /* FAQ: da split a colonna singola su tablet */
  .faq__layout {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .faq__sidebar {
    position: static;
  }

  .faq__sidebar-inner {
    padding: 0;
  }

  .faq__deco {
    top: auto;
    bottom: 0;
    right: 0;
  }

  .faq__sidebar-title {
    font-size: 3.4rem;
  }

  .faq__sidebar-count {
    max-width: 22rem;
  }
}


/* ─── Mobile  ≤ 580px ─────────────────────────────── */
@media (max-width: 36.25em) {

  html { font-size: 9px; }

  .container { width: min(var(--container-max), 100% - 3.2rem); }

  .section-title {
    font-size: 3.2rem;
    margin-bottom: 3.2rem;
  }

  /* Hero */
  .hero { padding-block: 3.2rem; }

  .hero__image { width: min(36rem, 92%); }

  /* Services */
  .services-grid { grid-template-columns: 1fr; }

  .services__disclaimer { font-size: 1.6rem; }

  /* About — mobile */
  .about__image {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius-md);
    object-position: center 15%;
  }

  .about__image-frame::before {
    inset: 0.6rem -0.6rem -0.6rem 0.6rem; /* era transform: translate — nessuna fuoriuscita su mobile */
  }

  .about__image-frame:hover::before {
    inset: 0.8rem -0.8rem -0.8rem 0.8rem;
  }

  .trust-bar {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 1.6rem; /* era -1.6rem — rimossa sovrapposizione con la foto */
    padding: 0;
    gap: 0.8rem;
  }

  .trust-bar__item {
    flex: 1 1 calc(33% - 0.8rem);
    min-width: 9rem;
    padding: 1.4rem 1rem 1.2rem;
  }

  .trust-bar__value {
    font-size: 2.2rem;
  }

  .trust-bar__label {
    font-size: 1.1rem;
  }

  /* FAQ */
  .faq__question { font-size: 1.7rem; padding: 2rem 1.8rem 2rem 2rem; gap: 1.2rem; }
  .faq__answer-inner { padding: 0 1.8rem 0 4.4rem; }
  .faq__item--open .faq__answer-inner { padding-bottom: 2rem; }
  .faq__sidebar-title { font-size: 3rem; }

  /* Reviews */
  .reviews__grid { grid-template-columns: 1fr; }

  .reviews__summary { text-align: center; }
  .reviews__stars-big { justify-content: center; }

  /* Contact */
  .section-cta__text { font-size: 1.8rem; }

  /* Footer */
  .footer__map iframe { height: 260px; }

  .footer__policies { flex-direction: column; gap: 0.8rem; }

  /* Areas */
  .areas__grid { grid-template-columns: repeat(2, 1fr); }

  .area-card p { font-size: 1.6rem; }

  /* Bonus Banner */
  .bonus-banner__btn {
    width: 100%;
    text-align: center;
  }

  /* Wave dividers */
  .wave-divider svg { height: 32px; }

  /* Hero image-wrap pseudo */
  .hero__image-wrap::before { inset: -1.5rem; }

  /* CTA mid */
  .section-cta-mid { padding-block: 5.6rem; }

  .cta-mid__title { font-size: 2.8rem; }

  .cta-mid__text { font-size: 1.7rem; }

  .btn--cta-mid {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Mobile sticky CTA */
  .mobile-cta-sticky { display: block; }
}


/* ─── Small mobile  ≤ 400px ───────────────────────── */
@media (max-width: 25em) {

  html { font-size: 8.5px; }

  .header__logo-name    { font-size: 1.7rem; }
  .header__logo-subtitle { display: none; }

  /* Areas */
  .areas__grid { grid-template-columns: 1fr; }

  /* How step — padding-top garantisce spazio sotto il badge (4.8rem - 2rem di sporgenza = 2.8rem minimi) */
  .how__step { padding: 3.2rem 1.6rem 2rem; }
}