/* =========================================================
   GS Group - Contact section ("The Switchboard")
   Load AFTER style.css / home.css / logos.css:
   <link rel="stylesheet" href="./css/contact.css">

   Concept
   - A group with six businesses needs routing, not a blank form. The visitor
     picks what they need; a ready-written message is composed on the right and
     sent with one tap (WhatsApp, email or phone). No backend required.
   - The slanted seam between the two panes reuses the "slash" motif from the
     About gallery and the client lanes, so the section feels native to the site.
   - Branch locations are drawn as a route line, a quiet nod to the city's metro.

   Engineering notes
   - All class names use the "ct-" prefix, so nothing clashes with style.css.
   - Colours are scoped tokens on .ct and switch with [data-theme="dark"].
   - Motion is limited to transform / opacity and respects reduced-motion.
   - content-visibility lets the browser skip rendering until the section
     is close to the viewport, which keeps the first load and scrolling light.
   Behaviour lives in ./js/contact.js (the markup also works without it).
   ========================================================= */

/* ---------- Tokens (scoped, theme aware) ---------- */
.ct {
    --ct-skew: clamp(26px, 5vw, 76px);
    /* slant depth of the seam */
    --ct-seam: 3px;
    /* gold line between the panes */
    --ct-paper: #fbf7f0;
    --ct-ink: #2a1014;
    --ct-muted: #6b5a5e;
    --ct-line: rgba(74, 12, 22, .18);
    --ct-field: #ffffff;
    --ct-send-bg: linear-gradient(160deg, #2e060d, #1c0509);

    position: relative;
    /* Skip layout and paint while far off screen; size is remembered after first render.
       Desktop only: on phones the estimated height differs from the real one, so the page
       would jump while scrolling when the section is finally rendered. */
    content-visibility: auto;
    contain-intrinsic-size: auto 960px;
}

@media (max-width: 900px), (hover: none) {
    .ct {
        content-visibility: visible;
        contain-intrinsic-size: none;
    }
}

:root[data-theme="dark"] .ct {
    --ct-paper: #171a20;
    --ct-ink: #f3e9d2;
    --ct-muted: #a3a8b3;
    --ct-line: rgba(255, 255, 255, .14);
    --ct-field: #1e232b;
    --ct-send-bg: linear-gradient(160deg, #230609, #150305);
}

/* Visually hidden text for screen readers (status messages) */
.ct-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Inline SVG sprite container: takes no space */
.ct-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ct-ic {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Heading ---------- */
.ct__head {
    /* max-width: 40rem; */
    margin-bottom: clamp(28px, 4.5vw, 56px);
}

.ct__title {
    margin: 0 0 16px;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5.2vw, 4rem);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -.02em;
    color: #fff;
    text-wrap: balance;
}

.ct__lead {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    color: rgba(255, 255, 255, .82);
}

/* ---------- Panel: two panes joined by a slanted gold seam ----------
   The gold seam is the panel background showing through the small gap
   between the two clipped panes (same technique as the About gallery). */
.ct-panel {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    background: linear-gradient(115deg, var(--gold), var(--gold-soft));
    box-shadow: 0 28px 60px rgba(0, 0, 0, .3);
}

/* Desktop only: each pane overpaints the panel edge by 1px. Without this, anti-aliasing at
   fractional pixel positions lets the gold seam colour leak as a faint line along the outer edge. */
@media (min-width: 901px) {
    .ct-pick {
        margin: -1px 0 -1px -1px;
    }

    .ct-send {
        margin: -1px -1px -1px calc(var(--ct-skew) * -1 + var(--ct-seam));
    }
}

/* ---------- Left pane: choose a topic ---------- */
.ct-pick {
    min-width: 0;
    padding: clamp(22px, 3vw, 40px) calc(var(--ct-skew) + clamp(16px, 2vw, 28px)) clamp(22px, 3vw, 40px) clamp(20px, 3vw, 40px);
    background: var(--ct-paper);
    color: var(--ct-ink);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--ct-skew)) 100%, 0 100%);
    transition: background-color .3s, color .3s;
}

