/* ==========================================================================
   RioGrafica · Desenhos tecnicos do configurador
   59 ilustracoes vetoriais, 164 × 96, tres valores de azul.

   Depende de tokens.css: os --color-drawing-* vivem la, na seccao de
   desenho. Cada var() dentro dos SVG leva o hex como fallback, por isso os
   desenhos resistem a folha nao carregar — mas deixam de responder a paleta.
   O enqueue declara riografica-tokens como dependencia.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. O DESENHO

   Tamanho nativo 164 × 96. A altura e fixa porque e ela que mantem o cartao
   de opcao nos 184 (96 de media + 88 de texto); a largura cede quando o
   contentor e mais estreito, e o viewBox reduz o desenho proporcionalmente,
   centrado no slot.

   max-inline-size impede o desenho de crescer acima do tamanho nativo: foi
   calculado para 164 × 96 e amplia-lo engorda os tracos sem acrescentar
   informacao.
   -------------------------------------------------------------------------- */
.dt {
  display: block;
  inline-size: 100%;
  max-inline-size: 164px;
  block-size: 96px;
  flex: 0 1 auto;
  min-inline-size: 0;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   2. DENTRO DO CONFIGURADOR

   O configurador.css tem `.rg-cfg__media svg { width:32px; height:32px }`,
   escrito para o icone de reserva. Essa regra e (0,1,1) e apanharia tambem
   os desenhos, que sairiam a 32 × 32 dentro de um slot de 96.

   Esta e (0,2,0) — duas classes — e ganha. Nao se mexe no configurador.css:
   a regra do icone continua certa para o icone.

   `color: initial` porque a mesma regra pinta o icone com currentColor em
   text-tertiary; os desenhos trazem as cores nos proprios tokens.
   -------------------------------------------------------------------------- */
.rg-cfg__media .dt {
  inline-size: 100%;
  max-inline-size: 164px;
  block-size: 96px;
  color: initial;
}

/* --------------------------------------------------------------------------
   3. O CONTENTOR TEM DE DEIXAR ENCOLHER

   Um item de grelha ou de flex tem tamanho minimo automatico igual ao seu
   min-content — e o min-content do cartao e a largura do desenho. Com o
   desenho fixo em 164, o cartao ganha um chao de 166 (164 + 2 de borda) e
   uma grelha de duas colunas a 342 de largura util transborda.

   O `.rg-cfg__op` ja traz min-width:0 do configurador.css. As outras
   entradas sao para o markup que ainda nao existe: o frame «facto», uma
   celula de tabela, um widget HTML do Elementor.
   -------------------------------------------------------------------------- */
.rg-cfg__media,
.option-card,
.option-card__media,
.dt-slot {
  min-inline-size: 0;
}

/* --------------------------------------------------------------------------
   4. ESTADO DESATIVADO

   A ilustracao e ilustracao, nao informacao. O que carrega o significado e o
   contorno tracejado do cartao e o atributo, nao a opacidade — a cor sozinha
   nao pode transportar informacao (WCAG 1.4.1).

   O configurador ja baixa `.rg-cfg__op--sem .rg-cfg__media` para 0.45; aqui
   fica so o caso de um desenho solto fora de um cartao.
   -------------------------------------------------------------------------- */
.option-card[aria-disabled="true"] .dt,
.dt--disabled {
  opacity: .4;
}

/* --------------------------------------------------------------------------
   5. IMPRESSAO
   Em papel nao ha tokens: forcar os valores e manter o contorno.
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --color-drawing-object:   #000;
    --color-drawing-diff:     #000;
    --color-drawing-material: #e8e8e8;
    --color-drawing-paper:    #fff;
  }
}

/* --------------------------------------------------------------------------
   6. ALTO CONTRASTE
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .dt path,
  .dt rect,
  .dt ellipse {
    stroke: CanvasText;
  }
}