/* ============================================================================
   KTG HUB — COMPONENTES do Design System v1 (docs/design-system/index.html)
   Carregado depois de styles.css. Aqui só entram tokens semânticos
   (--color-*, --space-*, --text-*, --radius-*, --shadow-*): nenhum número solto.
   Fase 3: botão, selo, título de seção, banner, acesso rápido e o topo/gaveta
   do celular. As telas antigas migram para cá na fase 4.
   Breakpoints do app: 820 (sidebar vira gaveta) e 560 (celular estreito).
   ============================================================================ */

/* ---- Botão ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--control-h);padding:0 var(--space-6);border:0;border-radius:var(--radius-pill);
  font:var(--weight-medium) var(--text-md)/1 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
/* Decisão de marca (21/09): texto BRANCO no laranja, em negrito (3,24:1 — ver guia) */
.btn--primary{background:var(--color-accent);color:var(--color-text-inverse);font-weight:var(--weight-bold)}
.btn--primary:hover{background:var(--color-accent-hover)}
.btn--dark{background:var(--color-text);color:var(--color-text-inverse)}
.btn--dark:hover{background:var(--color-surface-inverse)}
.btn--on-dark{background:var(--color-text-inverse);color:var(--color-text)}
.btn--on-dark:hover{background:var(--color-accent-soft)}
.btn--sm{min-height:var(--control-h-sm);padding:0 var(--space-4);font-size:var(--text-sm)}

/* ---- Selo: ponto laranja + texto ---- */
.selo{display:inline-flex;align-items:center;gap:var(--space-2);
  font:var(--weight-medium) var(--text-sm)/var(--lh-sm) var(--font);color:var(--color-text-muted)}
.selo::before{content:"";width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--color-accent)}
.selo--on-dark{color:var(--color-text-inverse-muted)}

/* ---- Título de seção ---- */
.section-title{margin:0 0 var(--space-4);font:var(--weight-bold) var(--text-lg)/var(--lh-lg) var(--font);color:var(--color-text)}

/* ---- Home: ritmo vertical entre blocos ---- */
.home{display:flex;flex-direction:column;gap:var(--space-8)}

/* ============================================================================
   BANNER — um slide por vez. A arte é FUNDO; o texto é HTML (acessível, editável).
   Os slides ficam empilhados na MESMA célula do grid: o banner assume a altura do
   maior slide e não "pula" ao trocar (no celular a altura varia com o texto).
   ============================================================================ */
.banner{position:relative;display:grid;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--color-surface-inverse);color:var(--color-text-inverse);box-shadow:var(--shadow-md)}
.banner__slide{grid-area:1/1;position:relative;aspect-ratio:8/3;display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),visibility 0s linear var(--dur)}
.banner__slide.on{opacity:1;visibility:visible;transition:opacity var(--dur) var(--ease)}
.banner__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banner__media--vazio{background:linear-gradient(120deg,var(--ktg-gray-950) 0%,var(--ktg-gray-900) 45%,var(--ktg-orange) 140%)}
/* Sem véu (decisão 24/09): a arte aparece como foi desenhada. Em troca, a ARTE precisa
   entregar a zona do texto (esquerda) em tom médio/escuro — o texto do banner é branco.
   O admin mede o contraste da arte enviada e avisa quando ela não cumpre. */
.banner__body{position:relative;z-index:1;max-width:60%;padding:var(--space-8);
  display:flex;flex-direction:column;align-items:flex-start}
.banner .selo{color:var(--color-text-inverse-muted)}
/* no desktop o banner é grande (8:3 em ~1200px): título em display e apoio em 18px,
   senão o bloco de texto fica pequeno perto da arte */
.banner__title{margin:var(--space-3) 0 0;font:var(--weight-bold) var(--text-3xl)/var(--lh-3xl) var(--font);
  max-width:24ch;text-wrap:balance}
.banner .selo + .banner__title{margin-top:var(--space-3)}
.banner__title:first-child{margin-top:0}
.banner__text{margin:var(--space-3) 0 0;font-size:var(--text-lg);line-height:var(--lh-lg);
  color:var(--color-text-inverse-muted);max-width:44ch;text-wrap:pretty}
.banner__cta{margin-top:var(--space-6)}
.banner__ctrl{position:absolute;right:var(--space-6);bottom:var(--space-6);z-index:2;
  display:flex;align-items:center;gap:var(--space-2)}
.banner__count{margin-right:var(--space-2);font-size:var(--text-sm);line-height:var(--lh-sm);
  font-variant-numeric:tabular-nums;color:var(--color-text-inverse)}
.banner__count b{font-weight:var(--weight-bold)}
.banner__nav{width:var(--control-h);height:var(--control-h);display:grid;place-items:center;border:0;border-radius:50%;
  cursor:pointer;background:rgba(255,255,255,.18);color:var(--color-text-inverse);
  font:var(--weight-regular) var(--text-xl)/1 var(--font);transition:background var(--dur-fast) var(--ease)}
