/* Tu Es Belle — responsive refinement layer
   Solo layout/responsività: nessuna modifica a contenuti, immagini o funzionalità. */

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

body {
  min-width: 0;
}

img,
picture,
video,
canvas,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

.wrap {
  width: 100%;
  padding-left: clamp(20px, 3.5vw, 28px);
  padding-right: clamp(20px, 3.5vw, 28px);
}

.nav-in,
.nav-links,
.hero-grid,
.method-grid,
.corsi-grid,
.worlds-grid,
.treat-grid,
.perche-grid,
.bd-grid,
.ig-wall,
.row,
.ogrid,
.shero-grid,
.vgrid,
.cgrid,
.course-body,
.why-grid,
.tg,
.foot-grid,
.grid2,
.stat-grid {
  min-width: 0;
}

.hero-grid > *,
.method-grid > *,
.corsi-grid > *,
.worlds-grid > *,
.treat-grid > *,
.perche-grid > *,
.row > *,
.ogrid > *,
.shero-grid > *,
.vgrid > *,
.cgrid > *,
.course-body > *,
.why-grid > *,
.tg > *,
.foot-grid > *,
.grid2 > *,
.stat-grid > * {
  min-width: 0;
}

/* Desktop compatto / tablet landscape: mantieni la nav desktop senza compressioni. */
@media (min-width: 881px) and (max-width: 1120px) {
  .nav-links {
    gap: clamp(14px, 2vw, 24px);
  }

  .nav-links a {
    font-size: .76rem;
    letter-spacing: .08em;
  }

  .nav-links .wa-btn {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero-grid,
  .method-grid,
  .corsi-grid,
  .shero-grid,
  .row,
  .why-grid,
  .cgrid {
    gap: clamp(34px, 5vw, 52px);
  }
}

/* Tablet portrait e mobile. */
@media (max-width: 880px) {
  .nav-in {
    height: 74px;
  }

  .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .burger {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-right: -6px;
    touch-action: manipulation;
  }

  .sec {
    padding-top: clamp(56px, 10vw, 72px);
    padding-bottom: clamp(56px, 10vw, 72px);
  }

  .sec-head {
    margin-bottom: clamp(36px, 7vw, 46px);
  }

  .hero,
  .shero {
    padding-top: clamp(52px, 10vw, 68px);
    padding-bottom: clamp(50px, 9vw, 64px);
  }

  .phead {
    padding-top: clamp(56px, 10vw, 72px);
  }

  .world,
  .treat,
  .perche-card,
  .card {
    min-width: 0;
  }

  .hero-cta,
  .cta-row,
  .save-row {
    max-width: 100%;
  }

  .wa-btn,
  .btn-solid,
  .btn-line,
  .btn-blush,
  .btn {
    max-width: 100%;
    min-height: 44px;
    justify-content: center;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    touch-action: manipulation;
  }

  .cinfo,
  .cblock,
  .cblock .k,
  .cblock .v,
  .cblock .v a,
  .legal,
  .faq-list,
  .faq-item,
  .faq-item summary,
  .faq-a {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .cmap,
  .cmap iframe {
    width: 100%;
  }

  .foot-bottom {
    row-gap: 10px;
  }

  /* Pannello admin: controlli più comodi senza alterarne struttura o contenuti. */
  aside {
    max-width: 100%;
  }

  .navbtn,
  input,
  textarea,
  select,
  button {
    min-width: 0;
    max-width: 100%;
  }
}

/* Telefoni. */
@media (max-width: 600px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .brand {
    font-size: 1.45rem;
  }

  .hero h1 {
    font-size: clamp(2.1rem, 10.5vw, 2.45rem);
  }

  .phead h1 {
    font-size: clamp(2.15rem, 11vw, 2.8rem);
  }

  .sec-head h2,
  .method h2 {
    overflow-wrap: break-word;
  }

  .hero-sub,
  .phead p,
  .sec-head p {
    font-size: .98rem;
  }

  .world {
    padding: 34px 24px;
  }

  .treat,
  .perche-card {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero-cta,
  .cta-row {
    width: 100%;
  }

  .hero-cta > a,
  .cta-row > a {
    max-width: 100%;
  }

  .btn-solid,
  .wa-btn,
  .btn-line,
  .btn-blush {
    padding-left: clamp(18px, 6vw, 28px) !important;
    padding-right: clamp(18px, 6vw, 28px) !important;
  }

  .cblock {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .faq-item summary {
    gap: 12px;
  }

  .faq-item summary::after {
    flex: 0 0 auto;
  }

  .review-card {
    max-width: calc(100vw - 40px);
  }

  .rev-layer {
    width: 100%;
  }

  .ig-gallery .instagram-media {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 340px !important;
  }

  .login-card {
    padding: 34px 24px;
  }

  main {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .card {
    padding: 22px 18px;
  }

  .save-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

/* Telefoni molto stretti. */
@media (max-width: 360px) {
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .eyebrow {
    letter-spacing: .22em;
  }

  .world,
  .treat,
  .perche-card,
  .cblock {
    padding-left: 18px;
    padding-right: 18px;
  }

  .btn-solid,
  .wa-btn,
  .btn-line,
  .btn-blush {
    width: 100%;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .foot-bottom {
    flex-direction: column;
  }

  .wa-sticky {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    justify-content: center !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* Schermi grandi: sfrutta lo spazio senza allargare eccessivamente il contenuto. */
@media (min-width: 1440px) {
  .wrap {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Menu mobile apribile e richiudibile; su tablet landscape/desktop torna automaticamente alla nav normale. */
@media (max-width: 880px) {
  .nav-links.is-open {
    display: flex;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    z-index: 80;
    flex-direction: column;
    gap: 18px;
    background: var(--porcelain);
    padding: 24px 28px;
    border-bottom: 1px solid var(--line);
  }
}