/* CPT popup — the card itself. Figma "Pop-Up", node 33-9, cards A centred and B split.

   Everything is scoped under #popup.cil-popup-modal, the marker class frontend-trigger.js adds only
   when the CPT popup opens. The same #popup element also serves the site's video lightbox and the
   legacy dialog, and both must keep the look they already have.

   The legacy rules this overrides live in css/styles-rtl.css around line 637 — a 360px white box
   with 30px/40px padding, centred text and a boxed 350x250 image. They are not edited there: the
   legacy popup still reads them. They are answered here instead, inside the marker class.

   Every colour is a brand token. The Figma palette and the theme's tokens are the same six values:
     #FCFCFC --cil-white   #323333 --cil-black          #91C653 --cil-green
     #1F2020 --cil-black-dark-4    #606262 --cil-black-regular-7   #444646 --cil-black-regular-10
     #205B62 --cil-blue-dark-1     #F2FAFB --cil-blue-light-1 */

#popup.cil-popup-modal {
    --cil-card-width: 480px;
    --cil-card-radius: 24px;
    --cil-card-pad: 32px;
    --cil-card-media: 220px;
    /* 64px of air above and below on a desktop, 24px on a phone. dvh, not vh: on a phone the
       browser's own chrome is part of the viewport and vh would size the card behind it. */
    --cil-card-max: calc(100dvh - 128px);
}

/* ---- the card ---------------------------------------------------------------------------- */

/* .popupContent is the card. Making the legacy wrapper the card — rather than nesting a new box
   inside it — is what puts .popupClose, its sibling, inside the rounded clip, which is where the
   design draws it and what lets it be revealed by that clip. */
#popup.cil-popup-modal .popupContent {
    width: min(var(--cil-card-width), calc(100vw - 32px));
    max-width: none;
    margin: 0;
    /* The legacy rule offsets the centre by 16px to leave room for a scrollbar that this card,
       which scrolls internally, does not have. */
    left: 50%;
    border-radius: var(--cil-card-radius);
    background: var(--cil-white);
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 24px 64px rgba(50, 51, 51, 0.24);
}

/* The legacy inner box caps its own height and scrolls the whole dialog. The card scrolls only its
   body, so the cap moves inward and this element gets out of the way. */
#popup.cil-popup-modal #popupInner {
    max-height: none;
    overflow: visible;
}

#popup.cil-popup-modal .autoPopupBody {
    display: block;
    max-width: none;
    padding: 0;
    background: transparent;
    color: var(--cil-black-dark-4);
    text-align: start;
    font-size: 16px;
    line-height: 1.2;
}

/* The theme lays the slider's track out as flex with a 12px gap. Slick sizes slides by arithmetic —
   track width equals slide count times slide width — and that arithmetic has no room for a gap, so
   every slide is squeezed narrower than the slot it was measured for. The picture then stops short
   of the card's edges by the difference, which is the opposite of the full bleed the design asks
   for. The gap is removed rather than the flex: the track is a filmstrip, and its panels abut. */
#popup.cil-popup-modal .slick-track { gap: 0; }

/* The slide is the card's own three bands, stacked.
   `!important` on the display, and only there: slick writes `display: inline-block` as an inline
   style on every slide it manages, which no stylesheet rule can outrank. Without this the slide is
   never a flex container, so the split card cannot put its panels side by side and the height cap
   below has nothing to cap — both fail silently, looking merely like the rules had not been written. */
#popup.cil-popup-modal .cil-popup-card__slide {
    display: flex !important;
    flex-direction: column;
    max-height: var(--cil-card-max);
    padding: 0;
    /* Sizes to its own content. Stretching every page to the tallest made the card reserve room a
       page does not use — a page with no picture kept the picture's height as blank space instead
       of simply being a shorter card. The card follows the page on show; frontend-trigger.js turns
       on the slider's adaptive height so the dialog resizes as pages turn. */
    flex: 0 0 auto;
}
#popup.cil-popup-modal .slick-track { align-items: flex-start; }
#popup.cil-popup-modal .slick-slide { height: auto; }
#popup.cil-popup-modal .slick-slide > div { display: flex; }

/* ---- media ------------------------------------------------------------------------------- */

/* Fixed at the top and never scrolling, so the picture stays put while a long body moves under it.
   It may shrink, though, and it is the first thing asked to. On a short viewport — a phone held
   sideways — the cap on the card is less than the picture's height plus the button beneath it, and
   something has to give. Better a shorter picture than a call to action pushed past the card's
   edge and clipped, which is what a picture that refused to shrink produced. */