.ct-set {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ct-set__legend {
    padding: 0;
    margin: 0 0 16px;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-size: clamp(1.2rem, 1.9vw, 1.55rem);
    font-weight: 400;
    color: var(--ct-ink);
}

.ct-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ct-chip {
    position: relative;
    display: block;
}

.ct-chip--wide {
    grid-column: 1 / -1;
}

/* The native radio covers the whole tile: click, tap and arrow keys work without JS */
.ct-chip__in {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ct-chip__box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    padding: 14px 48px 14px 16px;
    border: 1px solid var(--ct-line);
    background: var(--ct-field);
    transition: background-color .25s, border-color .25s, transform .3s var(--ease);
}

.ct-chip__box b {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ct-ink);
    transition: color .25s;
}

.ct-chip__box small {
    font-size: .8rem;
    line-height: 1.35;
    color: var(--ct-muted);
    transition: color .25s;
}

/* Selection indicator: ring that fills with gold and shows a tick */
.ct-chip__box::before,
.ct-chip__box::after {
    content: "";
    position: absolute;
    top: 50%;
    pointer-events: none;
}

.ct-chip__box::after {
    right: 14px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 1.5px solid var(--ct-line);
    border-radius: 50%;
    transition: background-color .25s, border-color .25s;
}

.ct-chip__box::before {
    right: 22px;
    z-index: 1;
    width: 5px;
    height: 10px;
    margin-top: -7px;
    border: solid #1a1205;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .3s var(--ease);
}

.ct-chip__in:checked+.ct-chip__box {
    background: var(--maroon);
    border-color: var(--maroon);
}

.ct-chip__in:checked+.ct-chip__box b {
    color: #fff;
}

.ct-chip__in:checked+.ct-chip__box small {
    color: rgba(255, 255, 255, .78);
}

.ct-chip__in:checked+.ct-chip__box::after {
    background: var(--gold);
    border-color: var(--gold);
}

.ct-chip__in:checked+.ct-chip__box::before {
    transform: rotate(45deg) scale(1);
}

.ct-chip__in:focus-visible+.ct-chip__box {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

@media (hover: hover) {
    .ct-chip:hover .ct-chip__box {
        border-color: var(--gold);
        transform: translateY(-2px);
    }
}

/* Optional name field */
.ct-name {
    margin-top: clamp(18px, 2.4vw, 28px);
}

.ct-name label {
    display: block;
    margin-bottom: 6px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ct-ink);
}

.ct-name label span {
    font-weight: 400;
    color: var(--ct-muted);
}

.ct-name input {
    width: 100%;
    padding: 13px 14px;
    font: inherit;
    /* 16px minimum prevents the iOS zoom-on-focus */
    font-size: 1rem;
    color: var(--ct-ink);
    background: var(--ct-field);
    border: 1px solid var(--ct-line);
    border-radius: 0;
    transition: border-color .2s, box-shadow .2s;
}

.ct-name input::placeholder {
    color: var(--ct-muted);
    opacity: .75;
}

.ct-name input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(200, 150, 46, .35);
}

/* ---------- Right pane: message + actions ---------- */
.ct-send {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    margin-left: calc(var(--ct-skew) * -1 + var(--ct-seam));
    padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(22px, 3vw, 40px) calc(var(--ct-skew) + clamp(18px, 2.4vw, 36px));
    background: var(--ct-send-bg);
    color: #fff;
    clip-path: polygon(var(--ct-skew) 0, 100% 0, 100% 100%, 0 100%);
}

.ct-send__t {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--gold-soft);
}

