/*
 * arquivo: public/assets/css/campo.css
 * propósito: estilos do "widget de campo" (card + container responsivo para <canvas>)
 * contexto de uso: usado pelo partial PHP app/Views/partials/campo_widget.php
 *
 * visão geral da hierarquia (simplificada):
 *   <div class="card campo-card">
 *     <div class="card-body">
 *       <div class="campo-widget">
 *         <div class="pitch-wrap [landscape|portrait]">
 *           <canvas></canvas>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 * resumo das responsabilidades:
 *   .campo-widget   → bloco de nível de widget (comportamento de layout básico)
 *   .campo-card ... → ajuste fino quando o widget está dentro de um Bootstrap .card
 *   .pitch-wrap     → CONTÊINER responsivo do canvas (controla proporção/visual)
 *   .pitch-wrap.*   → variações de orientação (landscape/portrait) via aspect-ratio
 *   .pitch-wrap>canvas → o próprio canvas ocupando 100% do contêiner
 */

/*
 * .campo-widget
 * - Mantém o widget como um bloco independente no fluxo do documento.
 * - Útil caso, em algum contexto, o wrapper herde display inline.
 */
.campo-widget {
  display: block; /* ocupa uma linha inteira e permite largura 100% */
}

/*
 * .campo-card .card-body
 * - Quando o widget é inserido dentro de um card (ex.: Bootstrap),
 *   garantimos que o body seja um "contexto de posicionamento".
 * - Isso permite posicionar overlays absolutos (ex.: botões, rótulos)
 *   relativos à área interna do card, se necessário no futuro.
 */
.campo-card .card-body {
  position: relative; /* estabelece o referencial para position:absolute filhos */
}

/*
 * .pitch-wrap
 * - Contêiner direto do <canvas>; controla dimensões visuais e estilo do quadro.
 * - width:100%   → se expande para a largura disponível do pai (ex.: .card-body).
 * - max-width:100% → impede que ultrapasse o contêiner (robustez em layouts aninhados).
 * - background:transparent → permite que o tema "transparent" do canvas seja real;
 *   o fundo visto será o do card/página.
 * - border-radius/overflow:hidden → cantos arredondados com recorte do conteúdo
 *   (o canvas não "sangra" para fora do raio).
 * - box-shadow → sombra suave para destacar o campo do restante do layout.
 * - OBS: a ALTURA é controlada por aspect-ratio nas variantes abaixo.
 */
.pitch-wrap {
  width: 100%;            /* aproveita a largura disponível do contêiner pai */
  max-width: 100%;        /* nunca ultrapassa a largura do pai */
  background: transparent;/* visual transparente por padrão (tema do canvas decide) */
  border-radius: 12px;    /* cantos arredondados, combinam com estilo de cards modernos */
  overflow: hidden;       /* recorta o conteúdo nos cantos; evita vazamento do canvas */
  box-shadow: 0 10px 40px rgba(0,0,0,.25); /* profundidade sutil */
}

/*
 * Variações de orientação: controlam a ALTURA via aspect-ratio.
 * - landscape: proporção oficial 105:68 (campo horizontal)
 * - portrait : proporção invertida 68:105 (campo vertical)
 * Por que aspect-ratio aqui?
 *   → Mantém o contêiner responsivo sem JS; o <canvas> se ajusta dentro dele.
 */
.pitch-wrap.landscape {
  aspect-ratio: 105/68; /* campo "deitado" (horizontal) */
}

.pitch-wrap.portrait  {
  aspect-ratio: 68/105; /* campo "em pé" (vertical) */
}

/*
 * .pitch-wrap > canvas
 * - Garante que o canvas ocupe toda a área do contêiner e se adapte ao ratio.
 * - display:block remove eventuais "gaps" de elementos inline (comportamento
 *   padrão de <canvas> pode causar espaçamento indesejado).
 * - A nitidez HiDPI é feita pelo JS (setDevicePixelRatio/scale); aqui apenas
 *   controlamos o "box" CSS.
 */
.pitch-wrap > canvas {
  width: 100%;  /* ajusta a largura ao contêiner responsivo */
  height: 100%; /* acompanha a altura imposta pelo aspect-ratio */
  display: block; /* elimina espaços/linhas abaixo do canvas */
}

/*
 * Notas de compatibilidade e extensões:
 * - aspect-ratio tem amplo suporte moderno. Em navegadores muito antigos,
 *   seria possível um fallback com o truque do padding-top (%), mas não é
 *   necessário na maioria dos ambientes atuais.
 * - Se o projeto usar um sistema de temas, o box-shadow/border-radius podem
 *   ser parametrizados via CSS variables (ex.: --card-radius, --elevation).
 */