/* ── Our Locations ──────────────────────────────────────────────────────────
   The whole section is vector — no raster images anywhere. One inline SVG
   carries the map of India, the connectors and the six office pins;
   each card's landmark medallion is inline line art.

   The pins are placed from real coordinates. The map artwork (@svg-maps/india,
   612×696) is a Mercator projection, so latitude/longitude convert with:

       x = 20.9241 · lon − 1426.6406
       y = 837.3401 − 1199.8781 · ln(tan(45° + lat/2))

   which reproduces every state outline to well under a pixel. Pin positions
   in the markup come straight out of that, e.g. Kochi (9.9312 N, 76.2673 E)
   → (169.2, 628.3). Adding an office means running the same two lines.

   The SVG viewBox is widened to -400 … 1012 so the connectors can run out
   under the floating cards on either side of the map on desktop; on smaller
   screens those gutters are cropped away and the cards stack underneath.   */

#locations-section {
    --loc-ink: #475569;
    --loc-line: #E2E8F0;
}

/* ── Stage: map underneath, floating cards on top ──────────────────────── */
.loc-stage {
    position: relative;
    margin: 0 auto;
    max-width: 1200px;
}

.loc-map-frame {
    position: relative;
}

.loc-map {
    display: block;
    width: 100%;
    height: auto;
}

/* State shapes. Kept pale so the connectors and pins stay the loudest thing
   on the map. */
.loc-state {
    fill: #F2F6FE;
    stroke: #D1DBFE;
    stroke-width: 1.5;
    transition: fill .25s ease, stroke .25s ease;
}

.loc-state:hover {
    fill: #E4ECFE;
    stroke: #A9C1FB;
}

/* ── Connectors ────────────────────────────────────────────────────────────
   Card edge → elbow → pin. Each one inherits its city colour inline.      */
.loc-link {
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Pins ─────────────────────────────────────────────────────────────────
   Every pin is a <g> translated to its map coordinate, so everything inside
   is drawn around a local (0,0). fill-box keeps the CSS transforms centred
   on the pin instead of on the viewBox origin.                            */
.loc-pin__disc {
    stroke: #fff;
    stroke-width: 2;
}

.loc-pin__ring {
    fill: none;
    transform-box: fill-box;
    transform-origin: center;
    animation: loc-pulse 3s ease-out infinite;
}

.loc-pin__ring--outer {
    animation-delay: .5s;
}

.loc-pin__label {
    font-family: var(--font-inter, 'Poppins', sans-serif);
    font-size: 13px;
    font-weight: 700;
    fill: #fff;
    text-anchor: middle;
    pointer-events: none;
}

.loc-pin__body {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .25s ease;
}

.loc-pin:hover .loc-pin__body {
    transform: scale(1.18);
}

@keyframes loc-pulse {

    0%,
    100% {
        transform: scale(.86);
        opacity: .55;
    }

    50% {
        transform: scale(1.14);
        opacity: .12;
    }
}

/* ── Cards ────────────────────────────────────────────────────────────────
   --loc / --loc-tint / --loc-wash are set per card in the markup; every rule
   below reads them, so a city's colour lives in exactly one place.        */
.loc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 2px solid var(--loc);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 32px -20px rgba(15, 50, 90, .45);
    text-align: left;
    transition: transform .3s ease, box-shadow .3s ease;
}

.loc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 38px -18px rgba(15, 50, 90, .5);
}

/* Landmark medallion */
.loc-card__badge {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid var(--loc-tint);
    background: var(--loc-wash);
    color: var(--loc);
}

.loc-card__badge svg {
    width: 46px;
    height: 46px;
}

.loc-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.loc-card__num {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--loc);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.loc-card__city {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--loc);
}

.loc-card__body {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.loc-card__pin {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin-top: 1px;
    color: var(--loc);
}

.loc-card__lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10.5px;
    line-height: 1.35;
    color: var(--loc-ink);
}

.loc-card__lines p {
    margin: 0;
}

.loc-card__lines .loc-card__mail {
    word-break: break-word;
}

/* ── Desktop: cards float either side of the map ──────────────────────────
   Card centres sit at 150 / 350 / 550 of the 696-unit viewBox, which is
   where the connectors' horizontal runs end — 150/696 = 21.55% and so on.
   Offices are numbered north to south, so the columns alternate: odds left,
   evens right. That reads 1-6 across the rows and keeps every card on the
   side its pin sits — Shillong, the only office in the northeast, stays on
   the right instead of dragging a connector across the whole map.         */
@media (min-width: 1024px) {
    .loc-card {
        position: absolute;
        width: min(320px, 28%);
        transform: translateY(-50%);
    }

    .loc-card:hover {
        transform: translateY(-50%) scale(1.02);
    }

    .loc-card--1,
    .loc-card--2 {
        top: 21.55%;
    }

    .loc-card--3,
    .loc-card--4 {
        top: 50.29%;
    }

    .loc-card--5,
    .loc-card--6 {
        top: 79.02%;
    }

    .loc-card--1,
    .loc-card--3,
    .loc-card--5 {
        left: 0;
    }

    .loc-card--2,
    .loc-card--4,
    .loc-card--6 {
        right: 0;
    }
}

