/* ============================================================
   Charles Produções — Responsivo
   (mobile-first já embutido acima; overrides por breakpoint aqui)
   ============================================================ */

/* ---------- ≥768px (tablet) ---------- */
@media (min-width: 768px) {
  .about__grid { grid-template-columns: 1fr 1fr; }
  .contact__grid { grid-template-columns: 1.1fr 0.9fr; }
  .process__list { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≥1024px (desktop) ---------- */
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .menu-btn { display: none; }

  .process__list { grid-template-columns: repeat(4, 1fr); }
}

/* Showcase pinado só acima de 1024px — abaixo disso vira faixa deslizável nativa.
   Altura FIXA (não auto) é proposital: height:100% encadeado a partir de um
   ancestral com altura indefinida faz o navegador calcular a altura de cada
   painel de forma inconsistente (varia conforme a imagem já carregou ou não
   por causa do loading="lazy"), causando painéis com alturas diferentes
   "vazando" um no outro. */
@media (max-width: 1023.98px) {
  .showcase .showcase__pin {
    height: min(75vh, 620px);
    max-width: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }
  .showcase .showcase__track { transform: none !important; height: 100%; }
  .showcase .showcase-panel { scroll-snap-align: start; flex-basis: 88vw; height: 100%; }
}

/* Hero: sem pin abaixo de 769px — vira quadro estático único */
@media (max-width: 768.98px) {
  .hero { height: auto; }
  .hero__pin { position: relative; height: 100svh; }
  .hero__frame { position: relative; opacity: 1 !important; }
  .hero__frame:not(.hero__frame--intro) { display: none; }
  .hero__hud { position: absolute; }
  .hero__bg { background-position: center 65%; }
}

/* ---------- ≥1440px (wide) ---------- */
@media (min-width: 1440px) {
  .portfolio__grid { gap: var(--space-5); }
}

/* Portfolio — colapsa o grid assimétrico em telas estreitas */
@media (max-width: 767.98px) {
  .portfolio__grid { grid-template-columns: 1fr; }
  .portfolio-card--lg, .portfolio-card--wide { grid-column: span 1; grid-row: span 1; }
  .portfolio-card--lg .portfolio-card__media,
  .portfolio-card--wide .portfolio-card__media { aspect-ratio: 4 / 5; height: auto; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .portfolio__grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-card--lg, .portfolio-card--wide { grid-column: span 2; grid-row: span 1; }
  .portfolio-card--lg .portfolio-card__media,
  .portfolio-card--wide .portfolio-card__media { aspect-ratio: 16 / 10; height: auto; }
}