/* Message preview. It stays light in both themes so it always reads as "the message". */
.ct-bubble {
    position: relative;
    margin: 0;
    /* reserve room so the layout does not jump when the text changes */
    min-height: 7.5em;
    padding: 18px 20px;
    border-radius: 18px 18px 18px 4px;
    background: #fbf7f0;
    color: #2a1014;
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.ct-actions {
    display: grid;
    gap: 10px;
}

.ct-act {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    padding: 10px 22px 10px 20px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    color: #fff;
    text-align: left;
    transition: transform .25s var(--ease), box-shadow .25s, background-color .25s, border-color .25s, color .25s;
}

.ct-act .ct-ic {
    width: 24px;
    height: 24px;
}

.ct-act__t {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.ct-act__t b {
    font-size: 1rem;
    font-weight: 700;
}

.ct-act__t small {
    font-size: .8rem;
    font-weight: 500;
    opacity: .86;
    overflow-wrap: anywhere;
}

/* WhatsApp is the primary action: largest and most saturated */
.ct-act--wa {
    min-height: 68px;
    background: #137a3c;
}

.ct-act--mail {
    background: var(--gold);
    color: #1a1205;
}

.ct-act--call {
    border-color: rgba(255, 255, 255, .4);
}

.ct-act:hover,
.ct-act:focus-visible {
    transform: translateY(-2px);
}

.ct-act--wa:hover,
.ct-act--wa:focus-visible {
    box-shadow: 0 12px 26px rgba(19, 122, 60, .45);
}

.ct-act--mail:hover,
.ct-act--mail:focus-visible {
    background: var(--gold-soft);
    box-shadow: 0 12px 26px rgba(200, 150, 46, .35);
}

.ct-act--call:hover,
.ct-act--call:focus-visible {
    border-color: var(--gold-soft);
    color: var(--gold-soft);
}

.ct-send__note {
    margin: 0;
    font-size: .82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .68);
}

.ct-send__note a {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 3px;
}

.ct-send__note a:hover {
    color: var(--gold-soft);
}

/* ---------- Directory: quiet reference details ---------- */
.ct-dir {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px clamp(18px, 3vw, 40px);
    margin-top: clamp(36px, 5vw, 64px);
}

.ct-dir>li {
    min-width: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.ct-dir__k {
    margin: 0 0 8px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--gold-soft);
}

.ct-dir__v {
    display: block;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.55;
    color: rgba(255, 255, 255, .92);
    overflow-wrap: anywhere;
}

a.ct-dir__v {
    font-variant-numeric: tabular-nums;
    transition: color .2s;
}

a.ct-dir__v:hover {
    color: var(--gold-soft);
}

.ct-dir__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--gold-soft);
    text-decoration: underline;
    text-decoration-color: rgba(227, 182, 88, .5);
    text-underline-offset: 4px;
    transition: color .2s, text-decoration-color .2s;
}

.ct-dir__link .ct-ic {
    width: 16px;
    height: 16px;
}

.ct-dir__link:hover {
    color: #fff;
    text-decoration-color: currentColor;
}

/* Copy-to-clipboard button */
.ct-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    margin-top: 10px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    transition: background-color .2s, border-color .2s, color .2s;
}

.ct-copy .ct-ic {
    width: 16px;
    height: 16px;
}

.ct-copy:hover {
    border-color: var(--gold-soft);
    color: var(--gold-soft);
}

.ct-copy.is-done {
    background: var(--gold);
    border-color: var(--gold);
    color: #1a1205;
}

/* ---------- Branches: route line ---------- */
.ct-branches {
    margin-top: clamp(32px, 4.5vw, 56px);
    padding-top: clamp(20px, 3vw, 32px);
    border-top: 1px solid rgba(255, 255, 255, .22);
}

.ct-branches__t {
    margin: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--gold-soft);
}

.ct-line {
    display: flex;
    margin-top: 20px;
    /* Counts the stops, so the end tag always shows the real number of branches */
    counter-reset: ct-stop;
}

.ct-line li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding-top: 30px;
    font-size: 1rem;
    color: #fff;
    counter-increment: ct-stop;
}

/* Track segment to the next stop */
.ct-line li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-soft));
    transform-origin: left center;
}

.ct-line li:last-child::before {
    display: none;
}

/* End tag (desktop and large tablets only)
   The route ends at the last stop with a dashed run-out and a branch-count tag,
   which uses the free space to the right of the final label.
   The tag is decorative (aria-hidden in the markup); the stops themselves stay the content. */