/* ── Tablet and below ─────────────────────────────────────────────────────
   The connector gutters are useless once the cards stack, so the SVG is
   scaled up and pulled left until India alone fills the frame, with the
   gutters clipped off. 215% × (612/1412) = 93% of the frame for the map,
   and -57.5% + 215% × (400/1412) leaves that 7% split evenly either side.
   The frame itself is capped so the map can't tower over the cards.      */
@media (max-width: 1023.98px) {
    .loc-map-frame {
        max-width: 520px;
        margin: 0 auto;
        overflow: hidden;
    }

    .loc-map {
        width: 215%;
        margin-left: -57.5%;
    }

    .loc-link {
        display: none;
    }

    /* Pins shrink with the crop, so give them back some size. */
    .loc-pin__body {
        transform: scale(1.35);
    }

    .loc-pin:hover .loc-pin__body {
        transform: scale(1.5);
    }

    .loc-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 28px;
    }

    .loc-card {
        align-items: flex-start;
    }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
    .loc-cards {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Tap prompt ───────────────────────────────────────────────────────── */
.loc-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 14px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    color: #94a3b8;
}

.loc-hint svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* ── Phones: the card is a callout on the pin ─────────────────────────────
   Six stacked cards under the map turned the section into a long scroll of
   near-identical boxes, so below 640px only the tapped office shows — as a
   card floating beside its own dot, with an arrow back to it. Nothing dims
   the page and nothing locks the scroll: the map stays readable around it.

   `top`/`left`/`--loc-arrow` are written by js/modules/locations.js from the
   pin's measured position, so the geometry lives in one place and survives
   the map's phone crop.                                                    */
/* The dismiss control belongs to the phone callout only — at every other
   width the six cards are permanent furniture with nothing to close. */
.loc-card__close {
    display: none;
}

@media (max-width: 639.98px) {
    .loc-cards {
        position: absolute;
        inset: 0;
        z-index: 5;
        /* The stacked-list gutter would push this layer off the stage box the
           JS measures against. */
        margin-top: 0;
        /* Only the open card takes taps; the rest of the layer stays porous
           so the pins underneath keep working. */
        pointer-events: none;
    }

    .loc-card {
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        width: min(268px, calc(100vw - 32px));
        gap: 10px;
        padding: 10px 30px 10px 10px;
        pointer-events: auto;
    }

    .loc-card.is-active {
        display: flex;
        /* No fill-mode: the card settles on its own resting style, so the
           JS-written top/left are never frozen out by the animation. */
        animation: loc-card-in .2s ease-out;
    }

    /* Touch has no hover, but a tap leaves the state stuck on some browsers —
       and a lifted callout would drift off its arrow. */
    .loc-card:hover {
        transform: none;
    }

    .loc-card__badge {
        width: 52px;
        height: 52px;
    }

    .loc-card__badge svg {
        width: 34px;
        height: 34px;
    }

    /* Arrow back to the dot. `--loc-arrow` is the pin's centre measured from
       the card's left edge, so it keeps pointing even once the card has been
       clamped away from the pin to stay on screen. */
    .loc-card.is-active::after {
        content: '';
        position: absolute;
        left: var(--loc-arrow, 50%);
        width: 12px;
        height: 12px;
        margin-left: -6px;
        background: #fff;
        border: 0 solid var(--loc);
        /* Centred on the card's edge: the outer half is the arrow, the inner
           half is what hides the length of border it grew out of. */
        transform: rotate(45deg);
    }

    /* Two adjacent sides of the square become the arrow's two edges once it is
       turned 45°. Written at the same specificity as the rule above, or its
       `border` shorthand would put all four sides back and draw a diamond. */
    .loc-card.is-active.loc-card--below::after {
        top: -6px;
        border-width: 2px 0 0 2px;
    }

    .loc-card.is-active.loc-card--above::after {
        bottom: -6px;
        border-width: 0 2px 2px 0;
    }

    .loc-card__close {
        position: absolute;
        top: 7px;
        right: 7px;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--loc-wash);
        color: var(--loc);
        cursor: pointer;
    }

    .loc-card__close svg {
        width: 12px;
        height: 12px;
    }

    .loc-pin {
        cursor: pointer;
    }

    /* The open pin stays lifted so it reads as the source of the card. */
    .loc-pin.is-active .loc-pin__body {
        transform: scale(1.55);
    }

    .loc-pin.is-active .loc-pin__ring {
        animation: none;
        opacity: .8;
    }

    .loc-hint {
        display: flex;
    }
}

@keyframes loc-card-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* Invisible tap target around each pin. `transparent` still paints, so the
   circle catches the touch that the 46px pin body might miss. */
.loc-pin__hit {
    fill: transparent;
    pointer-events: all;
}

/* Chrome paints an `outline: auto` box on a focused SVG group even for a
   pointer tap, so the ring is dropped and redrawn on the disc — where it
   follows the pin's shape — for keyboard focus only. */
.loc-pin:focus {
    outline: none;
}

.loc-pin:focus-visible .loc-pin__disc {
    stroke: #0f172a;
    stroke-width: 3;
}

@media (prefers-reduced-motion: reduce) {

    .loc-pin__ring {
        animation: none;
        opacity: .45;
    }

    .loc-card,
    .loc-pin__body,
    .loc-state {
        transition: none;
    }

    .loc-card.is-active {
        animation: none;
    }
}