/* =========================================================================
   IZABELA PARIZIO ADVOCACIA — Landing Page
   responsive.css  ·  Adaptação por breakpoint
   -------------------------------------------------------------------------
   O layout base já é fluido (clamp + CSS Grid) e a escala tipográfica cobre
   todas as larguras. Aqui tratamos apenas as quebras estruturais — nenhum
   tamanho de fonte é redefinido, para não romper a hierarquia do sistema.

   Breakpoints
     1600px  telas amplas
     1280px  notebook
     1024px  tablet paisagem  → colunas viram pilha
      860px  tablet retrato
      600px  celular
      380px  celular pequeno
   ========================================================================= */


/* =========================================================================
   TELAS AMPLAS  ·  ≥ 1600px
   ========================================================================= */
@media (min-width: 1600px) {
  :root { --shell: 1340px; }
}


/* =========================================================================
   NOTEBOOK  ·  ≤ 1280px
   ========================================================================= */
@media (max-width: 1280px) {

  :root { --shell: 1100px; }

  .cards--problemas  { grid-template-columns: repeat(2, 1fr); }
  .cards--beneficios { grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================================
   TABLET PAISAGEM  ·  ≤ 1024px
   -------------------------------------------------------------------------
   Todas as seções de duas colunas passam a uma coluna, com a mesma
   folga vertical. A fotografia vem sempre depois do texto que a explica,
   exceto no hero, onde ela abre a página.
   ========================================================================= */
@media (max-width: 1024px) {

  :root {
    --section-y: clamp(4rem, 2.5rem + 6vw, 7rem);
    --media-w: 420px;
  }

  .hero__inner,
  .sobre__inner,
  .ajuda__inner,
  .chamada__inner,
  .section__head--split {
    grid-template-columns: 1fr;
    gap: var(--sp-block);
  }

  .section__head--split { align-items: start; }

  /* Hero */
  .hero { padding-block: clamp(7rem, 5rem + 6vw, 9rem) clamp(3.5rem, 2rem + 4vw, 5rem); }

  .hero__inner { gap: var(--sp-head); }
  .hero__title { max-width: 18ch; }
  .hero__media { justify-self: start; max-width: 460px; }

  .hero__arc,
  .hero__cue  { display: none; }

  /* Molduras alinham à esquerda quando a grade vira pilha */
  .chamada__media { justify-self: start; }

  /* Como posso te ajudar: sem coluna fixa, sem sticky */
  .ajuda__sticky { position: static; }
  .steps         { margin-top: var(--sp-block); }

  /* O apoio do cabeçalho ganha a largura toda */
  .section__kicker { max-width: var(--measure-lead); }
}


/* =========================================================================
   TABLET RETRATO  ·  ≤ 860px
   ========================================================================= */
@media (max-width: 860px) {

  .cards--problemas { grid-template-columns: 1fr; }

  /* Cards de problema em linha: índice ao lado do texto poupa altura */
  .card--problema {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.15rem;
  }
  .card--problema .card__index { padding-top: 0.35rem; flex: none; }

  /* Trítipico vira dupla — o terceiro sairia estreito demais */
  .galeria__grade   { grid-template-columns: repeat(2, 1fr); }
  .galeria__item--c { display: none; }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================================================================
   CELULAR  ·  ≤ 600px
   ========================================================================= */
@media (max-width: 600px) {

  :root {
    --section-y: 4rem;
    --r-lg: 22px;
    --r-corner: 64px;
    --r-corner-sm: 40px;
    --media-w: 100%;
  }

  html { scroll-padding-top: 5rem; }

  /* O CTA do topo vira ícone puro — evita quebra de linha na barra */
  .site-header__cta {
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .site-header__cta .btn__label { display: none; }
  .site-header__cta .btn__icon  { width: 1.35rem; height: 1.35rem; }

  /* Botões de conversão ocupam a largura toda */
  .hero__actions .btn,
  .chamada__actions .btn { width: 100%; justify-content: space-between; }
  .btn--lg               { padding: 1.05rem 1.5rem; font-size: 0.95rem; }

  /* Hero */
  .hero { padding-block: 7rem 3.5rem; }
  .hero__title        { max-width: none; }
  .hero__line--accent { margin-top: 0.28em; }
  .hero__lead         { max-width: none; }

  /* A composição fotográfica cresce para não ficar menor que o texto */
  .hero__media            { max-width: 100%; aspect-ratio: 1 / 1.42; }
  .hero__frame--principal { width: 74%; }
  .hero__frame--detalhe   { width: 46%; border-width: 5px; }
  .hero__selo             { inset-inline-start: 36%; inset-block-end: 30%; }
  .arch__ring             { inset-block-start: 1.1rem; inset-inline-start: -1.1rem; }

  /* Selo da moldura de seção recua para dentro da margem */
  .sobre__stamp { inset-block-end: -1rem; inset-inline-end: -0.5rem; }

  /* Pilares: ícone no topo da linha, texto no corpo */
  .pillar       { align-items: flex-start; gap: 0.9rem; }
  .pillar__icon { margin-top: 0.15rem; }
  .pillar__text { font-size: var(--fs-body); }

  /* Etapas empilham índice e texto */
  .step { grid-template-columns: 1fr; gap: 0.5rem; }

  /* Chamada final */
  .chamada__plate { inset-block-start: 1.25rem; inset-inline-start: -1.25rem; }

  /* Benefícios em coluna única */
  .cards--beneficios { grid-template-columns: 1fr; }

  /* Faixa panorâmica encurta, mas mantém a figura inteira no recorte */
  .faixa { height: clamp(230px, 38vh, 300px); }

  /* Um único retrato no interlúdio — mantém o respiro sem miniaturizar */
  .galeria__grade   { grid-template-columns: 1fr; }
  .galeria__item--a,
  .galeria__item--c { display: none; }
  .galeria__item--b { max-width: 340px; margin-inline: auto; }

  /* Rodapé */
  .contato { font-size: var(--fs-body); }

  /* Botão flutuante menor, fora do caminho do polegar */
  .fab { width: 3.1rem; height: 3.1rem; }
}


/* =========================================================================
   CELULAR PEQUENO  ·  ≤ 380px
   ========================================================================= */
@media (max-width: 380px) {

  :root { --gutter: 1.1rem; }

  .contato__text { font-size: 0.92rem; word-break: break-word; }
}


/* =========================================================================
   PONTEIRO GROSSO (toque) — hover não deve "grudar"
   ========================================================================= */
@media (hover: none) {

  .arch:hover img,
  .galeria__item:hover img,
  .hero__frame--detalhe:hover img { transform: none; }

  .card--problema:hover,
  .card--beneficio:hover { transform: none; box-shadow: none; }

  .card--problema:hover  { background: var(--on-dark-faint); border-color: var(--line-light); }
  .card--beneficio:hover { background: rgba(253, 243, 233, 0.12); border-color: rgba(253, 243, 233, 0.26); }

  .pillar:hover           { border-color: var(--line); }
  .pillar:hover > *       { transform: none; }
  .step:hover .step__text { transform: none; }
  .step:hover .step__line { width: 0; }

  /* No toque o :hover fica preso depois do tap. Sem isto, o rótulo e o
     ícone congelariam no meio da troca e o botão ficaria ilegível. */
  .btn:hover { transform: none; }
  .btn:hover::before { transform: translate3d(0, 100%, 0); }
  .btn:hover::after  { transform: translateX(-130%); }

  .btn:hover .btn__label > span { transform: none; }
  .btn:hover .btn__label::after { transform: translateY(105%); }

  .btn:hover .btn__icon svg:nth-child(1) { transform: none; }
  .btn:hover .btn__icon svg:nth-child(2) { transform: translate3d(0, calc(100% + 3px), 0); }
}


/* =========================================================================
   IMPRESSÃO
   ========================================================================= */
@media print {

  .site-header, .fab, .galeria, .faixa,
  .hero__decor, .section__glow,
  .beneficios__pattern, .site-footer__pattern { display: none !important; }

  body { background: #fff; color: #000; }

  .section, .hero, .site-footer {
    padding-block: 1.5rem;
    background: #fff !important;
    color: #000 !important;
  }

  .display, .display em, .lead, .card__text, .section__kicker,
  .step__text, .contato, .pillar__text { color: #000 !important; }

  .card { border: 1px solid #999 !important; }

  .arch, .galeria__item { box-shadow: none; border-radius: 0; }
  .arch::after, .galeria__item::after { display: none; }

  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.7rem; }
}