/* ============================================================
   VILELA CT — components.css
   Botões, quadro da semana, cards com foto, planos, FAQ.
   Redesign minimalista: linha-fio, ângulo reto, foto em P&B.
   ============================================================ */
@layer components {

  /* ---------- botões ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    min-block-size: var(--touch-min); padding-inline: var(--sp-5);
    border-radius: var(--radius-sm);
    font-weight: 600; font-size: 0.95rem; text-decoration: none;
    border: var(--hairline) solid var(--border); color: var(--text);
    background: transparent;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
  }
  .btn:hover { border-color: var(--text); }
  .btn:active { transform: translateY(1px); }
  .btn--primario { background: var(--vivo-500); border-color: var(--vivo-500);
    color: var(--ink-900); font-weight: 700; }
  .btn--primario:hover { background: var(--vivo-600); border-color: var(--vivo-600); color: var(--ink-900); }
  .btn svg { inline-size: 1.1rem; block-size: 1.1rem; }

  /* ---------- fotografia ---------- */
  .foto { margin: 0; position: relative; }
  .foto img {
    display: block; inline-size: 100%; block-size: auto;
    object-fit: cover; background: var(--ink-800);
  }
  .foto--retrato img { aspect-ratio: var(--ratio-retrato); }
  .foto--paisagem img { aspect-ratio: var(--ratio-paisagem); }
  .foto figcaption {
    margin-block-start: var(--sp-2);
    font-family: var(--font-mono); font-size: var(--fs-label);
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--text-subtle);
  }

  /* ---------- QUADRO DA SEMANA ---------- */
  .quadro {
    container-type: inline-size;
    background: var(--bg-elevated);
    border: var(--hairline) solid var(--border);
    border-radius: var(--radius-sm);
  }
  .quadro__agora {
    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
    border-block-end: var(--hairline) solid var(--border);
  }
  .quadro__pulso {
    inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--radius-pill);
    background: var(--ok); flex: none;
    animation: pulso 2s var(--ease) infinite;
  }
  .quadro__agora[data-estado="fechado"] .quadro__pulso { background: var(--warn); animation: none; }
  .quadro__agora[data-estado="vazio"]   .quadro__pulso { background: var(--steel-400); animation: none; }
  @keyframes pulso { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 25%, transparent); } }
  @media (prefers-reduced-motion: reduce) { .quadro__pulso { animation: none; } }
  .quadro__agora .label { color: var(--text-muted); }
  .quadro__agora strong { font-family: var(--font-mono); font-weight: 500; font-size: 1rem; }

  .quadro__dias { display: grid; }
  .quadro__dia { border-block-end: var(--hairline) solid var(--border); }
  .quadro__dia:last-child { border-block-end: 0; }
  .quadro__dia > h3 {
    font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    color: var(--text-subtle);
    padding: var(--sp-3) var(--sp-5) 0;
  }
  .quadro__dia[data-hoje="1"] > h3 { color: var(--vivo-500); }
  .quadro__slots { list-style: none; padding: var(--sp-2) var(--sp-5) var(--sp-3); display: grid; gap: 2px; }
  .quadro__slot {
    display: grid; grid-template-columns: 7.5rem 1fr auto; gap: var(--sp-3);
    align-items: baseline; padding-block: var(--sp-1);
  }
  .quadro__slot time { font-family: var(--font-mono); font-size: 0.9rem;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  .quadro__slot .aula { font-weight: 600; font-size: 0.95rem; }
  .quadro__slot .sala { font-family: var(--font-mono); font-size: var(--fs-label);
    letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-subtle); }
  .quadro__slot[data-agora="1"] .aula { color: var(--vivo-500); }
  .quadro__slot[data-agora="1"] time { color: var(--vivo-500); }
  .quadro__vazio { padding: var(--sp-5); color: var(--text-muted); }
  .quadro__vazio p { font-size: 0.95rem; }
  @container (max-width: 30rem) {
    .quadro__slot { grid-template-columns: 6.4rem 1fr; }
    .quadro__slot time { font-size: 0.8rem; }
    .quadro__slot .sala { display: none; }
  }

  /* ---------- cards de modalidade com foto ---------- */
  .cards { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
  .card { display: grid; gap: var(--sp-3); align-content: start; }
  .card .foto { border-block-end: 3px solid var(--vivo-500); }
  .card h3 { font-size: var(--fs-h3); }
  .card .num {
    justify-self: start;
    font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
    letter-spacing: var(--tracking-label);
    background: var(--vivo-500); color: var(--ink-900);
    padding: var(--sp-1) var(--sp-2);
  }
  .card p { color: var(--text-muted); font-size: 0.95rem; max-inline-size: var(--measure); }

  /* ---------- planos ---------- */
  .planos { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); align-items: stretch; }
  .plano {
    background: var(--bg-elevated); border: var(--hairline) solid var(--border);
    border-radius: var(--radius-sm); padding: var(--sp-6) var(--sp-5) var(--sp-5);
    display: grid; gap: var(--sp-4); align-content: start;
  }
  .plano--destaque { border-color: var(--vivo-500); border-width: 2px; }
  .plano__etiqueta {
    justify-self: start;
    font-family: var(--font-mono); font-size: var(--fs-label);
    letter-spacing: var(--tracking-label); text-transform: uppercase;
    background: var(--vivo-500); color: var(--ink-900);
    padding: var(--sp-1) var(--sp-2);
  }
  .plano h3 { font-size: var(--fs-h3); }
  .plano__preco { display: flex; align-items: baseline; gap: var(--sp-2); }
  .plano__preco .dado { font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2.25rem, 4.5vw, 3.25rem); letter-spacing: var(--tracking-display); }
  .plano__preco span:not(.dado) { color: var(--text-subtle); font-size: 0.9rem; }
  .plano ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
  .plano li { display: flex; gap: var(--sp-3); color: var(--text-muted); font-size: 0.95rem;
    padding-block: var(--sp-3); border-block-start: var(--hairline) solid var(--border); }
  .plano li::before { content: "—"; color: var(--text-subtle); flex: none; }
  .plano .btn { justify-self: start; }

  /* ---------- prova / números ---------- */
  .numeros { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .numeros .label { margin-block-start: var(--sp-1); display: block; }

  /* ---------- FAQ: lista editorial em linha-fio ---------- */
  .faq { display: grid; max-inline-size: 46rem; }
  .faq details { border-block-start: var(--hairline) solid var(--border); }
  .faq details:last-child { border-block-end: var(--hairline) solid var(--border); }
  .faq summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: baseline; gap: var(--sp-4);
    padding-block: var(--sp-4);
    font-weight: 600; min-block-size: var(--touch-min);
  }
  .faq summary .q {
    font-family: var(--font-mono); font-size: var(--fs-label);
    letter-spacing: var(--tracking-label); color: var(--text-subtle);
    flex: none;
  }
  .faq summary .pergunta { flex: 1; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+"; font-family: var(--font-mono); color: var(--text-subtle);
    font-size: 1.2rem; transition: rotate var(--dur-base) var(--ease);
  }
  .faq details[open] summary::after { rotate: 45deg; }
  .faq details > p { padding-block-end: var(--sp-4); color: var(--text-muted);
    max-inline-size: var(--measure); }

  /* ---------- contato ---------- */
  .contato { display: grid; gap: var(--sp-6); }
  @media (min-width: 56rem) { .contato { grid-template-columns: 1.1fr 1fr; } }
  .contato dl { display: grid; gap: 0; margin: 0; align-content: start; }
  .contato dl > div { padding-block: var(--sp-4); border-block-start: var(--hairline) solid var(--border); }
  .contato dt { font-family: var(--font-mono); font-size: var(--fs-label);
    letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-subtle); }
  .contato dd { margin: var(--sp-1) 0 0; font-size: var(--fs-body-lg); }
  .contato dd a { color: var(--text); text-decoration: underline;
    text-underline-offset: 0.2em; text-decoration-color: var(--vivo-500); }
  .contato dd a:hover { color: var(--vivo-500); }
  .pendente { color: var(--text-subtle); font-style: normal; }
}