/* ============================================================
   BEINC — Contact Labels (socials + information)
   Used in the contact hero left column AND as a sticky left rail
   that travels through the hero, slideshow, brands marquee, and
   un-sticks at the as-seen-in section center.

   Two states:
     1. HERO state — diagonally staggered (desktop), socials + info
        below them (tablet), socials right + info left (mobile).
     2. RAIL state — left padded edge, vertically stacked, icon
        containers only (text expanded on hover).
   JS handles the transition between states.
   ============================================================ */


/* ── ROOT WRAPPER — native CSS sticky.
   Sticks at viewport y = nav height (8vh) within the hero left column.
   Width/height 0 + overflow visible: doesn't push siblings around in
   flow but still sticks. Children render outside its bounds via the
   absolute positioning we set in the JS layout. */
.cl-block {
    position: sticky;
    top: var(--nav-section-height, 8vh);
    width: 0;
    height: 0;
    overflow: visible;
    /* z-index 999 — above the connector (z:950) and any later section
       so the labels are never clipped/hidden when they release and
       scroll up over the white connector / brands marquee / asi.   */
    z-index: 899;
    pointer-events: none;
    isolation: isolate;
}
.cl-block * { pointer-events: auto; }


/* ── SOCIALS COLUMN ──
   Three labels stacked vertically, dashed-line borders on every
   side BUT the borders share an edge so they read as a single
   continuous frame with internal dividers. */
.cl-socials {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 58px;
}

.cl-social {
    position: relative;
    width: 58px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Default style: black2 @ 20% with 40px backdrop-blur. */
    background: rgba(38, 38, 38, 0.20);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: var(--guide-border);
    transition: background 0.3s var(--ease-primary), backdrop-filter 0s linear 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}
/* Overlap top borders so they read as a single dashed frame */
.cl-social + .cl-social { margin-top: -1px; }

.cl-social__icon {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--color-white);
    transition: color 0.3s var(--ease-primary), transform 0.45s var(--ease-out-expo);
}
.cl-social__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.cl-social:hover {
    background: var(--color-white);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: background 0.3s var(--ease-primary), backdrop-filter 0s;
}
.cl-social:hover .cl-social__icon {
    color: var(--color-black2);
    transform: rotate(-45deg);
}


/* ── INFORMATION LABELS ──
   Each label = a small flex with [icon-container][text-container].
   In HERO state on desktop they're absolutely positioned with the
   diagonal-staggered layout. JS sets exact pixel positions.   */
.cl-infos {
    position: absolute;
    top: 0;
    left: 0;
    /* Width/height set by JS on hero state; in rail state, info labels
       become a vertical stack adjacent to the socials. */
}

.cl-info {
    position: absolute;
    height: 71px;
    display: inline-flex;
    align-items: stretch;
    /* Idle pill is fully transparent — no fill, no blur. The dashed
       border alone outlines it; icons + caption + text float over the
       page. Hover treatments on the children (.cl-info__icon-wrap goes
       white, .cl-info__text-wrap goes solid `--color-black` in hero or
       translucent blur in rail) provide all the visible "panel" feel.
       Was previously `rgba(38, 38, 38, 0.20)` + `backdrop-filter: blur(20px)`
       — removed so idle reads as a delicate dashed-outline ghost,
       not a frosted dark pill. */
    border: var(--guide-border);
    box-sizing: border-box;
    /* Anchor tags now (mailto:, tel:, https://maps... — see contact.html).
       Pointer cursor + no underline so they read as labels rather than
       text links. The href semantics give us free keyboard activation
       and right-click "open in new tab" without any JS handlers. */
    cursor: pointer;
    text-decoration: none;
    color: var(--color-white);
    /* JS sets width + left + top per-label */
}

.cl-info__icon-wrap {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px;
    box-sizing: border-box;
    border-right: var(--guide-border);
    background: transparent;
    transition: background 0.3s var(--ease-primary);
    flex-shrink: 0;
    /* Hero-state width is content-driven (hugging); rail state forces 58px (set in .is-rail). */
}

.cl-info__icon-label {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: 12px;
    line-height: 1;
    color: var(--color-greyish);
    transition: color 0.3s var(--ease-primary);
    white-space: nowrap;
}

.cl-info__icon {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--color-white);
    transition: color 0.3s var(--ease-primary), transform 0.45s var(--ease-out-expo);
}
.cl-info__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
    /* `overflow: visible` lets sub-paths render outside the viewBox bounds
       (the email flap rotates around its bottom-left corner — the right
       edge swings up past y=0 of its viewBox and would otherwise clip).
       The icon-wrap has 14 px padding on each side so there's room for
       the rotated content to render into without clashing with anything.
       Other icons that stay inside their viewBox are unaffected. */
    overflow: visible;
}

