/* ============================================================
   Campanha Animalife — layout RESPONSIVO (≥ 900px = desktop)
   Tudo responde à largura real da janela. No hub, alarga ou
   estreita o painel de pré-visualização para ver desktop/telemóvel.
   ============================================================ */

@media (min-width: 768px) {

  :root {
    /* Page fills the viewport; content is centred via a fluid gutter so the
       purple hero (and every full-width band) bleeds edge-to-edge instead of
       floating as a narrow column on a wide monitor. */
    --content: 1200px;
    --page-w: 100%;
    --pad: max(40px, calc((100% - var(--content)) / 2));
  }
  body { background: var(--bg); }
  body::before { display: none !important; }
  .page { box-shadow: none; max-width: none; background: var(--bg); }

  /* Keep every section's inner content aligned to the same content width
     so left/right edges line up with the hero across the whole page. */
  .section__head,
  .problem__grid,
  .gallery__head,
  .gallery__cap,
  .how-wrap,
  .about-body { max-width: var(--content); }

  /* ---------- Header ---------- */
  .header { padding: 20px var(--pad); }
  .header.scrolled { padding: 14px var(--pad); }
  .header__logo { height: 30px; }
  .btn-donate-top { font-size: 14px; padding: 11px 26px; }
  /* solid header on desktop (a white form panel sits under the right side) */
  .header:not(.scrolled) {
    background: rgba(255,255,255,0.94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: 0 1px 0 var(--line);
  }
  .header:not(.scrolled) .header__logo { filter: none; }
  .header:not(.scrolled) .btn-donate-top {
    background: var(--purple); color: #fff; box-shadow: 0 4px 14px rgba(146,39,143,0.28);
  }

  /* O header e' so' para mobile — esconder no desktop, repor o logo dentro
     do hero e o texto de contexto */
  .header { display: none !important; }
  .hero__logo { display: block; }
  .hero__note { display: flex; }

  /* ---------- Section rhythm ---------- */
  .section { padding: 56px var(--pad); }
  .section__head { max-width: 1068px; margin-left: auto; margin-right: auto; }
  .section__title { font-size: 40px; line-height: 1.08; }
  .section__kicker { font-size: 12px; }
  .section__lede { font-size: 17px; max-width: 42ch; }

  /* ============================================================
     HERO + DONATIVO — lado a lado (estilo grandes ONGs)
     Fotografia + mensagem à esquerda · cartão de donativo à direita.
     ============================================================ */
  .hero-shell {
    display: grid;
    grid-template-columns: 1fr clamp(340px, 36%, 500px);
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
    padding: 72px var(--pad) 104px;
    min-height: min(92vh, 880px);
  }

  /* Tablet (768–1079px): não há espaço para a foto — esconde-a e mantém 2 colunas */
  .hero-shell::after { display: none; }
  .hero__pet { display: none; }

  /* LEFT — mensagem sobre o fundo roxo */
  .page .hero-shell .hero { padding: 0; grid-column: 1; }
  .page .hero-shell .hero__logo { height: 51px; margin-bottom: 26px; }
  .page .hero-shell .hero__inner { max-width: 560px; }
  .page .hero-shell .hero__eyebrow { font-size: 13px; margin-bottom: 20px; }
  .page .hero-shell .hero__number { font-size: clamp(140px, 12vw, 220px); line-height: 0.84; margin-bottom: 12px; }
  .page .hero-shell .hero__sub { font-size: 27px; max-width: 18ch; margin-bottom: 36px; }
  .page .hero-shell .progress { gap: 10px; max-width: 380px; }    /* curto: nao tapa os animais */
  .page .hero-shell .pcard__label { font-size: 13.5px; }          /* +2px na letra */
  .page .hero-shell .hero__note { max-width: 380px; }             /* texto curto: nao tapa os animais */
  .page .hero-shell .ring { width: 60px; height: 60px; }
  .page .hero-shell .ring__pct { font-size: 14px; }
  .page .hero-shell .money__big { font-size: 17.5px; }
  .page .hero-shell .money__meta { font-size: 14px; }
  .page .hero-shell .money__don { font-size: 12px; margin-top: 4px; }
  .page .hero-shell .frac__n { font-size: 26px; }
  .page .hero-shell .frac__d { font-size: 26px; }

  /* RIGHT — cartão de donativo a flutuar sobre o roxo */
  .page .hero-shell .donate {
    grid-column: 2;
    background: #fff;
    border-radius: 24px;
    padding: clamp(28px, 3vw, 44px) clamp(24px, 2.6vw, 40px);
    margin: 0;
    box-shadow: 0 34px 80px rgba(30,8,32,0.36);
  }
  .page .hero-shell .donate .section__head { text-align: left; max-width: none; margin: 0 0 22px; }
  .page .hero-shell .donate .section__title { font-size: 28px; }
  .page .hero-shell .donate .section__lede { margin: 8px 0 0; font-size: 15px; max-width: none; }
  .page .hero-shell .donate-grid { display: block; max-width: none; margin: 0; }
  .page .hero-shell .donate-left { position: static; }
  .btn-submit { font-size: 18px; }

  /* ============================================================
     O PROBLEMA — argumento à esquerda, dossier à direita
     ============================================================ */
  .problem__grid {
    flex-direction: row;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    max-width: var(--content);
    margin: 0 auto;
  }
  .problem__lead { flex: 1 1 56%; min-width: 0; }
  .problem__title { font-size: clamp(38px, 3.5vw, 52px); line-height: 1.02; }
  .problem__prose { margin-top: 28px; gap: 17px; }
  .problem__prose p { font-size: 17px; max-width: 48ch; }
  .problem__aside { font-size: 15px !important; padding-top: 22px; }

  .problem__dossier {
    flex: 0 0 clamp(340px, 36%, 410px);
    padding: 30px 30px 26px;
    border-radius: 22px;
  }
  .dossier__fig { font-size: 50px; }
  .dossier__say { font-size: 14.5px; }
  .dossier__foot { font-size: 14px; }

  /* ============================================================
     ANIMAL WALL — bigger tiles, still horizontal
     ============================================================ */
  .gallery { padding: 56px 0; }
  /* Título/setas alinhados à margem do conteúdo via padding var(--pad) — funciona
     em qualquer largura (tablet incluído). O max-width centrado falhava abaixo de
     1200px, deixando o título e as setas colados às bordas. */
  .gallery__head { max-width: none; margin: 0; padding-left: var(--pad); padding-right: var(--pad); }
  .gallery__head .section__head { margin: 0; max-width: 60ch; }
  .gallery__lede { font-size: 17px; max-width: 56ch; }
  .wall__nav { display: none; }   /* desktop: galeria centrada, sem setas */
  /* safe center: centra a parede quando cabe no ecrã; se for mais larga, alinha
     ao início e mantém o scroll horizontal (não corta fotos). */
  .wall { grid-template-rows: repeat(3, 160px); grid-auto-columns: 160px; gap: 12px; justify-content: safe center; }
  .gallery__cap { max-width: none; margin: 0; padding-left: var(--pad); padding-right: var(--pad); }

  /* ============================================================
     HOW IT WORKS — three columns
     ============================================================ */
  /* ============================================================
     HOW IT WORKS — cabeçalho à esquerda, lista à direita
     ============================================================ */
  .how-wrap {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 76px;
    max-width: var(--content);
    margin: 0 auto;
    align-items: center;
  }
  .how-head { margin-bottom: 0; }
  .how-head__lede { font-size: 16px; max-width: 32ch; }
  .how__step { grid-template-columns: var(--rail-node) 1fr; gap: 30px; }
  .how-steps { --rail-node: 56px; --rail-pad: 26px; }
  .how__num { font-size: 25px; }
  .how__t { font-size: 21px; }
  .how__d { font-size: 15px; max-width: 48ch; }

  /* ============================================================
     ABOUT — photo beside text
     ============================================================ */
  /* Tablet (768–1079px): "Sobre nós" empilhado como no mobile (imagem por cima
     do texto). As 2 colunas lado a lado só entram a partir de 1080px (abaixo). */
  .about-body { max-width: var(--content); margin: 0 auto; }
  .about__media { height: 340px; margin-bottom: 28px; }
  .about__p { font-size: 17px; }
  /* Alinha o título "Sobre nós" à mesma margem esquerda do conteúdo (e dos títulos acima) */
  .about-sec .section__head { max-width: var(--content); margin-left: auto; margin-right: auto; }

  /* ============================================================
     FOOTER (compacto, branco)
     ============================================================ */
  .footer { padding: 22px var(--pad); }
}

/* ---------- "Sobre nós" lado a lado só a partir de 1080px (desktop real);
   abaixo disto (tablet) fica empilhado como o mobile ---------- */
@media (min-width: 1080px) {
  .about-body {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: center;
  }
  .about__media { height: 360px; margin-bottom: 0; }
}

/* ---------- Desktop largo: a foto ao CENTRO, atrás do conteúdo ----------
   Mantém-se a grelha de 2 colunas (mensagem à esquerda · cartão à direita).
   A foto do cão+gato é uma imagem centrada, ancorada em baixo e POR BAIXO do
   conteúdo (z-index abaixo do texto e do cartão), ocupando o vão central. */
@media (min-width: 1280px) {
  .hero__pet {
    display: block;
    position: absolute;
    left: 49.5%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(34%, 500px);
    height: auto;
    max-width: none;
    margin: 0;
    z-index: 1;
    object-fit: contain;
    -webkit-mask-image: none;
    mask-image: none;
    filter: drop-shadow(0 26px 50px rgba(0,0,0,0.4));
  }
}

/* ---------- Wide desktop: a touch more generous ---------- */
@media (min-width: 1280px) {
  .section { padding: 64px var(--pad); }
}

/* ---------- Fundo do hero mais rico (so' desktop): gradiente leve + halos + pontinhos ----------
   Mantem-se subtil para nao competir com o texto/cartao. Mobile fica inalterado. */
@media (min-width: 1280px) {
  .hero-shell {
    background-image:
      radial-gradient(1300px 780px at 90% -6%, rgba(190, 92, 184, 0.55), transparent 58%),  /* brilho claro topo-direita (atras do cartao) */
      radial-gradient(760px 500px at 52% 106%, rgba(196, 100, 190, 0.36), transparent 62%),   /* halo sob os animais ("areia roxa") */
      radial-gradient(900px 780px at 4% 106%, rgba(36, 8, 38, 0.55), transparent 60%),        /* vinheta escura canto inferior esquerdo */
      linear-gradient(152deg, #9c2c98 0%, #7a1f78 46%, #4c1147 100%);
  }
  /* Pontinhos subtis a desvanecer no canto superior direito (como o mockup) */
  .hero-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.7px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(760px 580px at 100% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(760px 580px at 100% 0%, #000 0%, transparent 70%);
  }
}