/*
 * aieo/popup-panel — the split popup layout.
 *
 * ── The breakpoint is 768px and must stay 768px ──────────────────────────────
 * AIEO_DMM_Promo_Surfaces::render_picture() emits <source media="(max-width:767px)">
 * and <source media="(min-width:768px)">. If this stylesheet stacked at any other
 * width there would be a band of viewports showing the PORTRAIT image inside the
 * LANDSCAPE pane (or the reverse). One number, two places, same value.
 *
 * Loaded via block.json `style`, which WordPress inlines for block themes — so
 * edits here take effect without npm run build (unlike assets/css/*.css, which
 * is served as its .min twin).
 */

.aieo-popup-panel {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: var(--aieo-pop-w, 940px);
    max-width: 100%;
    min-height: var(--aieo-pop-h, 470px);
    background: var(--aieo-pop-bg, #232323);
    color: var(--aieo-pop-fg, #fff);
}

.aieo-popup-panel--right { grid-template-columns: 1fr var(--aieo-pop-media-w, 360px); }
.aieo-popup-panel--left  { grid-template-columns: var(--aieo-pop-media-w, 360px) 1fr; }
.aieo-popup-panel--left .aieo-popup-panel__media { order: -1; }

.aieo-popup-panel--top,
.aieo-popup-panel--none,
.aieo-popup-panel--no-media { grid-template-columns: 1fr; }
.aieo-popup-panel--top .aieo-popup-panel__media { order: -1; height: var(--aieo-pop-media-h, 200px); }

.aieo-popup-panel__body {
    display: flex;
    flex-direction: column;
    min-width: 0; /* let long words wrap instead of widening the grid track */
    padding: 52px 56px;
}

.aieo-popup-panel__media {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: #1b1b1b;
}
/* Absolute + object-fit reproduces `center/cover no-repeat` while keeping a
   real <img>, so the browser still gets intrinsic dimensions and fetchpriority. */
.aieo-popup-panel__media picture,
.aieo-popup-panel__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aieo-popup-panel :focus-visible {
    outline: 2px solid var(--aieo-pop-accent, #b7d21d);
    outline-offset: 2px;
}

/* ── Optional utility classes ────────────────────────────────────────────────
   Applied from the block editor's "Additional CSS class(es)" field, and wired
   up for you by the "Popup — split media" starter pattern. They exist so the
   design language lives in CSS instead of in hand-typed inline styles on every
   popup. */

/* The headline. This class is why the pattern no longer hard-codes font-size,
   weight, line-height and colour as inline styles on the h2: those inline values
   were unreachable from CSS, so they could not be made responsive and could not
   be defended against a theme. font-size stays overridable (no !important), so
   the editor's size control still works when a headline needs to be shorter or
   longer than the design assumes. */
.aieo-popup-title {
    color: var(--aieo-pop-fg, #fff);
    font-size: var(--aieo-pop-title-fs, 38px);
    font-weight: var(--aieo-pop-title-weight, 300);
    letter-spacing: var(--aieo-pop-title-ls, .02em);
}

.aieo-popup-eyebrow {
    margin: 0;
    color: var(--aieo-pop-accent, #b7d21d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.aieo-popup-rule {
    height: 2px;
    margin: 30px 0 24px;
    border: 0;
    background: color-mix(in srgb, var(--aieo-pop-fg, #fff) 16%, transparent);
}

.aieo-popup-cta .wp-block-button__link,
a.aieo-popup-cta {
    display: inline-block;
    padding: 17px 30px;
    border-radius: 0;
    background: var(--aieo-pop-accent, #b7d21d);
    color: var(--aieo-pop-bg, #232323);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-decoration: none;
    transition: filter .15s ease;
}
.aieo-popup-cta .wp-block-button__link:hover,
a.aieo-popup-cta:hover { filter: brightness(.92); }

a.aieo-popup-dismiss,
.aieo-popup-dismiss a {
    color: color-mix(in srgb, var(--aieo-pop-fg, #fff) 55%, transparent);
    font-size: 12px;
    letter-spacing: .16em;
    text-decoration: none;
}
a.aieo-popup-dismiss:hover,
.aieo-popup-dismiss a:hover { color: var(--aieo-pop-fg, #fff); }

/* ── Mobile ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .aieo-popup-panel {
        grid-template-columns: 1fr;
        /* A DEFINITE length, never min(…, 100%).
           The popup shell sizes .aieo-pop__box by shrink-to-fit, so a
           percentage here resolves against a width that is itself derived from
           this element's max-content. Measured result on a 390px viewport:
           box 383.7px, panel 342px — the panel sat left-aligned inside a box
           41px wider than itself, which read as "not centred", and the close
           button (pinned to the BOX) landed 30px outside the panel.
           A length gives the box a real max-content, so box === panel. */
        width: 342px;
        max-width: 100%;
        min-height: 0;
    }
    /* The image always leads on a phone, whichever side it takes on desktop. */
    .aieo-popup-panel__media {
        order: -1;
        height: var(--aieo-pop-media-h, 200px);
    }
    .aieo-popup-panel__body { padding: 30px; }
    .aieo-popup-rule { margin: 22px 0 18px; }
    .aieo-popup-eyebrow { font-size: 10px; }
    .aieo-popup-cta .wp-block-button__link,
    a.aieo-popup-cta { display: block; padding: 16px 22px; text-align: center; }
}

/* ═════════════════════════════════════════════════════════════════════════════
   THEME-PROOF TYPOGRAPHY — everything below is ARMOUR, not look.
   ═════════════════════════════════════════════════════════════════════════════

   THE FAILURE THIS EXISTS FOR. dekko.gr runs tagDiv/Newspaper, which ships a
   global `line-height: 1 !important`. The editor writes an operator's
   line-height as an INLINE style, and an inline NORMAL declaration loses to any
   stylesheet `!important` at any specificity, so the headline collapsed and its
   two lines overlapped.

   WHY A CASCADE LAYER RATHER THAN PLAIN !important. A bare `!important` here
   sits in the SAME importance tier as the theme's, so the winner falls through
   to specificity and then source order. `.aieo-popup-panel__body :is(h1…)` is
   only (0,1,1); a theme rule such as `.td-post-content .entry h2` is (0,2,1) and
   would win. Against an unknown theme that race cannot be bounded — and WP
   Rocket's RUCSS and OM Optimizer both reorder stylesheets, so source order is
   not ours to rely on either.

   css-cascade-5 §6.1 sorts LAYERS (step 4) before SPECIFICITY (step 5), and
   REVERSES layer order for important declarations: for normal rules the last
   layer wins and unlayered counts as last; for important rules the FIRST layer
   wins and unlayered counts as last, i.e. weakest. Theme CSS is essentially
   never layered. So one `!important` inside any @layer beats every unlayered
   `!important`, whatever its selector. That deletes the specificity race
   entirely, which is the only part we could not otherwise win.

   🚨 TWO RULES BEFORE EDITING THIS BLOCK.
   1. NOTHING NORMAL-WEIGHT GOES IN HERE. The same inversion means a NORMAL
      declaration inside a layer is WEAKER than the identical one outside it. All
      base look (.aieo-popup-title, -eyebrow, -rule, -cta, -dismiss) stays above,
      unlayered, on purpose. Moving it in here would silently hand it to the
      theme.
   2. Only force what a theme actually breaks. line-height, margin and the mobile
      size cap are forced. font-size on desktop, colour, weight and letter-spacing
      are NOT: those are the controls an operator reaches for in the editor, and
      freezing them trades a broken popup for an uneditable one.

   Every value reads a custom property first, so a site needing a different
   rhythm sets one variable instead of fighting this file.

   OLD ENGINES. A browser without @layer support drops this whole at-rule, so it
   renders exactly as it did before this block existed rather than rendering
   nothing. @layer is Baseline widely available: Firefox 97 (Feb 2022),
   Chrome/Edge 99 and Safari 15.4 (Mar 2022).
   ───────────────────────────────────────────────────────────────────────────── */
@layer aieo-popup {

    /* :where() keeps specificity at zero. Against the theme that is irrelevant
       (the layer already decided it), but it means any later rule of OUR OWN
       overrides these without an escalation war. */
    .aieo-popup-panel__body :where(h1, h2, h3, h4, h5, h6) {
        margin: 0 0 var(--aieo-pop-title-gap, .18em) !important;
        line-height: var(--aieo-pop-title-lh, 1.26) !important;
        /* Cannot alter an intended design, only stops one long unbroken word
           widening the 282px mobile text column. */
        overflow-wrap: break-word !important;
    }

    .aieo-popup-panel__body :where(p) {
        line-height: var(--aieo-pop-text-lh, 1.5) !important;
        overflow-wrap: break-word !important;
    }

    /* The dismiss sits directly beneath the CTA. Core's button block carries no
       bottom margin and plenty of themes zero a paragraph's top margin, so the
       two collide: on dekko.gr "ΚΛΕΙΣΙΜΟ" sat hard against the button. */
    .aieo-popup-panel__body :where(.aieo-popup-dismiss) {
        margin: var(--aieo-pop-dismiss-gap, 18px) 0 0 !important;
    }

    @media (max-width: 767px) {
        /* The authored desktop size is almost always wrong for a 342px box:
           dekko's 38px headline needs ~336px but has 282px after padding, so it
           wrapped to four lines. This is the ONE font-size that is forced, and
           only below 768px, because popups authored before this change carry
           their size as an inline style on the h2 where no stylesheet can reach
           it. Desktop authoring is untouched. */
        .aieo-popup-panel__body :where(h1, h2, h3) {
            font-size: var(--aieo-pop-title-fs-sm, 25px) !important;
        }
        .aieo-popup-panel__body :where(.aieo-popup-dismiss) {
            margin-top: var(--aieo-pop-dismiss-gap-sm, 14px) !important;
        }
    }
}