/* ==========================================================================
   About bars - vertical rails that expand horizontally on click
   --------------------------------------------------------------------------
   Each bar is a slim vertical rail labelled with its title written
   top-to-bottom (writing-mode: vertical-lr). Clicking a rail widens it and
   reveals the section text beside the title (js writes the 4-column
   grid-template-columns in px so the width transition is smooth and purely
   length-based; the static stylesheet template is the no-JS fallback).

   bar-nav.css is linked only on the About page, so the homepage / members /
   projects layouts are untouched.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville&display=swap');

/* About page = flex column: navbar, bars (fill the rest), footer. */
body.on-about {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.bar-page {
    /* Colours + design tokens (site palette, scoped to the page). */
    --color-dark: #191a1b;
    --color-green: #4F735B;
    --color-gold: #AC8B12;
    --color-purple: #8D7576;
    --color-red: #A63C30;
    --tab-w: clamp(3.5rem, 8vw, 5rem);   /* collapsed rail width (js mirrors it in px) */
    --easing: cubic-bezier(.8, 0, .2, 1);
    --duration: .6s;

    /* Fill the whole first window (no scrolling) - same trick as the homepage
       hero ("heartbeat"): the sticky navbar sits above the bars in normal
       flow, so subtract its runtime-measured height (--site-nav-h, set by
       js/nav.js on every page). The footer then hangs just below the fold. */
    flex: 0 0 auto;
    height: calc(100vh - var(--site-nav-h, 0px));
    height: calc(100dvh - var(--site-nav-h, 0px));
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 even bars, edge to edge; js overrides with px */
    grid-template-rows: minmax(0, 1fr);
    transition: grid-template-columns var(--duration) var(--easing);
    background-color: var(--black);  /* seams between the rails */
    font-family: 'Libre Baskerville', serif;
    overflow: hidden;
}

/* One bar: the clickable vertical title rail + the (hidden) text panel. */
.bar-item {
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: hidden;
    background-color: var(--color);
    scroll-margin-top: calc(var(--site-nav-h, 0px) + 24px); /* deep-links clear the sticky nav */
}

/* The clickable rail: a slim strip showing the vertical title. */
.bar-tab {
    flex: 0 0 var(--tab-w);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5vh 0;
    border: 0;
    background: transparent;
    color: var(--color-dark);
    cursor: pointer;
    font: inherit;
}
.bar-tab:hover { filter: brightness(1.08); }
.bar-tab:focus-visible { outline: 3px solid var(--color-dark); outline-offset: -6px; }

/* <details>/<summary> specifics: remove the disclosure marker and make taps
   register instantly on touch screens (touch-action kills the 300ms delay that
   can otherwise swallow the first tap). */
.bar-tab { list-style: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bar-tab::-webkit-details-marker { display: none; }

/* All bars collapsed: each bar spreads evenly across the full window and its
   vertical title centres in its panel (class toggled by js). */
.bar-page.all-closed .bar-tab {
    flex: 1 1 100%;
}

/* Vertical title: one letter under the other, e.g.  T h e   T e a m. */
.bar-title {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -webkit-text-orientation: upright;
    text-orientation: upright;
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 2.1vw, 1.45rem);
    line-height: 1.05;
    letter-spacing: 0.08em;
    max-height: 100%;   /* keep long titles inside a short rail */
    overflow: hidden;
}

/* Text side of an open rail. */
.bar-panel {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;                   /* let the panel shrink so the page fits the window */
    display: flex;
    align-items: center;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--easing),
                visibility 0s linear var(--duration);
}
/* The panel is shown when the native <details> is open. */
.bar-item[open] .bar-panel {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration) var(--easing),
                visibility 0s;
}

.bar-body {
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
    padding: clamp(3vh, 6vmax, 8vh) clamp(1rem, 4vw, 3rem);
    box-sizing: border-box;
    max-height: 100%;                /* if the text is taller than the bar, it scrolls inside */
    overflow: auto;
}

.bar-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--color-dark);
}

/* Body copy sits on a translucent dark card so it stays readable on every
   panel colour without altering the brand palette. */
.bar-text {
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    background-color: rgba(16, 16, 17, 0.55);
    color: var(--accent-white);
    font-family: var(--font-body);
    font-size: clamp(0.98rem, 2.4vmin, 1.12rem);
    line-height: 1.7;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.bar-text a {
    color: var(--accent-white);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.bar-text a:hover,
.bar-text a:focus {
    color: var(--accent-white-bright);
    border-bottom-style: solid;
}

/* Staggered entrance (disabled when the user prefers reduced motion). */
@media (prefers-reduced-motion: no-preference) {
    .bar-item {
        animation: bar-in .5s ease backwards;
        animation-delay: calc(var(--i, 0) * .08s);
    }
}
@keyframes bar-in {
    from { opacity: 0; transform: translateX(-.5rem); }
    to   { opacity: 1; transform: none; }
}

/* Small screens: rails become stacked full-width rows that open downwards. */
@media (max-width: 768px) {
    .bar-page {
        flex: 1 0 auto;              /* small screens: let the stack grow & page scroll */
        min-height: auto;
        height: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .bar-item {
        flex-direction: column;
        flex: 0 0 auto;
    }
    .bar-tab {
        flex: 0 0 auto;
        width: 100%;
        justify-content: flex-start;
        padding: .9rem 1.1rem;
    }
    .bar-title {
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        -webkit-text-orientation: initial;
        text-orientation: initial;
        letter-spacing: .12em;
        font-size: 1.1rem;
    }
    .bar-panel { display: none; visibility: hidden; }
    .bar-item[open] .bar-panel { display: block; opacity: 1; visibility: visible; }
    .bar-body { max-height: none; overflow: visible; }
}

/* Reduced motion: keep the layout, drop the movement. */
@media (prefers-reduced-motion: reduce) {
    .bar-page { transition: none; }
    .bar-item { animation: none; }
    .bar-panel { transition: none; }
}