/* =====================================================================
   responsive.css — Pontos de quebra (mobile-first)
   Base = mobile. Aqui só o que muda em ecrãs maiores.
   tablet >=768 · desktop >=1024 · nav >=1100 · wide >=1280
   ===================================================================== */

/* ===================== TABLET (>= 768px) ===================== */
@media (min-width: 600px) {
  .grid--6 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .collab-grid { grid-template-columns: repeat(3, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }

  /* Timeline Antes/Durante/Depois */
  .timeline { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; column-gap: var(--space-md); align-items: start; }
  .timeline-sep { display: flex; align-items: flex-start; padding-top: 80px; color: var(--color-on-dark-muted); font-size: 1.75rem; line-height: 1; }

  .field-row { grid-template-columns: 1fr 1fr; }
  .scope-grid { grid-template-columns: 1fr 1fr; }
  .diag .check-list--cols { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(3, auto); column-gap: var(--space-lg); }

  .site-footer__top { grid-template-columns: 1fr 1fr; }

  .home-hero__title { font-size: var(--fs-900); }

  .contact-grid { grid-template-columns: 1.2fr 0.8fr; }
}

/* ===================== DESKTOP (>= 1024px) ===================== */
@media (min-width: 1024px) {
  :root { --container-pad: 40px; }

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

  /* Two-col media */
  .two-col-media { grid-template-columns: 1fr 1fr; }

  /* Scope + imagem */
  .scope-media-grid { grid-template-columns: 1.5fr 0.5fr; align-items: start; }

  /* Hero — imagem com bleed à direita + cartão flutuante */
  .home-hero { display: block; }
  .home-hero__inner { min-height: 540px; padding-block: 84px; }
  .home-hero__content { max-width: 540px; }
  .home-hero__bleed { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; height: auto; }
  .home-hero__bleed::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--color-dark-2) 0%, rgba(14,15,19,0) 30%);
  }
  .hero-card {
    position: absolute; top: 84px; right: 0;
    width: 300px; max-width: 300px;
  }

  /* Secções título + conteúdo */
  .split-layout { grid-template-columns: 0.85fr 2.15fr; gap: var(--space-xl); }

  /* Diagnóstico e CTA */
  .diag { grid-template-columns: 1.05fr 0.95fr; }

  /* Processo — 5 etapas em linha com conectores */
  .process__list { grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }
  .process-step { position: relative; }
  .process-step:not(:last-child)::after {
    content: ""; position: absolute; top: 23px; left: 60px; right: -10px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-dark-border) 0 6px, transparent 6px 12px);
  }

  /* Footer 5 colunas */
  .site-footer__top { grid-template-columns: 1.6fr 1fr 1.1fr 1.2fr 1.4fr; }
}

/* ===================== NAV DESKTOP (>= 1100px) ===================== */
@media (min-width: 1100px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ===================== TABLET DE ESPECIALIDADES ===================== */
@media (min-width: 600px) {
  .specialty-grid { grid-template-columns: repeat(2, 1fr); }
  .steps3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .specialty-grid { grid-template-columns: repeat(5, 1fr); }
  /* Conectores tracejados entre os 3 passos (Antes/Durante/Depois) */
  .steps3 .step3:not(:last-child)::after {
    content: ""; position: absolute; top: 13px; left: 44px; right: -18px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--color-dark-border) 0 6px, transparent 6px 12px);
  }
}

/* ===================== DESKTOP — PARCEIROS ===================== */
@media (min-width: 1024px) {
  .principles-dark-grid { grid-template-columns: repeat(3, 1fr); }
  .not-us-grid { grid-template-columns: 1fr 1fr; }
  .dark-two-col { grid-template-columns: 1fr 1.4fr; }
  .specialty-dark-grid { grid-template-columns: repeat(4, 1fr); }
  .form-media-grid { grid-template-columns: 1.2fr 0.8fr; }
  .faq-grid { grid-template-columns: 1fr 1fr; }
  .process__list--4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  .help-cards { grid-template-columns: repeat(3, 1fr); }
  .related-grid { grid-template-columns: repeat(3, 1fr); }
  .article-layout { grid-template-columns: 1fr 320px; }
  .nl-banner { flex-wrap: nowrap; }
}
@media (max-width: 1100px) {
  .img-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .home-hero__inner--fullbleed { padding: 64px 32px; }
  .home-hero__inner--fullbleed .hero-card { width: 250px; }
  .contact-channels { grid-template-columns: repeat(2,1fr); }
  .contact-form-layout { grid-template-columns: 1fr; }
  .context-cards { grid-template-columns: repeat(2,1fr); }
  .profile-cards { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 767px) {
  .img-cards--4, .img-cards--3 { grid-template-columns: 1fr; }
  .img-cards--4 .img-card__photo, .img-cards--3 .img-card__photo { height: 220px; }
  .home-hero--fullbleed { min-height: auto; }
  .home-hero__inner--fullbleed { flex-direction: column; align-items: flex-start; padding: var(--space-xl) var(--space-lg); gap: var(--space-lg); min-height: 560px; }
  .home-hero__inner--fullbleed .home-hero__content { max-width: 100%; }
  .home-hero__inner--fullbleed .hero-card { width: 100%; }
  .home-hero--fullbleed::before { background: linear-gradient(180deg, rgba(14,15,19,.85) 0%, rgba(14,15,19,.6) 60%, rgba(14,15,19,.3) 100%); }
  .contact-channels { grid-template-columns: 1fr; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .context-cards { grid-template-columns: 1fr; }
  .profile-cards { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1024px) {
  .article-grid-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ===================== WIDE (>= 1280px) ===================== */
@media (min-width: 1280px) {
  .home-hero__title { font-size: 4.25rem; }
}