/**
 * Panneaux métiers.
 *
 * Préfixe : .lenain-metiers-panneaux
 *
 * Une carte = un panneau gris contenant une plaque (pictogramme + intitulé) et
 * un visuel, puis une accroche sous le panneau.
 *
 * Deux présentations : `--bandeau` coiffe le panneau d'un aplat rose et réduit
 * le lien à l'intitulé (l'accueil) ; `--sobre` s'en passe et rend toute la
 * carte cliquable (les pages intérieures).
 *
 * Tout le décor est en pseudo-éléments : le pictogramme de la plaque, l'aplat
 * anthracite qui couvre le visuel au survol et le grand pictogramme blanc qui
 * s'y superpose. Le contenu éditable ne porte que le texte et la photo.
 */

/*
 * Titre de section, optionnel : absent sur l'accueil, présent sur « Qui
 * sommes-nous ». La maquette le cale sur l'axe des autres h2 de la page —
 * la colonne de contenu standard (géométrie du .lenain-container : 1280 de
 * boîte, gouttières comprises) — pendant que la grille, elle, garde le
 * débord du conteneur large. Le carré rose glisse d'autant pour rester à
 * 30px du texte, aligné sur celui des autres h2.
 */
.lenain-metiers-panneaux__title-section {
    width: 100%;
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto 40px;
    padding-inline: var(--lp-container-padding);
}

.lenain-metiers-panneaux__title-section.lenain-section-title::before {
    left: calc(var(--lp-container-padding) - 30px);
}

/*
 * Retraits de la carte. Un seul repère horizontal — celui du visuel — auquel
 * la plaque et l'accroche s'alignent ; les valeurs de la maquette (32px) sont
 * les bornes hautes, atteintes dès le desktop, et fondent vers ce repère sur
 * les petits écrans, où chaque pixel de largeur compte.
 */
.lenain-metiers-panneaux {
    --lp-metiers-inset: 16px;
    --lp-metiers-pad-inline: clamp(var(--lp-metiers-inset), 2.5vw, 32px);
    --lp-metiers-pad-top: clamp(20px, 2.5vw, 32px);
    --lp-metiers-pad-bottom: clamp(16px, 1.9vw, 24px);

    /*
     * Complément de descente du rose sous la tête. Nul tant que la grille tient
     * sur plusieurs colonnes : là, le pseudo-élément du panneau descend déjà
     * plus bas que la tête et commande seul la hauteur du bandeau.
     */
    --lp-metiers-rose-descente: 0px;
}

.lenain-metiers-panneaux__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/*
 * La carte entière est le lien, dans les deux déclinaisons. Elle l'était déjà
 * sur les pages intérieures ; sur l'accueil, seul l'intitulé portait le lien,
 * étiré par un élément de couverture calé en absolu. Cet élément s'ancrait en
 * réalité sur la tête du panneau, seule positionnée au-dessus de lui : la zone
 * cliquable s'arrêtait donc au bandeau rose, et l'aplat du visuel ne répondait
 * pas. Confier le lien à la carte supprime le problème à sa racine plutôt que
 * de corriger une ancre.
 */
.lenain-metiers-panneaux__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--wp--preset--color--text);
    text-decoration: none;
}

/* ---------------------------------------------------------------- Panneau */

/*
 * Le panneau est le repère du lien étiré, et la surface que le bandeau rose
 * vient teinter. `isolation` lui donne son propre plan d'empilement : le
 * bandeau peut alors passer derrière le contenu sans disparaître sous le fond.
 */
.lenain-metiers-panneaux__panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--bg);
    border-radius: var(--lp-radius-lg);
    overflow: hidden;
}

