/* ============================================================
   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-xl) var(--space-xl) 0;
    align-self: start;
  }

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

  /* 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 */
  & :is(.category__image, .article__image) {
    grid-column: 2;
    grid-row: 1 / -1;
    position: relative;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }
}

/* 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) */
:is(.category__image--has-image, .article__image--has-image) {
  & img {
    position: relative;
    z-index: 0;
  }

  &::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;
  }
}

.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é — illustration, pas photo plein-cadre */
  .article__image {
    display: flex;
    align-items: center;
    justify-content: center;

    /* SVG décoratif sans figure (fallback "pas de logo") : plein cadre avec marge interne */
    & > img {
      object-fit: contain;
      width: 100%;
      height: 100%;
      padding: var(--space-2xl);
    }

    /* 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;
  }
}