/* ==========================================================
   MIRNA TRAVEL — GLOBAL SUPPORT
   Shared support banner rendered immediately before the footer
   on internal public pages (front page is intentionally excluded).

   FINAL confirmed direction (light / ice-blue, edge-to-edge,
   compact height, three-zone cinematic composition):
     support-team scene | copy + contacts + benefits | airplane window
   ========================================================== */

.mirna-global-support {
    width: 100%;
    box-sizing: border-box;
    padding-block: clamp(14px, 1.6vw, 22px);
    background: #fff;
}

.mirna-global-support *,
.mirna-global-support *::before,
.mirna-global-support *::after {
    box-sizing: border-box;
}

.mirna-global-support__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(140px, 20%) 1fr minmax(190px, 25%);
    align-items: stretch;
    width: 100%;
    height: clamp(220px, 17vw, 300px);
    overflow: hidden;
    background: linear-gradient(135deg, #f4f9ff 0%, #eaf3ff 55%, #e2f0ff 100%);
}

html[dir="rtl"] .mirna-global-support__inner {
    direction: rtl;
}

.mirna-global-support__scene,
.mirna-global-support__window,
.mirna-global-support__panel {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.mirna-global-support__scene,
.mirna-global-support__window {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.mirna-global-support__scene {
    background-image: url("../images/global/support/mirna-global-support-scene.png");
    background-image: image-set(url("../images/global/support/mirna-global-support-scene.webp") type("image/webp"), url("../images/global/support/mirna-global-support-scene.png") type("image/png"));
    /* The two agents in the source photo aren't centred: the woman sits
       around the horizontal midpoint, the man is close to the right
       edge. At narrower container ratios `cover` crops evenly from both
       sides, which was cutting into him first. Shifting the focal point
       right keeps both faces in frame instead of trimming the (empty)
       left background. Not direction-dependent, so LTR/RTL match. */
    background-position: 72% 38%;
}

.mirna-global-support__window {
    background-image: url("../images/global/support/mirna-global-support-window.jpg");
}

.mirna-global-support__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(8px, 1vw, 14px);
    overflow: hidden;
    padding: clamp(12px, 1.6vw, 22px) clamp(20px, 2.6vw, 40px);
    color: #0f2a4a;
}

html[dir="rtl"] .mirna-global-support__panel {
    text-align: right;
}

.mirna-global-support__copy {
    max-width: 640px;
}

.mirna-global-support__eyebrow {
    display: block;
    margin: 0 0 clamp(3px, .4vw, 6px);
    color: #2563eb;
    font-size: clamp(11px, .78vw, 14px);
    font-weight: 700;
    letter-spacing: .03em;
}

.mirna-global-support__title {
    max-width: 620px;
    margin: 0;
    color: #0b1f38;
    font-size: clamp(19px, 1.6vw, 30px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;
}

.mirna-global-support__subtitle {
    max-width: 560px;
    margin: clamp(4px, .6vw, 8px) 0 0;
    color: #45597a;
    font-size: clamp(11.5px, .78vw, 14.5px);
    line-height: 1.5;
}

.mirna-global-support__contacts {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(7px, .7vw, 12px);
    margin-top: clamp(4px, .5vw, 8px);
}

.mirna-global-support__contact {
    min-height: clamp(34px, 2.6vw, 42px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, .5vw, 9px);
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: clamp(11px, .74vw, 13.5px);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.mirna-global-support__contact:hover,
.mirna-global-support__contact:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.mirna-global-support__contact--whatsapp {
    background: #22ab5a;
    box-shadow: 0 8px 18px rgba(34, 171, 90, .28);
}

.mirna-global-support__contact--call {
    background: #2563eb;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .26);
}

.mirna-global-support__contact--email {
    color: #17335a;
    background: #fff;
    border-color: #cfe0f7;
}

.mirna-global-support__contact-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: clamp(15px, 1.05vw, 19px);
    height: clamp(15px, 1.05vw, 19px);
}

.mirna-global-support__contact-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mirna-global-support__benefits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(10px, 1.2vw, 20px);
    margin-top: clamp(6px, .8vw, 12px);
    color: #33486a;
    font-size: clamp(10.5px, .68vw, 12.5px);
    line-height: 1.2;
}

.mirna-global-support__benefits span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.mirna-global-support__benefits svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: #2563eb;
}

