/* =====================================================================
   RESPONSIVE — all breakpoints for the whole site live in this file.
   Desktop (above 768px) keeps the original design untouched; these
   rules only kick in for tablet and mobile viewports.
   ===================================================================== */

/* ================= TABLET : max-width 768px ================= */
@media (max-width: 768px) {
  /* --- nav becomes a burger menu --- */
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:var(--noir);border-bottom:1px solid var(--ligne);padding:10px;
  }
  .nav-links.open{display:flex}
  .burger{display:block}

  /* stacked nav links get a real touch target */
  .nav-links a{
    padding:14px 16px;min-height:44px;
    display:flex;align-items:center;
  }

  /* --- home --- */
  .grid-units{grid-template-columns:1fr}

  /* --- about --- */
  .about-split{grid-template-columns:1fr}
  .about-visual{position:relative;height:45vh}
  .about-content{padding:50px 28px;border-left:none}

  /* --- contact --- */
  .contact-grid{grid-template-columns:1fr}
  .date-row{grid-template-columns:1fr;gap:6px}
  .date-row .btn{min-height:44px}
}

/* ================= MOBILE : max-width 480px ================= */
@media (max-width: 480px) {
  .wrap{padding:0 18px}
  .section{padding-top:50px;padding-bottom:50px}

  /* --- nav: tighten spacing so brand + burger always fit --- */
  nav{padding:12px 16px}
  .nav-brand img{width:28px}
  .nav-brand span{font-size:16px;letter-spacing:2px}
  .burger{padding:12px 16px;min-height:44px;display:inline-flex;align-items:center}

  /* --- hero title: shrink so "SELFMIND" never overflows on narrow phones --- */
  .hero3d h1{font-size:clamp(34px,11vw,64px);letter-spacing:3px}
  .hero3d .cta{gap:10px}
  .hero3d .cta .btn{flex:1 1 auto;justify-content:center}

  /* --- section headings: keep large but safely inside the viewport --- */
  .music-head h1,.merch-head h1{font-size:clamp(38px,12vw,60px)}
  .contact-head h1{font-size:clamp(38px,12vw,70px)}
  .about-visual .vtxt{font-size:clamp(30px,10vw,44px);padding:24px}

  /* --- home units --- */
  .units{padding:50px 18px}
  .unit{padding:26px 22px 22px}

  /* --- about --- */
  .about-content{padding:40px 18px}
  .about-content p{font-size:16px}
  .grid-members{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}

  /* --- contact --- */
  .contact-head{padding:140px 18px 30px}
  .field input,.field textarea{padding:14px 15px}
  .socials a{padding:16px 18px}
}