/* ============================================================
   BEINC — PDP Info Bar (Section CSS)

   Sticky bar that:
     • Initially peeks at the bottom of the hero's 100vh
       (it sits right after the hero in the DOM, so its
       natural position IS at hero-bottom).
     • Sticks at top: var(--pdp-bar-blur-h) once scrolled —
       same offset pattern as services-cards, leaving a
       --pdp-bar-blur-h frosted strip above for the nav to
       float over.
     • Releases when its parent (.pdp__bar-zone) ends, i.e.
       when the project media section has fully scrolled past.
     • Background colour swaps via [data-state]:
         dark   → black2 @ 20% + 40px blur (over hero / overview / project-media)
         light  → white  @ 10% + 40px blur (over success)

   Pre-sticky text (left side): "peninsulagrouplimited.com.au"
   Post-sticky text:            "Peninsula Group" (scramble-in)

   Mobile: tags row is hidden by default; the tag-toggle button
   reveals them, and the URL/Title text is hidden when tags
   are showing.
   ============================================================ */


.pdp__bar-zone {
    position: relative;
    /* The bar zone wraps overview + success + project media so the
       sticky info bar releases at the bottom of project media. */
}


.pdp-info-bar {
    /* Tunables (mirror services-cards values for visual consistency) */
    --pdp-bar-h:           clamp(72px, 8vh, 110px);
    --pdp-bar-blur-h:      10vh;
    --pdp-bar-blur-amount: 40px;

    /* SOLID state colours (default — fully opaque, no blur) */
    --pdp-bar-bg-dark-solid:  var(--color-black2);    /* black2 100% */
    --pdp-bar-bg-light-solid: var(--color-white);     /* cream 100% */

    /* TRANSLUCENT state colours (only while hero media is translating
       behind the bar — let the media show through with frosted blur) */
    --pdp-bar-bg-dark-blur:   rgba(25, 23, 22, 0.20);    /* black2 @ 20% */
    --pdp-bar-bg-light-blur:  rgba(255, 251, 240, 0.10); /* white @ 10% */

    --pdp-bar-fg-dark:     var(--color-white);
    --pdp-bar-line-dark:   var(--color-grid);
    --pdp-bar-solid-dark:  var(--color-black2);       /* solid behind tag icon SVG */
    --pdp-bar-fg-light:    var(--color-black2);
    --pdp-bar-line-light:  var(--color-greyish);
    --pdp-bar-solid-light: var(--color-white);

    position: sticky;
    top: var(--pdp-bar-blur-h);
    z-index: 50;                /* above sections (max z:4) and hero media (z:30), below nav (z:1000) */
    height: var(--pdp-bar-h);
    margin-top: 0;
    /* Active state vars — defaults to dark + solid. Updated via
       [data-state] (dark|light) and [data-translating] (true|false). */
    --pdp-bar-bg:    var(--pdp-bar-bg-dark-solid);
    --pdp-bar-fg:    var(--pdp-bar-fg-dark);
    --pdp-bar-line:  var(--pdp-bar-line-dark);
    --pdp-bar-solid: var(--pdp-bar-solid-dark);
}

.pdp-info-bar[data-state="light"] {
    --pdp-bar-bg:    var(--pdp-bar-bg-light-solid);
    --pdp-bar-fg:    var(--pdp-bar-fg-light);
    --pdp-bar-line:  var(--pdp-bar-line-light);
    --pdp-bar-solid: var(--pdp-bar-solid-light);
}

/* Translucent + blurred — only while hero media is translating behind
   the bar (set by JS in pdp-info-bar.js based on overview viewport pos).
   Overrides --pdp-bar-bg back to the semi-transparent value so the
   media reads through the frosted glass. */
.pdp-info-bar[data-translating="true"] {
    --pdp-bar-bg: var(--pdp-bar-bg-dark-blur);
}
.pdp-info-bar[data-translating="true"][data-state="light"] {
    --pdp-bar-bg: var(--pdp-bar-bg-light-blur);
}


/* Frosted blur strip ABOVE the bar.
   Visible whenever the bar is sticky — independent of whether the bar
   itself is solid or translucent. The strip's purpose is to let the
   nav peek through it when scrolling up (the bar slides down by 10vh
   to make room, the strip fills that gap with the frosted glass).
   Always uses the TRANSLUCENT colour values (not the solid bar bg)
   so the nav reads through it correctly. */
