/**
 * wallpaper-layout.css
 * web/themes/custom/wallpaper_ui/css/wallpaper-layout.css
 *
 * Fusion et nettoyage de :
 *   - wallpaper-layout.css (version précédente)
 *   - styles inline du document fonts.css fourni
 *
 * Supprimé : classes ex-* dupliquées (remplacées par wp-* communes),
 *             règles .group-identification obsolètes (Field Groups supprimés)
 */

/* ── Hero image ───────────────────────────────────────────────── */
.wp-hero-image {
  width: 100%;
  margin-bottom: 2rem;
}

/* Rendu via media_entity|view — cibler l'img générée par Drupal */
.wp-hero-image img,
.wp-hero-image .field--name-field-image-upload img,
.wp-hero-image .media--type-image img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 0;
}

/* Expertise : même hero, légèrement plus haut */
.node--type-ct-expertise .wp-hero-image img,
.node--type-ct-expertise .wp-hero-image .media--type-image img {
  height: 280px;
}

/* ── En-tête fiche ────────────────────────────────────────────── */
.node--ct-wallpaper header,
.node--ct-expertise header {
  margin-bottom: 1.5rem;
}

/* ── Layout deux colonnes ─────────────────────────────────────── */
/*
  Wallpaper et Expertise utilisent les mêmes classes.
  .wp-layout-two-cols remplace .ex-layout-two-cols (supprimé).
  Colonne gauche 35% : métas, expert, owner.
  Colonne droite 65% : contenu éditorial, iconographie, techniques.
*/
.wp-layout-two-cols {
  display: grid;
  grid-template-columns: 35fr 65fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 768px) {
  .wp-layout-two-cols {
    grid-template-columns: 1fr;
  }
}

/* ── Sections accordéon (wp-section) ─────────────────────────── */
/* Définies dans wallpaper-theme.css — on ajoute seulement l'espacement */
.wp-section + .wp-section,
.wp-section ~ .wp-section {
  margin-top: 1rem;
}

/* ── Meta blocks ──────────────────────────────────────────────── */
.wp-meta-block {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Masquages ciblés ─────────────────────────────────────────── */
/*
  Plus de .group-identification — Field Groups supprimés.
  Si un champ doit être masqué dans un contexte précis,
  utiliser Manage Display → "Hidden" plutôt que CSS display:none.
*/

/* ── Impression ───────────────────────────────────────────────── */
@media print {
  .wp-hero-image img,
  .wp-hero-image .media--type-image img {
    height: auto;
    max-height: 200px;
  }
  .wp-layout-two-cols {
    grid-template-columns: 1fr 1fr;
  }
  .wp-section--closed .wp-section__body {
    display: block !important;
  }
}