#popup.cil-popup-modal .cil-popup-card__media {
    flex: 0 1 auto;
    height: var(--cil-card-media);
    min-height: 0;
    overflow: hidden;
}
#popup.cil-popup-modal .cil-popup-card__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: 0;
}

/* ---- content --------------------------------------------------------------------------- */

/* Takes whatever height the picture leaves, so the button below it lands in the same place on
   every page instead of riding up under a shorter body. */
#popup.cil-popup-modal .cil-popup-card__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--cil-card-pad);
    min-height: 0;                    /* lets the scroll region actually shrink */
    /* border-box, or the padding is added to the 100% rather than taken out of it: the content box
       becomes wider than the card, the button hangs past its edge, and the text stops wrapping
       where it should because it has been handed room the card does not have. */
    box-sizing: border-box;
    width: 100%;
    padding: var(--cil-card-pad);
}

/* The one band that scrolls, and the one that absorbs the slack. The text stays at the top of it
   and the actions stay pinned below, so a page with less to say shows more space rather than a
   button halfway up the card. */
#popup.cil-popup-modal .cil-popup-card__scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Everything in the block hangs off the reading start — the right edge in Hebrew, the left in
   English. `flex-start` and `start` are already direction-aware, so the mirror needs no second rule.
   The Figma frame expresses the same thing as `items-end`, because its own flow is left-to-right
   with right-to-left text inside; translating that literally puts the chip on the wrong edge. */
#popup.cil-popup-modal .cil-popup-card__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    text-align: start;
    /* Sits against the bottom of the body, so the text meets the button at the same height on every
       page. Without this a page missing a title starts its description where the title would have
       been, and the reader watches the copy jump up the card as they page through.
       An auto margin only spends free space, so when the body is long enough to scroll it resolves
       to zero and the text goes back to starting at the top — no unreachable content above. */
    margin-block-start: auto;
}

#popup.cil-popup-modal .cil-popup-card__kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--cil-blue-light-1);
    color: var(--cil-blue-dark-1);
    font-family: 'Assistant-SemiBold', 'Assistant', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

#popup.cil-popup-modal .cil-popup-card__headline {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
#popup.cil-popup-modal .cil-popup-card__title {
    margin: 0;
    color: var(--cil-black-dark-4);
    font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif;
    font-size: 32px;
    line-height: 1.2;
}
#popup.cil-popup-modal .cil-popup-card__desc,
#popup.cil-popup-modal .cil-popup-card__desc p {
    margin: 0;
    color: var(--cil-black-regular-7);
    font-size: 16px;
    line-height: 1.4;
    /* pre-line, as the legacy rule had it: descriptions written before the field became rich text
       carry bare newlines, and those are the author's paragraph breaks. Collapsing them would run
       their text together. */
    white-space: pre-line;
}
#popup.cil-popup-modal .cil-popup-card__desc p + p { margin-top: 8px; }

/* ---- the facts row ----------------------------------------------------------------------- */

/* The three facts sit together at the reading edge, not spread across the card. The gap is a touch
   wider than the design's 11px: at that value the icon of one fact crowds the value of the next,
   because each fact is itself an icon-and-value pair with its own 10px inside it. */
#popup.cil-popup-modal .cil-popup-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding: 5px 0;
    color: var(--cil-black-regular-10);
}
#popup.cil-popup-modal .cil-popup-card__metaItem {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: 'Assistant-SemiBold', 'Assistant', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}
#popup.cil-popup-modal .cil-popup-card__metaIcon {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    transform: none;                  /* the legacy rule nudges these icons down 2px */
}

/* ---- actions ----------------------------------------------------------------------------- */

/* Pinned: outside the scroll region, so the call to action is always reachable.
   The extra top padding sits the button a little lower than the body's own 32px rhythm, giving it
   room of its own rather than reading as the last line of the text. It costs 8px of card height —
   far less than the 52px the removed second dismissal gave back — so the card is still shorter
   than it was. */
#popup.cil-popup-modal .cil-popup-card__actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 0;
}

#popup.cil-popup-modal .cil-popup-card__ctaWrap { width: 100%; padding: 0; }

#popup.cil-popup-modal .cil-popup-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    /* The theme does not reset anchors to border-box, so `width: 100%` plus side padding measured
       48px wider than the band and the pill hung over the card's edge. */
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 56px;
    padding: 0 24px;
    border-radius: 999px;
    background: var(--cil-green);
    color: var(--cil-black-dark-4);
    font-family: 'Assistant-Bold', 'Assistant', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    /* The bloom below is a circle wider than the pill; the pill's own radius is what clips it. */
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
#popup.cil-popup-modal .cil-popup-card__ctaLabel {
    position: relative;
    z-index: 1;
    display: block;
}
#popup.cil-popup-modal .cil-popup-card__cta:focus-visible {
    outline: 3px solid var(--cil-blue-dark-1);
    outline-offset: 3px;
}

