/* ============================================================
   Héro — commun à toutes les pages catégorie et activité

   Grille desktop :
   ┌─────────────────────┬──────────┐
   │ ariane  (col 1 r1)  │          │
   ├─────────────────────┤  image   │
   │ info    (col 1 r2)  │ (col 2)  │
   └─────────────────────┴──────────┘
   col 1 = 1fr  |  col 2 = 40%
   ============================================================ */
.category__intro,
.article__intro {
  display: grid;
  grid-template-columns: 1fr 40%;
  grid-template-rows: auto 1fr;
  position: relative;
  overflow: hidden;
  padding: 0;
  /* Écrase .card { padding } de user.css (même spécificité, charge après) */
  &.card { padding: 0; }
  background: url('../../images/contour-logo-blanc.svg') 100px calc(100% + 350px) / auto no-repeat;
  margin: var(--space-2xl) 0;

  /* Fil d'ariane — coin supérieur gauche */
  & :is(.category__ariane, .article__ariane) {
    grid-column: 1;
    grid-row: 1;
    padding: var(--space-md) var(--space-xl) 0;
    align-self: start;
  }

  & :is(.category__titre, .article__titre) {
    margin: var(--space-lg) 0 var(--space-lg);
  }

  /* Contenu principal (titre, pills, description, CTA) — centré verticalement */
  & :is(.category__info, .article__info) {
    grid-column: 1;
    grid-row: 2;
    padding: 0 var(--space-4xl) var(--space-xl) var(--space-xl);
    align-self: center;
  }

  /* Annule figure { margin: 0 0 2em } du template core */
  & figure { margin: 0; }

  /* Image — occupe toute la hauteur de la colonne droite, centrée avec décollement */
  & :is(.category__image, .article__image) {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    & img {
      max-height: 100%;
      object-fit: contain;
      display: block;
    }
  }

  /* Décollement uniquement pour l'image par défaut (pas de vraie photo/logo) */
  & :is(.category__image:not(.category__image--has-image), .article__image:not(.article__image--has-image)) {
    padding: var(--space-xl);
  }
}

/* Cadre photo — dimensionné sur l'image réellement rendue, pas sur la cellule grid,
   pour que la frise colle toujours au bord réel de la photo (y compris quand le
   contenu de gauche dépasse la hauteur de la photo, cf. hero.css historique). */
.hero__photo {
  position: relative;
  width: 100%;
  margin: 0;

  /* Décoration forme-bordure centrée sur le bord gauche de la photo :
     moitié gauche visible dans la colonne texte,
     moitié droite masquée par l'img (l'img est au-dessus en z-order) */
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    aspect-ratio: 232 / 580;
    transform: translateX(-50%);
    background-image: url('../../images/forme-bordure.svg');
    background-size: 100% 50%;
    background-repeat: repeat-y;
    z-index: 0;
    pointer-events: none;
  }
}

/* Sélecteur qualifié par l'ancêtre : même spécificité que la règle « img » générale
   ci-dessus (2 classes + 1 élément), pour l'emporter sur max-height/object-fit:contain
   quelle que soit l'ordre de la cascade. */
:is(.category__image, .article__image) .hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

.activite .category__intro {
  margin-bottom: 0;
}

/* Fond spécifique activité : contour logo + bandeau de formes en bas à droite */
.activite .article__intro {
  background-image:
    url('../../images/contour-logo-blanc.svg'),
    url('../../images/forme-bordure.svg');
  background-position: 100px calc(100% + 350px), 100% 100%;
  background-size: auto, auto 100%;
  background-repeat: no-repeat, no-repeat;
}


/* ----------------------------------------------------------
   Héro activité — spécificités de la page activité
   ---------------------------------------------------------- */