.ct-line__end {
    display: none;
}

@media (min-width: 901px) {
    .ct-line li:last-child::before {
        display: block;
        left: 9px;
        background: repeating-linear-gradient(90deg, var(--gold-soft) 0 6px, transparent 6px 12px);
    }

    .ct-line__end {
        position: absolute;
        top: -5px;
        right: 0;
        display: inline-flex;
        align-items: center;
        height: 28px;
        padding: 0 14px;
        border: 1.5px solid var(--gold-soft);
        border-radius: 999px;
        background: var(--maroon-deep);
        color: var(--gold-soft);
        font-size: .74rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .ct-line__end::before {
        content: counter(ct-stop) " branches";
    }

    /* Appears after the last stop has been drawn */
    .ct-branches.is-in .ct-line__end {
        animation: ctTag .5s var(--ease) calc(var(--k, 0) * 160ms + 350ms) backwards;
    }
}

/* Stop marker */
.ct-line li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 3px solid var(--gold-soft);
    border-radius: 50%;
    background: var(--maroon-deep);
}

/* The one orchestrated moment: the line draws stop by stop when it scrolls into view */
.ct-branches.is-in .ct-line li::before {
    animation: ctDrawX .55s var(--ease) calc(var(--k, 0) * 160ms + 200ms) backwards;
}

.ct-branches.is-in .ct-line li::after {
    animation: ctPop .35s var(--ease) calc(var(--k, 0) * 160ms) backwards;
}

@keyframes ctDrawX {
    from {
        transform: scaleX(0);
    }
}

@keyframes ctDrawY {
    from {
        transform: scaleY(0);
    }
}

@keyframes ctPop {
    from {
        transform: scale(0);
    }
}

@keyframes ctTag {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
}

/* ---------- Floating call / WhatsApp buttons step aside while this section is on screen ---------- */
.fab.is-quiet .fab__btn--wa,
.fab.is-quiet .fab__btn--call {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s var(--ease), visibility 0s linear .25s;
}

/* ---------- Responsive ---------- */

/* Tablet: panes stack, the slanted seam becomes a straight gold line */
@media (max-width: 900px) {
    .ct-panel {
        grid-template-columns: 1fr;
        gap: var(--ct-seam);
    }

    .ct-pick,
    .ct-send {
        margin: 0;
        clip-path: none;
        padding: clamp(20px, 4vw, 32px);
    }

    .ct-bubble {
        min-height: 5.5em;
    }

    .ct-dir {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Branch route turns vertical on phones */
@media (max-width: 640px) {
    .ct-line {
        flex-direction: column;
    }

    .ct-line li {
        flex: none;
        padding: 0 0 22px 34px;
        line-height: 18px;
    }

    .ct-line li:last-child {
        padding-bottom: 0;
    }

    .ct-line li::before {
        top: 18px;
        bottom: 0;
        left: 7px;
        right: auto;
        width: 2px;
        height: auto;
        transform-origin: center top;
        background: linear-gradient(180deg, var(--gold), var(--gold-soft));
    }

    .ct-branches.is-in .ct-line li::before {
        animation-name: ctDrawY;
    }
}

@media (max-width: 560px) {
    .ct-dir {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ct-chip__box {
        padding: 12px 44px 12px 14px;
    }

    .ct-bubble {
        min-height: 0;
    }
}

/* Very narrow phones: one tile per row */
@media (max-width: 420px) {
    .ct-chips {
        grid-template-columns: 1fr;
    }

    .ct-act {
        padding-inline: 16px;
    }
}

/* Larger tap targets on touch devices */
@media (pointer: coarse) {
    .ct-copy {
        min-height: 44px;
    }

    .ct-dir__link {
        min-height: 44px;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {

    .ct-chip__box,
    .ct-chip__box::before,
    .ct-act,
    .ct-copy {
        transition: none;
    }

    .ct-branches.is-in .ct-line li::before,
    .ct-branches.is-in .ct-line li::after,
    .ct-branches.is-in .ct-line__end {
        animation: none;
    }
}