/* Index and Program share mobile global-study artwork and country anchors.
   index-mobile.css owns the homepage's compact spacing and smaller labels.
   The homepage desktop anchors are also the authority for both phone crops;
   Program desktop retains its more specific program-fluid.css coordinates. */
/* One authoritative set of desktop country anchors, also used by the phone crop. */
:where(.v2-index, .v2-program) .rx-study .rx-destination-us { --country-x: 258; --country-y: 497; --country-width: 227; --country-height: 129; }
:where(.v2-index, .v2-program) .rx-study .rx-destination-gb { --country-x: 708; --country-y: 454; --country-width: 212; --country-height: 103; }
:where(.v2-index, .v2-program) .rx-study .rx-destination-ch { --country-x: 823; --country-y: 589; --country-width: 247; --country-height: 98; }
:where(.v2-index, .v2-program) .rx-study .rx-destination-jp { --country-x: 1179; --country-y: 561; --country-width: 148; --country-height: 103; }
:where(.v2-index, .v2-program) .rx-study .rx-destination-se { --country-x: 368; --country-y: 706; --country-width: 232; --country-height: 98; }
:where(.v2-index, .v2-program) .rx-study .rx-destination-de { --country-x: 681; --country-y: 775; --country-width: 212; --country-height: 103; }
:where(.v2-index, .v2-program) .rx-study .rx-destination-il { --country-x: 1026; --country-y: 723; --country-width: 188; --country-height: 103; }
:where(.v2-index, .v2-program) .rx-study .rx-destination-ae { --country-x: 1391; --country-y: 762; --country-width: 179; --country-height: 103; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    :is(.v2-index, .v2-program) .rx-study .rx-destination {
        transition: scale .28s ease, box-shadow .28s ease;
    }
    :is(.v2-index, .v2-program) .rx-study .rx-destination:hover {
        scale: 1.025;
        z-index: 1;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    }
}