.banner__nav:hover{background:rgba(255,255,255,.32)}
.banner__nav:focus-visible{outline:none;box-shadow:var(--focus-ring)}

@media (max-width:820px){
  /* celular: arte vira bloco próprio (3:2) e o texto vai para um corpo CLARO abaixo.
     O painel escuro contínuo foi testado e pesava demais na tela pequena. */
  .banner{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}
  .banner__slide{aspect-ratio:auto;flex-direction:column;align-items:stretch}
  .banner__media{position:relative;inset:auto;aspect-ratio:3/2;height:auto;object-position:right center}
  .banner__body{max-width:none;padding:var(--space-6) var(--space-4) var(--space-4)}
  .banner .selo{color:var(--color-text-muted)}
  .banner__title{font-size:var(--text-xl);line-height:var(--lh-xl);max-width:none}
  .banner__text{font-size:var(--text-md);line-height:var(--lh-md);color:var(--color-text-muted);max-width:none}
  /* no corpo claro o CTA vira o laranja da marca — o único laranja da tela */
  .banner__cta{margin-top:var(--space-4);width:100%;background:var(--color-accent);
    color:var(--color-text-inverse);font-weight:var(--weight-bold)}
  .banner__cta:hover{background:var(--color-accent-hover)}
  /* setas nas laterais da ARTE (o texto está abaixo, nada colide); contador vira etiqueta */
  .banner__ctrl{left:0;right:0;top:0;bottom:auto;aspect-ratio:3/2;padding:0 var(--space-3);
    justify-content:space-between;pointer-events:none}
  .banner__nav{pointer-events:auto;background:rgba(31,29,28,.55)}
  .banner__nav:hover{background:rgba(31,29,28,.72)}
  .banner__count{position:absolute;top:var(--space-3);right:var(--space-3);margin:0;
    padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:rgba(31,29,28,.6);
    font-size:var(--text-xs);line-height:var(--lh-xs)}
}

/* ============================================================================
   ACESSO RÁPIDO — card vertical no desktop, linha horizontal no celular
   ============================================================================ */
.atalhos{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
.atalho{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  background:var(--color-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease)}
.atalho:hover{box-shadow:var(--shadow-md)}
.atalho:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.atalho__img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--color-accent-soft)}
.atalho__body{flex:1;display:flex;flex-direction:column;padding:var(--space-4)}
.atalho__title{margin:0;font:var(--weight-bold) var(--text-lg)/var(--lh-lg) var(--font);color:var(--color-text)}
.atalho__text{flex:1;margin:var(--space-2) 0 0;font-size:var(--text-sm);line-height:var(--lh-sm);
  color:var(--color-text-muted);text-wrap:pretty}
.atalho__cta{margin-top:var(--space-4);align-self:flex-start}
.atalho:hover .atalho__cta{background:var(--color-accent)}

@media (max-width:1100px){ .atalhos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .atalhos{grid-template-columns:1fr;gap:var(--space-3)}
  .atalho{flex-direction:row}
  .atalho__img{width:96px;flex:0 0 auto;aspect-ratio:auto;height:auto;align-self:stretch}
  .atalho__body{padding:var(--space-3) var(--space-4)}
  .atalho__title{font-size:var(--text-md);line-height:var(--lh-md)}
  .atalho__cta{margin-top:var(--space-3)}
}

@media (prefers-reduced-motion:reduce){
  .banner__slide,.banner__slide.on,.atalho,.btn{transition:none}
}

/* ============================================================================
   CABEÇALHO DE PÁGINA — título + contagem (categoria, busca, Close-Up)
   ============================================================================ */
.page-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-6)}
.page-head__title{margin:0;font:var(--weight-bold) var(--text-xl)/var(--lh-xl) var(--font);color:var(--color-text);text-wrap:balance}
.page-head__count{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--color-text-muted);white-space:nowrap}

/* ============================================================================
   CARD DE ITEM — o MESMO card do "Acesso rápido" da home: capa quadrada em cima,
   título, tipo e botão. No celular vira linha (igual à home).
   Sem capa cadastrada: capa padrão da marca (tom laranja claro + ícone da
   categoria) em vez de quadro cinza. Capa ideal: 800×800 (admin › item › Capa).
   ============================================================================ */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-4)}
.item{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  background:var(--color-surface);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);transition:box-shadow var(--dur) var(--ease)}
.item:hover{box-shadow:var(--shadow-md)}
.item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.item__img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--color-accent-soft)}
.item__img--vazio{display:grid;place-items:center;color:var(--color-accent-text);
  background:linear-gradient(135deg,var(--color-accent-soft) 0%,var(--color-accent-selected) 100%)}