.mirna-global-support__benefits b {
    font-weight: 700;
}

/* Security page hero already sits on this pale tone; keep the banner's
   outer gutter consistent with it instead of a hard white seam. */
body:has(.security-benefits) .mirna-global-support {
    background: #e3edf6;
}

/* ---------- Tablet: keep the wide cinematic strip, but drop the
   window down to a smaller supporting accent so the panel keeps
   room to breathe. ---------- */
@media (max-width: 1100px) {
    .mirna-global-support__inner {
        grid-template-columns: minmax(120px, 22%) 1fr minmax(0, 18%);
        height: auto;
        min-height: 260px;
    }

    .mirna-global-support__panel {
        padding-block: 22px;
    }
}

/* ---------- Mobile: stack scene / copy / window, each compact. ---------- */
@media (max-width: 780px) {
    .mirna-global-support {
        padding-block: 0;
    }

    .mirna-global-support__inner {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    /* aspect-ratio (not a fixed px height) so the crop fraction produced by
       background-size:cover stays constant across the whole 360-780px
       mobile range -- a fixed height forces a much more extreme crop at
       the wide end of that range than at the narrow end (see the .bak
       from the first pass of this fix for that failure mode in detail).
       4:3 specifically -- not the source photo's own ~1.08:1 -- because
       this photo (695x642) is source-constrained horizontally: the man is
       framed right at the source photo's own right edge (confirmed by
       rendering background-size:cover's predicted crop window directly
       from the source file), so ANY container this wide relative to its
       height already shows him at 100% of the photo's width with zero
       horizontal cropping -- no aspect-ratio/position change can add more
       of him than the original photograph contains. 4:3 was chosen only
       to fix the *vertical* window: at the previous 2.6:1 it cut off the
       plane/globe above the logo text and lost the monitor entirely,
       because it showed source y~142-410 of 642. 4:3 shows y~7-528 at
       every mobile width instead -- the full logo (not just the text),
       both full faces, and the monitor's top half (workstation context),
       trading away only the mug/keyboard at the very bottom. */
    .mirna-global-support__scene {
        order: 1;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        /* Horizontally centred (2026-09-24): at 4:3 the 695x642 photo is
           scaled by `cover` to exactly the box width, so there is no
           horizontal slack and the old calc(50% - 24px) simply moved the
           whole photo 24px left -- cropping its left edge and leaving an
           empty 24px strip on the right on every phone (iOS and Android). */
        background-position: 50% 6%;
        /* The scene PNG itself carries a light 1-3px border down its left
           edge that widens into light top-left/bottom-left corners (39px
           wide on its first row). At plain `cover` the 4:3 box shows the
           image's own left edge, so that border appeared as a white strip /
           top-left gap; shifting the position only moved the gap to the
           other side. Scaling to 108% width (still centred) trims ~3.7% of
           the source from each side -- more than the light border/corner
           reaching into the visible rows -- and the height (~99.8% of the
           box width) still more than covers the 75%-high box. */
        background-size: 108% auto;
    }

    .mirna-global-support__panel {
        order: 2;
        width: 100%;
        height: auto;
        padding: 22px 20px 18px;
    }

    .mirna-global-support__window {
        order: 3;
        width: 100%;
        height: 130px;
    }

    .mirna-global-support__copy,
    .mirna-global-support__contacts,
    .mirna-global-support__benefits {
        max-width: none;
    }

    .mirna-global-support__contacts {
        flex-direction: column;
        align-items: stretch;
    }

    .mirna-global-support__contact {
        min-height: 46px;
    }

    .mirna-global-support__benefits {
        gap: 8px 16px;
    }
}

/* iPhone/mobile containment (2026-09-24): the section spans the full
   viewport and never exceeds it; its nowrap contact buttons and benefit
   chips may wrap long localized labels instead of pushing the stacked
   mobile column (and with it the photo) sideways. */
@media (max-width: 780px) {
    .mirna-global-support,
    .mirna-global-support__inner {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .mirna-global-support__scene,
    .mirna-global-support__panel,
    .mirna-global-support__window,
    .mirna-global-support__copy,
    .mirna-global-support__contacts,
    .mirna-global-support__benefits {
        min-width: 0;
        max-width: 100%;
    }

    .mirna-global-support__contact,
    .mirna-global-support__benefits span {
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }
}