// Styles spécifiques à page-view.
// Le gros du style "fiche de jeu" vient du partial global `styles/_view.scss`.

// Conteneur des champs dynamiques.
// - Sans mise en page (hasLayout=false) : `display: contents` -> les sections
//   se comportent EXACTEMENT comme avant (enfants visuels directs de .view-page,
//   empilées, bordures de séparation gérées par _view.scss). Aucun changement.
// - Avec mise en page : grille 12 colonnes ; chaque section est placée via
//   [style.grid-column] / [style.grid-row]. On neutralise alors les bordures
//   top (un séparateur horizontal n'a pas de sens entre blocs côte-à-côte).
.view-fields {
  display: contents;

  // Grille 2D fidèle : largeur (colonnes) ET hauteur (lignes de 32px = GRID_ROW_HEIGHT)
  // honorées. Chaque bloc remplit sa cellule ; le contenu trop grand défile.
  &.view-fields--grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 32px;   // = GRID_ROW_HEIGHT (block-layout.helper.ts)
    gap: 4px;
    align-items: stretch;

    .view-section {
      display: flex;
      flex-direction: column;
      border-top: none;
      padding: 0.5rem 0.75rem;
      overflow: auto;
      min-height: 0;

      // L'image (et autres contenus extensibles) remplit la hauteur restante.
      app-image-block { flex: 1 1 auto; min-height: 0; }
    }
  }
}

// Depuis que les champs vivent dans `.view-fields`, la première section "meta"
// (tags / pages liées / notes privées) devient `:first-of-type` parmi les
// enfants directs de `.view-page` et perdrait sa bordure de séparation héritée
// de _view.scss. On la lui restitue (scopé à page-view, sans impact sur
// arc/chapter/scene-view qui n'ont pas ce wrapper).
.view-page > .view-section:first-of-type {
  border-top: 1px solid #1e1e3a;
  padding-top: 1.25rem;
}

// Repli mobile : la grille se réempile en une colonne.
@media (max-width: 820px) {
  .view-fields.view-fields--grid {
    display: block;
  }
}