.item__img--vazio svg{width:56px;height:56px}
.item__body{flex:1;display:flex;flex-direction:column;padding:var(--space-4)}
.item__title{margin:0;font:var(--weight-bold) var(--text-lg)/var(--lh-lg) var(--font);color:var(--color-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item__metas{flex:1;display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-1) var(--space-3);margin-top:var(--space-2)}
.item__meta{font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--color-text-muted)}
.item .selo{font-size:var(--text-sm)}
.item__cta{margin-top:var(--space-4);align-self:flex-start}
.item:hover .item__cta{background:var(--color-accent)}
@media (hover:none){ .item:hover .item__cta, .atalho:hover .atalho__cta{background:var(--color-text)} }   /* toque: sem hover grudado */
.item__cta svg{width:16px;height:16px}

@media (max-width:560px){
  .items{grid-template-columns:1fr;gap:var(--space-3)}
  .item{flex-direction:row}
  .item__img{width:96px;flex:0 0 auto;aspect-ratio:auto;height:auto;align-self:stretch;min-height:120px}
  .item__img--vazio svg{width:36px;height:36px}
  .item__body{padding:var(--space-3) var(--space-4)}
  .item__title{font-size:var(--text-md);line-height:var(--lh-md)}
  .item__cta{margin-top:var(--space-3)}
}

/* ============================================================================
   ESTADO VAZIO
   ============================================================================ */
.vazio{margin:var(--space-12) auto;max-width:440px;padding:var(--space-8) var(--space-6);text-align:center;
  background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  font-size:var(--text-md);line-height:var(--lh-md);color:var(--color-text-muted)}
.vazio strong{display:block;margin-bottom:var(--space-1);font:var(--weight-bold) var(--text-lg)/var(--lh-lg) var(--font);color:var(--color-text)}

/* ============================================================================
   DESTINO EXTERNO — no menu (sai do hub) e a tela cheia do painel
   ============================================================================ */
.nav-fora{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-h);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-lg);color:var(--color-text-muted);
  font:var(--weight-medium) var(--text-sm)/var(--lh-sm) var(--font);overflow-wrap:anywhere;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.nav-fora:hover{background:var(--color-surface-muted);color:var(--color-text)}
.nav-fora:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.nav-fora > span:first-child{flex:0 0 auto;width:20px;display:inline-flex;align-items:center;justify-content:center}
.nav-fora__ic{margin-left:auto;color:var(--color-text-subtle);display:inline-flex}
/* ícone do App Trade Out: o desenho entra como máscara e a cor vem do texto (cinza, como os
   demais ícones do menu), em vez do azul da marca */
.ktg-ic-tradeout{display:block;width:18px;height:18px;background:currentColor;
  -webkit-mask:url(../img/icone-tradeout.svg) center/contain no-repeat;
  mask:url(../img/icone-tradeout.svg) center/contain no-repeat}

/* ============================================================================
   TOPO + GAVETA NO CELULAR (opção A aprovada 21/09)
   Logo encosta na margem esquerda; botão "Menu" — ícone E palavra, porque só o ☰
   passa despercebido para quem tem mais idade — fica à direita, do lado do polegar.
   A conta sai do topo e vai para o rodapé da gaveta.
   ============================================================================ */
.menu-lbl{display:none}
.sb-conta{display:none}
@media (max-width:820px){
  .topbar .tb-logo{order:1}
  .topbar .search{order:2}
  .topbar #menuBtn{order:3;margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-2);
    width:auto;height:var(--control-h);padding:0 var(--space-4) 0 var(--space-3);border-radius:var(--radius-pill);
    background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);color:var(--color-text)}
  .topbar #menuBtn:hover{background:var(--color-surface-muted)}
  .topbar #menuBtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
  .menu-lbl{display:inline;font:var(--weight-medium) var(--text-md)/1 var(--font)}
  .topbar .tb-actions{display:none}

  /* rodapé da gaveta com a conta */
  .sb-conta{display:flex;align-items:center;gap:var(--space-3);
    padding:var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--color-divider)}
  .sb-conta__ava{width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
    background:var(--color-accent);color:var(--color-text-inverse);font:var(--weight-bold) var(--text-xs)/1 var(--font)}
  .sb-conta__quem{flex:1;min-width:0;font-size:var(--text-sm);line-height:var(--lh-sm);color:var(--color-text-muted);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sb-conta__sair{flex:0 0 auto;min-height:var(--control-h);padding:0 var(--space-4);border:0;border-radius:var(--radius-pill);
    background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);color:var(--color-danger);cursor:pointer;
    font:var(--weight-medium) var(--text-sm)/1 var(--font)}
  .sb-conta__sair:hover{background:var(--color-danger-soft)}
  .sb-conta__sair:focus-visible{outline:none;box-shadow:var(--focus-ring)}
}
@media (max-width:560px){
  .topbar #menuBtn{order:2}
  .topbar .search{order:3}
}