/* =========================================================
   GONÇALO TERROSO — PORTFÓLIO
   MOBILE STYLESHEET

   Everything screen-size-responsive lives here, separate from
   css/style.css (which holds the base/desktop styles). This file
   is loaded AFTER style.css, so any rule here wins over its base
   counterpart at the same breakpoint — no more digging through
   one giant file to tweak mobile behaviour.

   Structure (search for the ALL-CAPS section titles):
     1. Nav — hamburger + drawer
     2. Hero
     3. Sobre
     4. Destaques
     5. Projetos (tabs + cards)
     6. Contacto / footer
     7. Small-screen polish (<480px)
   ========================================================= */

/* =========================================================
   1. NAV — hamburger + drawer
   The drawer (#navDrawer), its scrim and the hamburger button are
   built as their own independent markup block in index.html (see
   the "Mobile nav drawer" comment there) — not a repositioned copy
   of the desktop nav. That's what makes this reliable: no fighting
   over `position`, and no rule from style.css can ever leak back in
   and re-show something this file just hid.
   ========================================================= */

/* Hidden by default (desktop). Only ever shown inside the
   ≤760px block below. */
.nav-toggle,
.nav-scrim,
.nav-drawer{ display:none; }

@media (max-width:760px){

  /* the desktop inline nav + its language switch step aside;
     the drawer versions below take over */
  #navLinks,
  #langSwitch{ display:none; }

  /* ---- hamburger button ---- */
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:44px; height:44px; border:1px solid var(--line-strong); border-radius:8px;
    background:var(--ink-2); cursor:pointer; flex-shrink:0; padding:0;
  }
  .nav-toggle span{
    display:block; width:17px; height:1.5px; background:var(--text); border-radius:1px;
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav-toggle.active span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2){ opacity:0; }
  .nav-toggle.active span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* ---- dark backdrop behind the open drawer ---- */
  .nav-scrim{
    display:block; position:fixed; inset:0; z-index:140; background:rgba(10,9,7,0.6);
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, visibility .3s ease;
  }
  .nav-scrim.active{ opacity:1; visibility:visible; pointer-events:auto; }

  /* ---- the sliding drawer panel itself ---- */
  .nav-drawer{
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0; z-index:150;
    height:100dvh; height:calc(var(--vh, 1vh) * 100);
    width:min(82vw, 320px);
    background:var(--ink-2); border-left:1px solid var(--line-strong);
    padding:24px 0 max(24px, env(safe-area-inset-bottom));
    box-shadow:-24px 0 60px -20px rgba(0,0,0,0.6);
    transform:translateX(100%); transition:transform .32s cubic-bezier(.19,1,.22,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .nav-drawer.open{ transform:translateX(0); }

  /* leave room at the top so the panel content clears the fixed topnav */
  .nav-drawer::before{
    content:''; display:block; height:66px; flex-shrink:0;
  }

  .nav-drawer .navlinks{
    display:flex; flex-direction:column; gap:0; list-style:none; width:100%;
  }
  .nav-drawer .navlinks li{ width:100%; }
  .nav-drawer .navlinks a{
    display:flex; align-items:center; gap:10px;
    font-size:15.5px; padding:16px 26px; min-height:52px;
    border-bottom:1px solid var(--line); letter-spacing:0.08em;
  }
  .nav-drawer .navlinks a::after{ display:none; }
  .nav-drawer .navlinks a.active{ color:var(--music); background:rgba(140,9,173,0.08); }

  .nav-drawer .lang-switch--drawer{
    display:flex; margin:24px 26px 0; font-size:14px;
  }
  .nav-drawer .lang-switch--drawer .lang-btn{ padding:9px 12px; }

  /* body scroll is locked from JS (mobile.js) while the drawer is open —
     this just keeps the lock from causing a visible content jump */
  body.nav-open{ overflow:hidden; }
}


/* =========================================================
   2. HERO
   ========================================================= */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
}

@media (max-width:760px){
  .hero{ padding-top:96px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ justify-content:center; }
}

@media (max-width:640px){
  .stat-strip{ grid-template-columns:1fr; margin-top:40px; }
  .stat-strip .stat{ padding:16px 20px; }
}


/* =========================================================
   3. SOBRE
   ========================================================= */
@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; gap:36px; }
}

@media (max-width:760px){
  .skill-groups{ grid-template-columns:1fr; }
}


/* =========================================================
   4. DESTAQUES
   ========================================================= */
@media (max-width:640px){
  .destaque-video-row{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .artist-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:520px){
  .artist-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
}


/* =========================================================
   5. PROJETOS — tabs + cards
   ========================================================= */
@media (max-width:860px){
  .featured-row{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  /* Mobile category picker: all three options stay visible at once.
     This removes the sideways scroll and, because the container no longer
     clips vertically, also prevents the selected tab from being cut off. */
  .tracks-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    overflow:visible;
    margin:0 0 32px;
    padding:4px 0 0;
  }

  .track-btn{
    width:100%;
    min-width:0;
    min-height:88px;
    padding:11px 6px 10px;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    white-space:normal;
    text-align:center;
    font-size:11px;
    line-height:1.25;
  }

  .track-btn svg{ width:20px; height:20px; }
  .track-btn .tag{ display:block; }
  .track-btn .count{ padding:2px 7px; font-size:10px; }

  /* Touch browsers can keep :hover active after a tap. The desktop lift
     would then pull the button upwards, so disable it on the mobile picker. */
  .track-btn:hover,
  .track-btn:active{
    transform:none;
  }
}

@media (max-width:360px){
  .tracks-nav{ gap:6px; }
  .track-btn{
    min-height:84px;
    padding-inline:4px;
    font-size:10.25px;
  }
}


/* =========================================================
   6. CONTACTO / FOOTER
   ========================================================= */
@media (max-width:760px){
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  .lightbox-hint{ font-size:9.5px; padding:6px 12px; }
}


/* =========================================================
   7. SMALL-SCREEN POLISH (≤480px)
   Tighter rhythm + full-width tap targets for compact phones.
   ========================================================= */
@media (max-width:480px){
  section{ padding:clamp(48px,12vw,80px) 0; }
  .section-head{ margin-bottom:34px; }
  .section-note{ max-width:none; }

  .feat-music-panel{ padding:24px 18px; }
  .contact{ padding:32px 20px; }
  .contact-card{ padding:18px; }
  .single-card{ padding:18px; }

  .brand{ font-size:16.5px; }
}