/* ==========================================================================
   CTA COM O ASSESSOR — asr-
   Retrato, frase em primeira pessoa, nome, cargo, dois botões e o selo de
   disponibilidade concedido pelo relógio.
   Tokens usados: --bg --fg --fg-2 --fg-muted --rule --rule-2 --accent
                  --display --radius-media --radius-pill
   Parafuso local:
     --asr-foco   enquadramento do retrato (object-position)
   ========================================================================== */

.asr-card{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  max-inline-size:980px;margin-inline:auto;
  border:1px solid var(--rule);border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--fg) 4%,var(--bg));
  overflow:hidden;
}

.asr-foto{position:relative;min-block-size:340px}
.asr-img{
  position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  object-position:var(--asr-foco,30% 30%);
}

.asr-corpo{
  display:grid;align-content:center;gap:20px;
  padding:clamp(28px,4vw,56px);
}

/* O selo nasce vazio e o CSS o apaga: sem script, nenhum "disponível". O
   estado vai por extenso; o ponto repete, nunca substitui. */
.asr-estado:empty{display:none}
.asr-estado{
  display:inline-flex;align-items:center;gap:9px;justify-self:start;
  font-size:12px;letter-spacing:.04em;color:var(--fg-muted);
  border:1px solid var(--rule-2);border-radius:var(--radius-pill);padding:6px 12px;
}
.asr-estado::before{content:"";inline-size:7px;block-size:7px;border-radius:50%;background:var(--rule-2)}
.asr-card[data-aberto="sim"] .asr-estado{color:var(--fg)}
.asr-card[data-aberto="sim"] .asr-estado::before{background:var(--accent)}

.asr-frase{
  font-family:var(--display);font-weight:600;
  font-size:clamp(21px,2.2vw,30px);line-height:1.3;letter-spacing:-.018em;
  color:var(--fg);text-wrap:pretty;
}
.asr-quem{display:grid;gap:3px}
.asr-nome{font-size:15px;color:var(--fg)}
.asr-cargo{font-size:12.5px;letter-spacing:.04em;color:var(--fg-muted)}
.asr-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

@media(max-width:760px){
  .asr-card{grid-template-columns:1fr}
  .asr-foto{min-block-size:0;aspect-ratio:4 / 3}
}