/* Light sweep — a specular band crosses the pill once on hover.
   The green is never repainted: the button reads as lit rather than refilled, which keeps it an
   object rather than a state. Deliberately not the site's Bubble Coloring — those four rising
   circles are already on the close button in this same card, and a second set on the button below
   would read as an echo rather than a second idea. */
#popup.cil-popup-modal .cil-popup-card__cta::after {
    content: '';
    position: absolute;
    top: -50%;
    /* Physical, not logical: this is light crossing a surface, and light does not flip with the
       reading direction. */
    left: -70%;
    width: 52%;
    height: 200%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        color-mix(in srgb, var(--cil-white) 30%, transparent) 28%,
        color-mix(in srgb, var(--cil-white) 82%, transparent) 50%,
        color-mix(in srgb, var(--cil-white) 30%, transparent) 72%,
        transparent 100%
    );
    transform: skewX(-18deg) translateX(0);
    pointer-events: none;
    z-index: 0;
}
#popup.cil-popup-modal .cil-popup-card__cta:hover::after,
#popup.cil-popup-modal .cil-popup-card__cta:focus-visible::after {
    /* Repeats for as long as the pointer stays. Stopping after one pass left the button inert
       under a pointer that had not moved on. */
    animation: cil-popup-cta-sweep 1.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Half the cycle is the pass, half is the wait. The band crosses in the same 0.85s it always did;
   the hold that follows is what keeps a repeat from reading as a strobe — back to back, the sheen
   stops looking like light crossing the button and starts looking like the button flashing. */
@keyframes cil-popup-cta-sweep {
    0%   { transform: skewX(-18deg) translateX(0); }
    50%  { transform: skewX(-18deg) translateX(360%); }
    100% { transform: skewX(-18deg) translateX(360%); }
}

#popup.cil-popup-modal .cil-popup-card__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--cil-green) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    #popup.cil-popup-modal .cil-popup-card__cta,
    #popup.cil-popup-modal .cil-popup-card__cta::after { transition: none; animation: none; }
    /* The pointer still gets an answer, just not a moving one. */
    #popup.cil-popup-modal .cil-popup-card__cta:hover {
        transform: none;
        box-shadow: none;
        background: var(--cil-green-regular-5);
    }
}

/* ---- B, the split card ------------------------------------------------------------------- */

/* One card, two panels. Below the breakpoint the panels stack and the card is A again — a 440px
   picture beside 440px of text has nowhere to go on a phone. */
@media (min-width: 900px) {
    /* Set on #popup, which is above .popupContent — the element that has to grow. frontend-trigger.js
       puts the class there on open, because the layout is only known from the markup inside. */
    #popup.cil-popup-modal.is-split { --cil-card-width: 880px; }

    /* row-reverse, so the picture sits on the far side of the reading direction — left of a Hebrew
       card, as the design draws it. It also puts the picture under the close button, which is
       pinned to that same corner: in plain `row` the button lands on the text panel and collides
       with the chip. */
    #popup.cil-popup-modal .cil-popup-card--split .cil-popup-card__slide {
        flex-direction: row-reverse;
        align-items: stretch;
        min-height: 460px;
    }
    /* The picture takes half the card and its full height. */
    #popup.cil-popup-modal .cil-popup-card--split .cil-popup-card__media {
        flex: 0 0 50%;
        height: auto;
        align-self: stretch;
    }
    #popup.cil-popup-modal .cil-popup-card--split .cil-popup-card__content {
        flex: 1 1 50%;
        justify-content: center;
        padding: 40px;
    }
    /* With no picture there is no second panel, so the card returns to A's width. */
    #popup.cil-popup-modal .cil-popup-card--split .cil-popup-card__slide.is-imageless {
        min-height: 0;
    }
}

/* ---- narrow ------------------------------------------------------------------------------ */

@media (max-width: 560px) {
    #popup.cil-popup-modal {
        --cil-card-pad: 20px;
        --cil-card-media: 180px;
        --cil-card-max: calc(100dvh - 48px);
    }
    #popup.cil-popup-modal .popupContent { width: calc(100vw - 24px); }
    #popup.cil-popup-modal .cil-popup-card__title { font-size: 24px; }
    #popup.cil-popup-modal .cil-popup-card__meta { gap: 11px; }
    #popup.cil-popup-modal .cil-popup-card__metaItem { font-size: 13px; gap: 8px; }
    #popup.cil-popup-modal .cil-popup-card__metaIcon { width: 18px; height: 18px; }
}