/*
 * Bandeau rose du haut. Il est fait de deux surfaces exactement de la même
 * couleur, calées l'une comme l'autre sur le bord haut du panneau et sur toute
 * sa largeur : leur réunion est donc un seul rectangle, sans raccord ni
 * surépaisseur possible (les deux aplats sont opaques).
 *
 * — le fond de la tête garantit, par construction, que l'intitulé est toujours
 *   sur du rose, quelle que soit sa hauteur (une ligne ou trois) ;
 * — le pseudo-élément du panneau fait descendre le rose derrière le visuel :
 *   la photo paraît posée par-dessus l'aplat. C'est lui qui commande la
 *   hauteur en desktop, où il dépasse la tête.
 *
 * `__head::after` complète le second sur les écrans étroits, où la tête
 * devient plus haute que ces 26 % : la descente derrière le visuel ne dépend
 * plus de la hauteur du panneau et existe à toutes les largeurs.
 */
.lenain-metiers-panneaux--bandeau .lenain-metiers-panneaux__panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 26%;
    background: var(--wp--preset--color--rose);
}

.lenain-metiers-panneaux__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: var(--lp-metiers-pad-top) var(--lp-metiers-pad-inline) var(--lp-metiers-pad-bottom) var(--lp-metiers-inset);
}

.lenain-metiers-panneaux--bandeau .lenain-metiers-panneaux__head {
    background: var(--wp--preset--color--rose);
}

/*
 * Prolongement du rose sous la tête. `background: inherit` reprend la couleur
 * de la tête à l'identique, et le z-index négatif le place dans le même plan
 * que le pseudo-élément du panneau : derrière le visuel, jamais devant.
 */
.lenain-metiers-panneaux--bandeau .lenain-metiers-panneaux__head::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    z-index: -1;
    width: 100%;
    height: var(--lp-metiers-rose-descente);
    background: inherit;
}

/* Plaque blanche portant le pictogramme bichrome du métier. */
.lenain-metiers-panneaux__badge {
    display: inline-flex;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: var(--lp-radius-sm);
    background: var(--wp--preset--color--white);
    background-image: var(--lp-metier-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 32px 32px;
}

/*
 * Le titre de carte est un H2 pour la structure Hn de l'accueil, mais tout le
 * style reste sur l'ancre : le H2 est rendu transparent pour que le visuel ne
 * bouge pas d'un pixel.
 */
.lenain-metiers-panneaux__heading {
    margin: 0;
    font: inherit;
}

/* Les intitulés passent souvent sur deux lignes : on les équilibre plutôt que
   de laisser un mot seul en bas. */
.lenain-metiers-panneaux__heading,
.lenain-metiers-panneaux__title {
    text-wrap: balance;
}

.lenain-metiers-panneaux__title {
    color: var(--wp--preset--color--titre);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
}

/*
 * Sur l'aplat rose, l'intitulé passe en blanc — et Y RESTE : au survol, le
 * lien de la carte rosit (`:root :where(a:hover)`), rose sur rose. La
 * déclinaison couvre donc tous les états, pulse automatique compris.
 */
.lenain-metiers-panneaux--bandeau .lenain-metiers-panneaux__title,
.lenain-metiers-panneaux--bandeau .lenain-metiers-panneaux__card:hover .lenain-metiers-panneaux__title,
.lenain-metiers-panneaux--bandeau .lenain-metiers-panneaux__card:focus-visible .lenain-metiers-panneaux__title {
    color: var(--wp--preset--color--white);
}

/* ----------------------------------------------------------------- Visuel */

.lenain-metiers-panneaux__media {
    position: relative;
    display: block;
    aspect-ratio: 5 / 6;
    min-width: 0;
    margin: 0 var(--lp-metiers-inset) var(--lp-metiers-inset);
    border-radius: var(--lp-radius-sm);
    overflow: hidden;
}

.lenain-metiers-panneaux__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

/* Aplat anthracite qui couvre le visuel. */
.lenain-metiers-panneaux__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--wp--preset--color--anthracite);
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Grand pictogramme blanc, posé par-dessus l'aplat. */
.lenain-metiers-panneaux__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 96px;
    height: 96px;
    margin: auto;
    background-color: var(--wp--preset--color--white);
    -webkit-mask: var(--lp-metier-icon-solid) center / contain no-repeat;
    mask: var(--lp-metier-icon-solid) center / contain no-repeat;
    opacity: 0;
    transition: opacity 0.35s ease 0.12s;
    pointer-events: none;
}

