/**
 * Popup newsletter — plugin Pilo Popup
 *
 * Le contenu de la popup est saisi dans Gutenberg (colonnes, titre, image,
 * formulaire ActiveCampaign). Deux raisons d'avoir une feuille dediee plutot
 * que d'ecrire dans `styles.css` :
 *
 * - `pilopress/assets/styles.css` est genere, reecrit a chaque compilation des
 *   styles Pilo'Press. Ces regles y seraient perdues.
 * - la mise en page reste lisible a cote du gabarit du plugin.
 *
 * Tout est porte par `.piu-newsletter`, classe posee sur le bloc Colonnes
 * depuis l'editeur : une autre popup, plus tard, ne recevra rien de tout ca.
 *
 * NOTE DE SPECIFICITE — WordPress 7 sert les feuilles des blocs coeur une par
 * une (`wp-block-columns`, `wp-block-image`), et elles sont imprimees APRES
 * celle-ci. A specificite egale c'est donc le coeur qui gagne : les regles qui
 * s'opposent aux siennes doublent la classe (`.wp-block-column.piu-…`). Le
 * reste — empilement sous 782px, `flex-basis` des colonnes — est deja fourni
 * par ces feuilles et n'est pas repris ici.
 */

/**
 * La fenetre : bord a bord, l'image touche les angles.
 *
 * Le selecteur passe par `#piu-popup` — le CSS du plugin y declare padding,
 * bordure et fond avec la specificite d'un identifiant, qu'aucune classe ne
 * peut battre. C'est l'identifiant de la popup d'origine du site, celui que le
 * plugin documente pour les themes ; le `:has()` garde la regle sans effet sur
 * les popups qui n'auraient pas ce contenu.
 */
[popover]#piu-popup:has(.piu-newsletter) {
    width: 56rem;
    max-width: calc(100vw - 2rem);
    padding: 0;
    border: 0;
    background-color: #091a3e;
}

/* Croix de fermeture : elle se pose sur le bleu nuit et sur l'image. */
[popover]#piu-popup:has(.piu-newsletter) .piu-popup__close {
    color: #fff;
}

[popover]#piu-popup:has(.piu-newsletter) .piu-popup__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* Les deux colonnes se touchent et remplissent la fenetre. */
.wp-block-columns.piu-newsletter {
    gap: 0;
    margin: 0;
}

.wp-block-column.piu-newsletter__form {
    padding: 3rem 2.5rem;
}

.wp-block-column.piu-newsletter__form > :first-child {
    margin-top: 0;
}

.wp-block-column.piu-newsletter__form h2 {
    margin: 0 0 2.5rem;
}

/**
 * Formulaire ActiveCampaign : l'habillage vient de `ac-forms-style.css`, commun
 * au site. Seule la largeur, calee sur 400px par ActiveCampaign, demande a etre
 * liberee pour occuper la colonne.
 */
.wp-block-column.piu-newsletter__form ._form {
    width: 100% !important;
    max-width: none !important;
}

/* L'image remplit sa colonne quelle que soit la hauteur du formulaire. */
.wp-block-column.piu-newsletter__media {
    display: flex;
    padding: 0;
}

.wp-block-column.piu-newsletter__media .wp-block-image {
    width: 100%;
    margin: 0;
    align-self: stretch;
}

.wp-block-column.piu-newsletter__media .wp-block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**
 * Sous 782px, les colonnes s'empilent (feuille du bloc coeur) : le formulaire
 * passe devant et l'image se reduit a un bandeau.
 */
@media (max-width: 781px) {
    .wp-block-column.piu-newsletter__form {
        padding: 2rem 1.5rem;
    }

    .wp-block-column.piu-newsletter__form h2 {
        margin-bottom: 1.5rem;
    }

    .wp-block-column.piu-newsletter__media .wp-block-image img {
        height: 9rem;
    }
}