/* ===================================================
   CATÁLOGO DE ESTILOS — página (marca Kannon)
   Sobre o Padrão Kannon (_sistema/). Só o específico da
   página de catálogo + os cards de estilo.
   =================================================== */

:root { --font-jp: "Noto Serif JP", serif; }

/* kanji assinatura (marca Kannon — pode aparecer aqui, é página da Kannon) */
.jp { font-family: var(--font-jp); font-weight: 500; color: var(--brand); }

/* ---- HERO do catálogo ---- */
.cat-hero { padding-block: clamp(3.5rem, 3rem + 5vw, 6.5rem) var(--sp-7); text-align: center; }
.cat-hero .k-container { max-width: 760px; }
.cat-hero h1 { font-size: var(--text-3xl); line-height: 1.05; letter-spacing: -0.025em;
  text-wrap: balance; margin: 0 0 var(--sp-5); }
.cat-hero h1 em { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--brand-ink); }
.cat-hero p { color: var(--ink-soft); font-size: var(--text-lg); margin: 0 auto; max-width: 56ch; text-wrap: pretty; }

/* ---- GRID de estilos ---- */
.cat-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 920px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cat-grid { grid-template-columns: 1fr; } }

/* ---- CARD de estilo ---- */
.ec {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur, .3s) var(--ease-out, ease), box-shadow var(--dur, .3s) ease, border-color var(--dur, .3s) ease;
}
.ec:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: oklch(0.84 0.02 70); }

/* preview: faixa com a paleta do estilo + nome da persona na fonte do estilo */
.ec__preview {
  position: relative; display: grid; place-items: center; min-height: 150px;
  text-decoration: none; padding: var(--sp-5);
  background:
    linear-gradient(135deg, var(--c1) 0%, var(--c1) 55%, var(--c2) 55%, var(--c2) 100%);
  color: var(--c3);
}
.ec__persona {
  font-family: var(--ec-font, var(--font-display)); font-size: var(--text-lg);
  font-weight: 600; letter-spacing: -0.01em; text-align: center; line-height: 1.1;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.ec__paleta { position: absolute; bottom: var(--sp-3); right: var(--sp-3); display: flex; gap: 4px; }
.ec__paleta i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }

.ec__body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); flex: 1; }
.ec__tag { font-size: var(--text-label); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-mute); }
.ec__nome { font-size: var(--text-md); margin: 0; }
.ec__desc { color: var(--ink-soft); font-size: var(--text-base); margin: 0; flex: 1; text-wrap: pretty; }
.ec__exemplo { font-size: var(--text-sm); color: var(--ink-mute); margin: 0; }
.ec__exemplo b { color: var(--ink-soft); }
.ec .k-btn { margin-top: var(--sp-2); }

/* estado "em breve" */
.ec--soon .ec__preview { filter: saturate(.5); }
.ec__soon { display: inline-flex; align-items: center; align-self: flex-start; margin-top: var(--sp-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-mute);
  border: 1px dashed var(--line); border-radius: var(--r-pill); padding: .4rem .9rem; }

/* fita "exemplo" no topo dos demos (usada nas páginas de cada estilo) */
.demo-ribbon {
  position: sticky; top: 0; z-index: 95;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3);
  background: var(--ink); color: var(--paper);
  padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); text-align: center;
}
.demo-ribbon a { color: var(--brand); font-weight: 600; text-decoration: none; }
.demo-ribbon a:hover { text-decoration: underline; }
.demo-ribbon .sep { opacity: .4; }