/* ============================================================================
   border-ds-patterns.css — camada de LAYOUT dos Patterns (cap.4)
   ----------------------------------------------------------------------------
   Folha fina: SÓ estrutura de página (scaffolds de composição). Não tem
   componente visual — tudo o que pinta vem de border-ds-base/components.css.
   Os patterns são montados 100% com instâncias .ds-* + estes wrappers .ds-pat-*.

   Convenção: espaçamento/cor sempre por token; px literal só p/ DIMENSÃO
   estrutural (largura de rail, trilhos de grade, max-width de leitura) — onde
   não há token de design correspondente.
   Canônica em CONTEUDO/MARCA/KIT/TOKENS/. NÃO editar as cópias dos sites
   (artefato do sync-ds.py). Carregar DEPOIS de components.
   ============================================================================ */

:root{
  --ds-pat-max: 1280px;       /* largura máx. do conteúdo centralizado            */
  --ds-pat-read: 760px;       /* coluna de leitura (Article/Landing/Pricing)      */
  --ds-pat-rail: 220px;       /* largura do rail de app (espelha .ds-sidenav)     */
  --ds-pat-filters: 260px;    /* largura do rail de filtros (PLP/Search)          */
  --ds-pat-aside: 380px;      /* resumo do pedido (Checkout/Cart)                 */
}

/* ── Casca de página: header/footer full-bleed + miolo que cresce ──────────── */
.ds-pat{
  display:flex; flex-direction:column;
  min-height:100%;
  background:var(--color-brand-secondary);              /* branco da marca       */
}
.ds-pat__body{ flex:1 0 auto; display:flex; flex-direction:column; }

/* dentro da tela do pattern a tipografia vem das classes .ds-* (rampa) — zera a
   margem default do navegador p/ os gaps de layout ficarem exatos (8/16/24…) */
.ds-pat :is(h1,h2,h3,h4,h5,h6,p){ margin:0; }

/* header global do pattern gruda no topo ao rolar (sticky) */
.ds-pat > .ds-header{ position:sticky; top:0; z-index:20; }

/* faixa de conteúdo centralizada na régua lateral do sistema */
.ds-pat__wrap{
  width:100%; max-width:var(--ds-pat-max);
  margin-inline:auto;
  padding-inline:var(--spacing-inset-md);
}

/* ── AUTH — Sign in/up, Confirmation, 404, Empty state full ──────────────────
   Espelha a tela do Figma: coluna de 440 centrada; título (gap 8) → form
   (gap 16) → saída secundária, com a coluna espaçando os blocos em 24.        */
.ds-pat-auth{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:var(--spacing-stack-xxl) var(--spacing-inset-md);
}
/* metade do formulário (na variante split é uma das colunas) */
.ds-pat-auth__main{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:var(--spacing-stack-xxl) var(--spacing-inset-md);
}
/* coluna interna: título · form · saída — gap 24 entre blocos */
.ds-pat-auth__panel{
  width:100%; max-width:440px;
  display:flex; flex-direction:column; gap:var(--spacing-stack-xxs);
}
/* título + subtítulo, centralizados, gap 8 */
.ds-pat-auth__head{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--spacing-stack-nano); text-align:center;
}
/* o <form> propriamente: campos + ação, gap 16 */
.ds-pat-auth__form{
  display:flex; flex-direction:column; gap:var(--spacing-stack-xxxs);
}
.ds-pat-auth__forgot{ display:flex; justify-content:flex-end; }
.ds-pat-auth__alt{ display:flex; justify-content:center; }

/* variante SPLIT — formulário numa metade, mídia na outra (Sign in da border) */
.ds-pat-auth--split{ padding:0; align-items:stretch; }
.ds-pat-auth--split .ds-pat-auth__main{ flex:1; }
.ds-pat-auth--split .ds-pat-auth__media{
  flex:1; min-height:480px;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-text);                /* #212121 — placeholder de imagem */
  color:var(--color-text-helper);
}

/* ── APP SHELL — Dashboard, Settings, Profile, Payment methods ──────────────── */
.ds-pat-shell{ flex:1; display:flex; align-items:stretch; min-height:100%; }
.ds-pat-shell__rail{ flex:0 0 auto; }                  /* recebe .ds-sidenav     */
.ds-pat-shell__main{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:var(--spacing-stack-md);
  padding:var(--spacing-inset-lg);
  background:var(--color-neutral-lightest);            /* cinza de app sutil     */
}
.ds-pat-shell__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--spacing-inline-md);
}

/* ── DASH — linha de KPIs + grade de gráficos ───────────────────────────────── */
.ds-pat-dash__kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--spacing-inset-md); }
.ds-pat-dash__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--spacing-inset-md); }

/* ── PLP / Search results — rail de filtros + grade de produtos ─────────────── */
.ds-pat-plp{
  display:grid; grid-template-columns:var(--ds-pat-filters) 1fr;
  gap:var(--spacing-inline-md); align-items:start;
  padding-block:var(--spacing-stack-md);
}
.ds-pat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--spacing-inset-md); }

/* ── PDP — mídia + info ─────────────────────────────────────────────────────── */
.ds-pat-detail{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--spacing-inline-lg); align-items:start;
  padding-block:var(--spacing-stack-md);
}

/* ── CHECKOUT / CART — conteúdo + resumo do pedido ──────────────────────────── */
.ds-pat-checkout{
  display:grid; grid-template-columns:1fr var(--ds-pat-aside);
  gap:var(--spacing-inline-lg); align-items:start;
  padding-block:var(--spacing-stack-md);
}
.ds-pat-checkout__aside{ position:sticky; top:var(--spacing-inset-md); }

/* ── CONTENT — Article, Landing, Pricing (coluna de leitura) ────────────────── */
.ds-pat-content{
  max-width:var(--ds-pat-read); margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--spacing-stack-sm);
  padding-block:var(--spacing-stack-lg);
  padding-inline:var(--spacing-inset-md);
}
.ds-pat-content--wide{ max-width:var(--ds-pat-max); }

/* ── Responsivo — colapsa as grades em telas estreitas ─────────────────────── */
@media (max-width:900px){
  .ds-pat-auth--split{ flex-direction:column; }
  .ds-pat-auth--split .ds-pat-auth__media{ min-height:200px; }
  .ds-pat-shell{ flex-direction:column; }
  .ds-pat-plp,
  .ds-pat-detail,
  .ds-pat-checkout,
  .ds-pat-dash__grid{ grid-template-columns:1fr; }
  .ds-pat-dash__kpis,
  .ds-pat-grid{ grid-template-columns:repeat(2,1fr); }
}