.cl-info__text-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    box-sizing: border-box;
    overflow: hidden;
    /* `backdrop-filter: blur(0)` at idle so the transition to the hover
       blur(20px) animates smoothly — going from `none` to a blur value
       wouldn't interpolate cleanly across browsers. blur(0) is a no-op
       visually but establishes the filter context. */
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    /* Background + blur both transition on hover, same 0.3s timing as
       the icon-wrap's white fill so the two halves of the pill flip in
       lockstep. */
    transition: background 0.3s var(--ease-primary), backdrop-filter 0.3s var(--ease-primary), -webkit-backdrop-filter 0.3s var(--ease-primary);
}
.cl-info__text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    color: var(--color-white);
    line-height: var(--leading-snug);
    text-align: center;
}
/* Location address wraps to multiple lines (e.g. "11 Bishop Street, /
   Kelvin Grove QLD / 4059 Australia") and reads better as a left-aligned
   block — each line starts at the same x so the address stacks like a
   postal address rather than three centred fragments. The wrapping span
   itself stays horizontally centred inside the text-wrap (via the parent's
   `justify-content: center` flex), so only the line alignment changes,
   not the block's position. Applies in every state (hero / rail-hover /
   mobile) — left-alignment is correct everywhere the address renders. */
.cl-info--location .cl-info__text { text-align: left; }

/* Hover — both halves of the info pill change colour:
     - icon-wrap (left) flips to white with dark icon + caption
     - text-wrap (right) flips from translucent backdrop-blur to solid
       --color-black (#262626) so the text reads on a clean dark surface
       instead of the dim/blurred default. */
.cl-info:hover .cl-info__icon-wrap { background: var(--color-white); }
.cl-info:hover .cl-info__icon-label { color: var(--color-black2); }
.cl-info:hover .cl-info__icon { color: var(--color-black2); transform: scale(1.08); }
/* HERO state hover — solid fill. Keeping backdrop-filter at the idle
   blur(0) (no override here) so there's no blur effect; the panel
   reads as a clean solid dark surface in the hero. */
.cl-info:hover .cl-info__text-wrap {
    background: var(--color-black);
}


/* ── ICON HOVER ANIMATIONS (per-label) ──
   Each info label's SVG icon gets its own bespoke motion on hover.
   These layer on top of the generic icon-wrap colour-flip above —
   transforms run on inner SVG paths/groups so the wrapper hover
   behaviour (scale 1.08, white background) keeps working.       */

/* EMAIL — top flap rotates around its bottom-left hinge.
   Anchor (0px, 5.2142px) in the SVG's viewBox is the corner of the
   flap *before* the diagonal V starts on the left side; rotating
   counterclockwise around that point lifts the right edge of the
   flap up and inward — visually the envelope is being unsealed
   from the right, hinged on the left. `transform-box: view-box`
   tells the browser to interpret transform-origin in viewBox
   coords (default for SVG sub-elements is `fill-box` which would
   be the path's own bounding box — wrong pivot for our needs). */
.cl-icon-email-flap {
    transform-origin: 0px 5.2142px;
    transform-box: view-box;
    transition: transform 0.4s var(--ease-out-expo);
}
.cl-info:hover .cl-icon-email-flap {
    transform: rotate(-15deg);
}

/* PHONE — whole receiver rotates counterclockwise so the diagonally-
   tilted icon ends up pointing more upright. Rotation runs on the
   inner <svg> element, pivoting around its own viewBox centre.
   We ALSO override the generic icon-wrap scale(1.08) for phone only
   — the user wanted phone hover to be rotation-only, not rotation +
   scale layered. The :hover override uses both classes (.cl-info +
   .cl-info--phone) for higher specificity than the generic rule
   above, so the override wins regardless of source order. */
.cl-info--phone .cl-info__icon svg {
    transform-origin: 50% 50%;
    transform-box: view-box;
    transition: transform 0.45s var(--ease-out-expo);
}
.cl-info--phone:hover .cl-info__icon svg {
    transform: rotate(-45deg);
}
.cl-info.cl-info--phone:hover .cl-info__icon {
    transform: none;
}

/* LOCATION — diamond ("gap") in the centre of the pin gets fill
   colour treatment + an infinite spin/scale on hover (driven by
   GSAP in js/components/contact-icon-hover.js, which can do the
   "infinite while hovered, smooth normalized return on unhover"
   pattern that pure CSS can't cleanly handle).
   The fill swap mimics the original look:
     - idle: diamond is var(--color-black2) — dark inner shape that
       reads as a "hole" against the white-ish outer pin
     - hover: diamond becomes var(--color-white) — matches the
       hovered icon-wrap's white background, so the gap reads as
       transparent (revealing the wrap) just like before.
   NOTE: rotation pivot is set via GSAP's `svgOrigin` (in raw SVG
   user-space / viewBox coords) — see contact-icon-hover.js. We do
   NOT set CSS transform-origin / transform-box here because GSAP
   would override transform-origin with its own `50% 50%` default
   on every tween, landing the pivot at the viewBox centre instead
   of the diamond centre. svgOrigin sidesteps that entirely. */