.pdp-info-bar__blur {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--pdp-bar-blur-h);
    background: var(--pdp-bar-bg-dark-blur);
    backdrop-filter: blur(var(--pdp-bar-blur-amount));
    -webkit-backdrop-filter: blur(var(--pdp-bar-blur-amount));
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, background-color 200ms ease;
}

/* Light section: strip uses the light translucent colour. */
.pdp-info-bar[data-state="light"] .pdp-info-bar__blur {
    background: var(--pdp-bar-bg-light-blur);
}

/* Reveal strip when bar is sticky. When --pdp-bar-blur-h is 0vh
   (nav hidden after scroll-down), the strip's height is 0 so it
   visually disappears even though opacity is 1. When the user scrolls
   up and --pdp-bar-blur-h animates back to 10vh, the strip grows in. */
.pdp-info-bar.is-sticky .pdp-info-bar__blur {
    opacity: 1;
    pointer-events: auto;
}


/* Inner bar — the visible chrome.
   Solid color by default, no backdrop-filter (so the bar fully hides
   what's behind it). When [data-translating="true"] is set, the bar
   becomes translucent + frosted so the moving hero media reads through. */
.pdp-info-bar__inner {
    position: relative;
    height: 100%;
    padding: 0 var(--pad-x);
    background: var(--pdp-bar-bg);
    color: var(--pdp-bar-fg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    border-bottom: 1px dashed var(--pdp-bar-line);
    transition:
        background-color 200ms ease,
        color 200ms ease,
        border-color 200ms ease,
        backdrop-filter 200ms ease,
        -webkit-backdrop-filter 200ms ease;
}

.pdp-info-bar[data-translating="true"] .pdp-info-bar__inner {
    backdrop-filter: blur(var(--pdp-bar-blur-amount));
    -webkit-backdrop-filter: blur(var(--pdp-bar-blur-amount));
}


/* Left text — URL pre-sticky, "Peninsula Group" post-sticky */
.pdp-info-bar__url {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight);
    font-size: 16px;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    transition: opacity 180ms ease;
    flex: 0 1 auto;
    min-width: 0;
}

.pdp-info-bar__url:hover {
    opacity: 0.75;
}

.pdp-info-bar__url-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Tags row */
.pdp-info-bar__tags {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}

.pdp-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: var(--radius);
    border: 1px solid var(--tag-color, currentColor);
    color: var(--tag-color, currentColor);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1;
    letter-spacing: var(--tracking-body);
    background: transparent;
    transition: color 200ms ease, border-color 200ms ease;
}

/* Service colour variants — one rule per service so the pill stroke
   and label tint match the project-card tags and service-row accents. */
.pdp-tag[data-service="brand"]          { --tag-color: var(--color-red-brand); }
.pdp-tag[data-service="comms"]          { --tag-color: var(--color-orange-comms); }
.pdp-tag[data-service="web"]            { --tag-color: var(--color-blue-web); }
.pdp-tag[data-service="app-platform"]   { --tag-color: var(--color-purple-app-platform); }
.pdp-tag[data-service="name-ideation"]  { --tag-color: var(--color-pink-name-ideation); }
.pdp-tag[data-service="packaging"]      { --tag-color: var(--color-green-packaging); }
.pdp-tag[data-service="graphic-design"] { --tag-color: var(--color-yellow-graphic-design); }


/* Tag toggle button (mobile only) — hidden on desktop/tablet.
   `position: relative` is required so the absolutely-positioned icons
   inside it stack on top of each other within the button's bounds. */
.pdp-info-bar__tag-toggle {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--pdp-bar-fg);
    flex: 0 0 auto;
}

/* Both icons stack inside the button using `inset: 0`. The crossfade
   animation interpolates opacity AND transform on the SAME timing
   curve (--ease-out-expo, 380ms) so both axes feel like one motion.
   A subtle scale + rotate gives the swap a "pop" rather than a flat
   linear opacity blend. */
.pdp-info-bar__icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: auto;             /* center inside parent (inset:0 + margin:auto) */
    transition:
        opacity 380ms var(--ease-out-expo),
        transform 380ms var(--ease-out-expo);
    transform-origin: center center;
    will-change: transform, opacity;
}