/*
 * Deux déclencheurs pour le même état : le survol (ou le focus clavier) et la
 * classe posée par view.js. La zone sensible dépend de la présentation : le
 * panneau entier sur l'accueil, le seul visuel sur les pages intérieures.
 *
 * Le focus et la classe valent partout — le clavier et la révélation au
 * défilement ne sont pas réservés au desktop ; le survol, lui, n'est écrit que
 * pour les appareils qui pointent, sans quoi un simple appui le laisserait
 * collé sur la carte touchée.
 */
.lenain-metiers-panneaux__card:focus-visible .lenain-metiers-panneaux__media::before,
.lenain-metiers-panneaux__media.is-active::before,
.lenain-metiers-panneaux__card:focus-visible .lenain-metiers-panneaux__media::after,
.lenain-metiers-panneaux__media.is-active::after {
    opacity: 1;
}

@media (hover: hover) {
    .lenain-metiers-panneaux--bandeau .lenain-metiers-panneaux__panel:hover .lenain-metiers-panneaux__media::before,
    .lenain-metiers-panneaux--sobre .lenain-metiers-panneaux__media:hover::before,
    .lenain-metiers-panneaux--bandeau .lenain-metiers-panneaux__panel:hover .lenain-metiers-panneaux__media::after,
    .lenain-metiers-panneaux--sobre .lenain-metiers-panneaux__media:hover::after {
        opacity: 1;
    }
}

/* --------------------------------------------------------------- Accroche */

.lenain-metiers-panneaux__text {
    padding: var(--lp-metiers-pad-bottom) var(--lp-metiers-pad-inline) 0;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.65;
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
    /*
 * Titre de section, optionnel : absent sur l'accueil, présent sur « Qui
 * sommes-nous ». La maquette le cale sur l'axe des autres h2 de la page —
 * la colonne de contenu standard (géométrie du .lenain-container : 1280 de
 * boîte, gouttières comprises) — pendant que la grille, elle, garde le
 * débord du conteneur large. Le carré rose glisse d'autant pour rester à
 * 30px du texte, aligné sur celui des autres h2.
 */
.lenain-metiers-panneaux__title-section {
    width: 100%;
    max-width: var(--wp--style--global--content-size);
    margin: 0 auto 40px;
    padding-inline: var(--lp-container-padding);
}

.lenain-metiers-panneaux__title-section.lenain-section-title::before {
    left: calc(var(--lp-container-padding) - 30px);
}

    /*
     * Une seule colonne : la tête peut désormais dépasser les 26 % du panneau
     * (intitulé sur deux lignes à côté de la plaque). Le rose prend alors sa
     * hauteur, et ce complément lui rend sa descente derrière le visuel.
     */
    .lenain-metiers-panneaux {
        --lp-metiers-rose-descente: clamp(16px, 2.2vw, 28px);
    }

    /*
     * Les cartes s'enfilent les unes sous les autres : il leur faut l'air d'une
     * petite section pour qu'on les lise comme trois blocs distincts et non
     * comme une colonne continue.
     */
    .lenain-metiers-panneaux__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--lp-section-gap-xs);
    }

    /*
     * Le visuel garde le cadrage portrait de la maquette (5/6, hérité du
     * desktop) ; seul un plafond de hauteur l'empêche de devenir démesuré
     * quand la carte occupe toute la largeur d'une tablette. Le cadrage
     * s'élargit donc progressivement avec la carte, jusqu'à retrouver à
     * 1024px la proportion paysage qu'il avait déjà à cette largeur.
     */
    .lenain-metiers-panneaux__media {
        max-height: 560px;
    }
}