@media (min-width: 768px) {
    /* Globe, copy, and labels share the page's 1920px scale at every desktop width. */
    .v2-index .rx-study { --map-unit: var(--desktop-unit); display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; overflow: hidden; }
    .v2-index .rx-study .rx-study-copy { grid-area: 1 / 1; align-self: start; position: relative; left: 0; width: calc(1012 * var(--desktop-unit)); max-width: none; margin: 0; padding: calc(114 * var(--desktop-unit)) 0 0 calc(195 * var(--desktop-unit)); }
    .v2-index .rx-study .rx-title, .v2-index .rx-study.rx-en .rx-title { margin-bottom: calc(19 * var(--desktop-unit)); text-align: left; }
    .v2-index .rx-study .rx-lead, .v2-index .rx-study.rx-en .rx-lead { font-size: calc(20 * var(--desktop-unit)); line-height: 2.1; text-align: left; text-wrap: initial; }
    .v2-index .rx-study .rx-study-copy > .rx-cta { display: inline-flex; min-height: calc(75 * var(--desktop-unit)); font-size: calc(31 * var(--desktop-unit)); margin: calc(33 * var(--desktop-unit)) 0 0 calc(7 * var(--desktop-unit)); }
    .v2-index .rx-study .rx-study-cta-bottom { display: none; }
    .v2-index .rx-study .rx-study-map, .v2-index .rx-study.rx-en .rx-study-map { grid-area: 1 / 1; container-type: normal; width: 100%; min-width: 0; max-width: none; left: 0; transform: none; margin-top: 0; aspect-ratio: 1920 / 943; overflow: visible; }
    .v2-index .rx-study .rx-study-art, .v2-index .rx-study.rx-en .rx-study-art { inset: 0; width: 100%; aspect-ratio: auto; }
    .v2-index .rx-study .rx-study-art > img { height: 100%; mask-image: none; object-fit: fill; }
    .v2-index .rx-study .rx-destinations { transform: none; }
    .v2-index .rx-study .rx-destination, .v2-index .rx-study.rx-en .rx-destination { display: flex; flex-direction: column; justify-content: center; left: calc(var(--country-x) * var(--map-unit)); top: calc(var(--country-y) * var(--map-unit)); width: calc(var(--country-width) * var(--map-unit)); min-height: calc(var(--country-height) * var(--map-unit)); padding: calc(10 * var(--map-unit)) calc(12 * var(--map-unit)); border-radius: calc(5 * var(--map-unit)); background: rgba(204, 223, 252, .41); }
    .v2-index .rx-study .rx-destination h3 { display: inline-flex; gap: calc(6 * var(--map-unit)); margin-bottom: calc(3 * var(--map-unit)); font-size: calc(24 * var(--map-unit)); line-height: 1.208333; letter-spacing: calc(1 * var(--map-unit)); text-shadow: 0 calc(3 * var(--map-unit)) calc(2 * var(--map-unit)) #02112f; }
    .v2-index .rx-study .rx-destination h3 img { width: calc(28 * var(--map-unit)); height: calc(19 * var(--map-unit)); object-fit: cover; }
    .v2-index .rx-study .rx-destination p { font-size: calc(20 * var(--map-unit)); line-height: 1.7; text-shadow: 0 calc(2 * var(--map-unit)) calc(3 * var(--map-unit)) #0c004d; }
    .v2-index .rx-study .rx-destination p span { white-space: normal; }
    .v2-index .rx-study.rx-en .rx-destination h3 { font-size: calc(20 * var(--map-unit)); line-height: 1.45; letter-spacing: 0; }
    .v2-index .rx-study.rx-en .rx-destination p { font-size: calc(16 * var(--map-unit)); }
}

@media (max-width: 767px) {
    :is(.v2-index, .v2-program) .rx-study { --study-px: .133333333vw; }
    :is(.v2-index, .v2-program) .rx-study .rx-title { padding-top: 0; font-family: var(--v2-font-display); font-size: calc(50 * var(--study-px)); line-height: 1.2; }
    :is(.v2-index, .v2-program) .rx-study.rx-en .rx-title { font-family: var(--v2-font-body); }
    :is(.v2-index, .v2-program) .rx-study .rx-lead { font-size: max(11px, calc(24 * var(--study-px))); line-height: 1.75; }
    :is(.v2-index, .v2-program) .rx-study .rx-study-cta-bottom {
        width: calc(623 * var(--study-px)); max-width: 100%; min-width: 0;
        min-height: max(44px, calc(85 * var(--study-px)));
        padding: calc(10 * var(--study-px)) calc(24 * var(--study-px));
        font-size: calc(38 * var(--study-px)); line-height: 1.447368;
        letter-spacing: calc(5 * var(--study-px));
    }
    :is(.v2-index, .v2-program) .rx-study.rx-en .rx-study-cta-bottom { letter-spacing: .03em; }

    /* Reuse the desktop map and country anchors. Crop only unused canvas space;
       map art and labels use the same reference pixels and scale. */
    :is(.v2-index, .v2-program) .rx-study { padding: calc(84 * var(--study-px)) 0 calc(116 * var(--study-px)); background: linear-gradient(180deg, #0d2246, #0a306b); }
    :is(.v2-index, .v2-program) .rx-study .rx-study-copy { width: calc(651 * var(--study-px)); }
    :is(.v2-index, .v2-program) .rx-study .rx-title { margin-bottom: calc(36 * var(--study-px)); }
    :is(.v2-index, .v2-program) .rx-study .rx-study-map,
    :is(.v2-index, .v2-program) .rx-study.rx-en .rx-study-map {
        --map-unit: calc(100vw / 1530);
        --map-crop-x: 150;
        --map-crop-y: 230;
        width: 100%; max-width: none; margin-top: calc(20 * var(--study-px));
        aspect-ratio: 1530 / 800; left: auto; transform: none; overflow: visible;
    }
    :is(.v2-index, .v2-program) .rx-study.rx-en .rx-study-map { aspect-ratio: 1530 / 900; }
    :is(.v2-index, .v2-program) .rx-study .rx-study-art,
    :is(.v2-index, .v2-program) .rx-study.rx-en .rx-study-art {
        inset: 0; width: 100%; height: calc(713 * var(--map-unit)); aspect-ratio: auto;
        background: url('../images/global-study-bg.webp') no-repeat;
        background-size: calc(1920 * var(--map-unit)) calc(943 * var(--map-unit));
        background-position: calc(-1 * var(--map-crop-x) * var(--map-unit)) calc(-1 * var(--map-crop-y) * var(--map-unit));
        opacity: .66;
        mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent);
    }
    :is(.v2-index, .v2-program) .rx-study .rx-study-art > img { display: none; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination,
    :is(.v2-index, .v2-program) .rx-study.rx-en .rx-destination {
        left: calc((var(--country-x) - var(--map-crop-x)) * var(--map-unit));
        top: calc((var(--country-y) - var(--map-crop-y)) * var(--map-unit));
        width: max(calc(var(--country-width) * var(--map-unit)), calc(var(--country-phone-width) * var(--study-px) + 1px));
        padding: 0; border-radius: 0;
    }
    :is(.v2-index, .v2-program) .rx-study .rx-destination h3,
    :is(.v2-index, .v2-program) .rx-study.rx-en .rx-destination h3 { align-items: flex-start; font-size: calc(22 * var(--study-px)); line-height: 1.3; gap: calc(7 * var(--study-px)); margin-bottom: calc(3 * var(--study-px)); }
    :is(.v2-index, .v2-program) .rx-study .rx-destination h3 img { width: calc(28 * var(--study-px)); height: calc(19 * var(--study-px)); flex: 0 0 auto; object-fit: cover; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination p { font-size: max(7px, calc(16 * var(--study-px))); line-height: 1.45; }
    :is(.v2-index, .v2-program) .rx-study.rx-en .rx-destination h3 { font-size: calc(18 * var(--study-px)); }
    :is(.v2-index, .v2-program) .rx-study.rx-en .rx-destination p { font-size: calc(14 * var(--study-px)); line-height: 1.35; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination-us { --country-phone-width: 180; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination-gb { --country-phone-width: 176; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination-ch { --country-phone-width: 164; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination-jp { --country-phone-width: 100; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination-se { --country-phone-width: 136; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination-de { --country-phone-width: 132; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination-il { --country-phone-width: 146; }
    :is(.v2-index, .v2-program) .rx-study .rx-destination-ae { --country-phone-width: 128; }
    :is(.v2-index, .v2-program) .rx-study .rx-study-cta-bottom { margin: calc(34 * var(--study-px)) auto 0; }

}