.pdp-info-bar__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Tag icon's inner dot — matches the bar's SOLID background colour
   so it reads as a punched-out hole. Flips between black2 (dark mode)
   and white-cream (light mode) via the bar's data-state. */
.pdp-info-bar__icon-dot {
    fill: var(--pdp-bar-solid);
    transition: fill 200ms ease;
}

/* DEFAULT (tags hidden) — tag icon visible at rest, X scaled down + rotated */
.pdp-info-bar__icon--tag {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.pdp-info-bar__icon--x {
    opacity: 0;
    transform: rotate(-135deg) scale(0.5);
}

/* TOGGLED (tags showing) — tag icon scales away & rotates out, X spins in */
.pdp-info-bar__tag-toggle[aria-expanded="true"] .pdp-info-bar__icon--tag {
    opacity: 0;
    transform: rotate(135deg) scale(0.5);
}
.pdp-info-bar__tag-toggle[aria-expanded="true"] .pdp-info-bar__icon--x {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}


/* ============================================================
   RESPONSIVE — TABLET (768–1023px)
   Same structure as desktop. Tags visible inline.
   ============================================================ */
@media (max-width: 1023px) {
    .pdp-info-bar__url {
        font-size: 14px;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (≤767px)
   Tag toggle button shown. Tags hidden by default. When toggled
   on, the URL/Title text hides and the tags appear in its place.
   ============================================================ */
@media (max-width: 767px) {
    .pdp-info-bar {
        --pdp-bar-h: clamp(56px, 7vh, 72px);
    }

    .pdp-info-bar__inner {
        padding: 0 var(--pad-x);
        gap: var(--space-3);
        /* Toggle button needs flex-end so it stays right when URL/tags
           are removed from flex flow (both absolute below). */
        justify-content: flex-end;
    }

    /* URL — ALWAYS rendered AND absolutely positioned at the bar's left
       edge. We do NOT use display:none/flex — `display` cannot transition,
       so toggling it produced a hard cutoff (the "buggy" pre-sticky feel
       Jose mentioned). With both URL and tags absolute, there's no layout
       shift between states; the toggle button's anchor point is rock-solid
       whether the bar is sticky or peeking. */
    .pdp-info-bar__url {
        position: absolute;
        left: var(--pad-x);
        top: 50%;
        transform: translate(0, -50%);
        font-size: 12px;
        opacity: 1;
        pointer-events: auto;
        max-width: calc(100% - 60px);   /* leave room for toggle button */
        /* Slightly longer (520ms) + softer easing (--ease-gentle) so the
           crossfade reads as a calm exchange rather than a snappy flip. */
        transition:
            opacity 520ms var(--ease-gentle),
            transform 520ms var(--ease-gentle);
    }

    /* Tags — ALWAYS rendered, absolutely positioned over the URL slot.
       Pre-state: faded out + translated UP-RIGHT a little so the entry
       reads as a slide-in from the side rather than a flat fade. */
    .pdp-info-bar__tags {
        display: inline-flex;       /* always rendered (animatable) */
        position: absolute;
        left: var(--pad-x);
        top: 50%;
        transform: translate(8px, -50%);
        opacity: 0;
        pointer-events: none;
        /* Match the URL's longer + smoother timing for a unified crossfade. */
        transition:
            opacity 520ms var(--ease-gentle),
            transform 520ms var(--ease-gentle);
    }

    .pdp-info-bar__tag-toggle {
        display: inline-flex;
        position: relative;
        z-index: 2;        /* above URL/tags so it stays clickable */
    }

    /* OPEN state: URL slides LEFT and fades out; tags slide INTO place
       and fade in. Same easing + duration as the icon swap so the whole
       interaction reads as one motion. */
    .pdp-info-bar.is-tags-open .pdp-info-bar__url {
        opacity: 0;
        transform: translate(-8px, -50%);
        pointer-events: none;
    }

    .pdp-info-bar.is-tags-open .pdp-info-bar__tags {
        opacity: 1;
        transform: translate(0, -50%);
        pointer-events: auto;
    }

    .pdp-tag {
        padding: 6px 12px;
        font-size: 11px;
    }
}