.cl-icon-location-gap {
    fill: var(--color-black2);
    transition: fill 0.3s var(--ease-primary);
}
.cl-info:hover .cl-icon-location-gap {
    fill: var(--color-white);
}


/* ── RAIL STATE (added by JS) ──
   IMPORTANT: positioning of .cl-block itself (position/top/left/transform/
   height) is OWNED BY JS and applied via inline styles. We do NOT set
   any positioning here under .is-rail because that creates an !important
   arms-race with the inline overrides needed for custom-Y rail and
   released states. is-rail class is used ONLY for children styling
   (collapsed icon pills, hover-expand, etc.). */
.cl-block.is-rail .cl-info__icon-wrap {
    width: 58px;
    padding-left: 0;
    padding-right: 0;
}
.cl-block.is-rail .cl-info__text-wrap {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    opacity: 0;
    /* Width/padding transitions ONLY fire on hover (see :hover rule below).
       Opacity transition keeps the text from popping back in at the end of
       the forward morph. */
    transition: opacity 0.3s var(--ease-primary);
}
.cl-block.is-rail .cl-info {
    width: 58px !important;
    min-width: 0 !important;
    max-width: 58px !important;
    overflow: hidden;
    /* No width/max-width transition by default — would conflict with the
       JS-driven morph and cause a glitch when JS clears its inline width.
       Hover gets its own transition (see :hover rule). */
}
.cl-block.is-rail .cl-info:hover {
    width: 240px !important;
    max-width: 240px !important;
    transition: width 0.3s var(--ease-primary), max-width 0.3s var(--ease-primary);
}
.cl-block.is-rail .cl-info:hover .cl-info__text-wrap {
    width: 182px;
    padding-left: 14px;
    padding-right: 14px;
    opacity: 1 !important;        /* beats any leftover inline opacity from morph */
    /* Rail-state hover bg + blur — overrides the hero hover's solid
       --color-black with a translucent + heavily blurred panel because
       in rail state the labels travel over the slideshow / brands /
       other backdrops, and a solid dark wedge would obscure that
       content. 10 % alpha of color-black2 (#191716) + 30 px blur reads
       as a frosted glass that picks up whatever's behind. Specificity
       (0,5,0) beats the hero hover rule's (0,3,0) so this wins
       automatically whenever `.is-rail` is on .cl-block. */
    background: rgba(25, 23, 22, 0.10);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    transition: width 0.3s var(--ease-primary), padding 0.3s var(--ease-primary), opacity 0.3s var(--ease-primary), background 0.3s var(--ease-primary), backdrop-filter 0.3s var(--ease-primary), -webkit-backdrop-filter 0.3s var(--ease-primary);
}

/* RELEASED state — no CSS positioning rules here either. JS owns ALL
   cl-block positioning via inline styles. is-released class is no
   longer used; the state is tracked in JS. */


/* ── TABLET ──
   Hero state: socials column on the left edge, info labels stacked
   directly below (also left-edge aligned). On scroll → rail state. */
@media (max-width: 1023px) and (min-width: 768px) {
    .cl-block {
        left: 4vw;
        padding-top: 0;
    }
}


/* ── MOBILE ──
   Layout: info labels stacked on the LEFT, socials stacked on the
   RIGHT, both starting at the same vertical line. The desktop DOM
   (.cl-block > .cl-socials + .cl-infos) is reused — CSS handles the
   reordering with flex (cl-block becomes a flex row, infos first). */
@media (max-width: 767px) {
    .cl-block {
        position: relative;
        top: auto;
        left: auto;
        /* leftCol already has padding-left/right of --pad-x; cl-block fills
           that content area edge-to-edge, so labels sit at the EXACT page
           padded edges (matching the side rails). */
        padding: 0;
        width: 100%;
        height: auto;
        margin-top: var(--space-7);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        box-sizing: border-box;
        text-align: left;
    }

    /* Socials column on the right — sticky so it stays put while the row
       scrolls, until its bottom reaches the info-labels bottom. */
    .cl-socials {
        order: 2;
        position: sticky;           /* JS sets `top` to socials' natural Y */
        flex: 0 0 auto;
        z-index: 5;                 /* above the rails so they "stop" at it */
    }

    /* Info labels column on the left — display flex column to stack vertically */
    .cl-infos {
        order: 1;
        position: relative;
        flex: 0 0 auto;
        top: auto;
        left: auto;
        width: auto;
        display: flex;
        flex-direction: column;
    }

    .cl-info {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 220px !important;
        max-width: calc(100vw - 58px - var(--pad-x) * 2 - 8px);
        margin-top: -1px;
        display: flex;
    }
    .cl-info:first-child { margin-top: 0; }
    .cl-info__icon-wrap {
        width: 58px;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex-shrink: 0;
    }

    /* Mobile sticky for socials micro-pin */
    .cl-socials.is-pinned {
        position: fixed;
        top: 20vh;
        right: var(--pad-x);
    }
}