.article__intro {

  /* Tags métiers positionnés avant le titre */
  & .result__metiers-tags {
    justify-content: flex-start;
  }

  /* Courte description sous le titre */
  .article__courte-description {
    margin-block: var(--space-s) 0;
    font-size: var(--text-h2-size);
    font-family: var(--font-heading);
    font-weight: var(--text-h1-weight);
  }

  /* Zone image : logo centré — display/padding/contain gérés par la règle générale */
  .article__image {

    /* Logo dans figure : même cercle blanc + anneau intérieur que les cards résultat */
    figure.result__image {
      background-color: var(--color-white);
      border-radius: 50%;
      padding: var(--space-xl);
      position: relative;

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-shadow: inset 0 0 0 8px var(--color-white);
      }

      & img {
        display: block;
        width: 200px;
        aspect-ratio: 1;
        object-fit: contain;
      }
    }
  }
}


/* ----------------------------------------------------------
   Tablette < 900px

   Grille :
   ┌─────────────────────────┬───────┐
   │ ariane  (col 1 r1)      │       │
   ├─────────────────────────┤ image │
   │ info    (col 1 r2)      │       │
   └─────────────────────────┴───────┘
   col 1 = 1fr (75%)  |  col 2 = 25%
   → plus de place pour les pills dans col 1
   ---------------------------------------------------------- */
@media (width < 900px) {
  .category__intro,
  .article__intro {
    grid-template-columns: 1fr 25%;

    & :is(.category__info, .article__info) {
      padding-inline: var(--space-md);
    }

    /* Réduit le padding du cercle logo pour lui laisser plus de place dans la colonne étroite */
    & figure.result__image {
      padding: var(--space-md)!important;
    }
  }
}


/* ----------------------------------------------------------
   Mobile < 640px

   Catégorie :
   ┌──────────────────┐
   │ ariane  (r1)     │
   ├──────────────────┤   image cachée
   │ info    (r2)     │
   └──────────────────┘

   Activité :
   ┌──────────────────┐
   │ ariane  (r1)     │
   ├──────────────────┤
   │ logo    (r2)     │   logo visible, centré, hauteur fixe
   ├──────────────────┤
   │ info    (r3)     │
   └──────────────────┘

   Background allégé : formes-bandeau-01.svg en haut
   ---------------------------------------------------------- */
@media (width < 640px) {
  .category__intro,
  .article__intro {
    grid-template-columns: 1fr;
    margin: var(--space-lg) 0;
    padding-inline: var(--space-sm);
    /* Écrase le &.card { padding: 0 } du desktop (même spécificité, déclaré après = gagne) */
    &.card { padding-inline: var(--space-sm); }
    background-image: none;

    & :is(.category__ariane, .article__ariane) {
      padding: var(--space-sm) 0 0;
    }

    & :is(.category__info, .article__info) {
      padding-inline: 0;
      min-width: 0; /* empêche le grid item d'élargir la colonne au-delà de 1fr */
    }

    & :is(.category__titre, .article__titre) {
      margin-block-end: var(--space-lg);
      overflow-wrap: anywhere; /* coupe les mots longs (ex: "entrepreneur·es") si nécessaire */
      text-align: center;
    }
  }

  /* Catégorie : image décorative supprimée */
  .category__intro {
    & .category__image {
      display: none;
    }
  }

  /* Activité : écrase le background double-image (spécificité plus haute que la règle partagée) */
  .activite .article__intro {
    background-image: url('../../images/formes-bandeau-01.svg');
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  /* Activité : logo repositionné entre fil d'ariane et contenu */
  .article__intro {
    grid-template-rows: auto auto auto;

    & .article__ariane { grid-row: 1; }

    & .article__image {
      display: flex;
      grid-column: 1;
      grid-row: 2;
      height: 180px;
      justify-content: center;
      align-items: center;
      

      & figure.result__image {
        & img { 
          width: 100px; }
      }
    }

    & .article__info {
      grid-row: 3;
    }

    & .result__metiers-tags {
      justify-content: center;
    }
  }

  /* Sélecteur plat : gagne sans ambiguïté sur la règle desktop imbriquée */
  .article__intro .result__metiers-tags {
    justify-content: center;
  }
}