/* ===========================================================================
   /about — page-scoped art direction.
   Loaded ONLY by PageController::about() via $pageStyles, so none of this
   reaches the rest of the site.

   This file deliberately departs from the Bootstrap-first rule (styling.md):
   the page's art direction IS the requirement — slanted color bands, glowing
   CTAs, diagonal stripes and illustrative SVG scenes. Bootstrap has no
   equivalent for clip-path bands, radial glows or skewed frames. Layout,
   spacing, grid and most typography still come from Bootstrap utilities;
   everything here is decoration layered on top.

   Color resolves from the theme's --bs-* vars (never a hardcoded brand hex),
   so a re-brand in custom-stripchat.scss flows through untouched.
   =========================================================================== */

.about-page {
    /* Decorative-only tokens. --about-slant is the single knob for every band
       angle, so the bands stay parallel to the stripes.
       In `vw`, NOT `%`: a clip-path percentage resolves against the element's
       own height, so a tall band and a short one would slant at different
       angles. A viewport unit keeps every edge on the same diagonal. */
    --about-slant: 5vw;

    /* Pride flag stripes. The ONE set of literal hexes on this page, and
       deliberately so: these are a fixed external standard, not brand colors —
       theming them would make the flag wrong. Named here so the SVG carries no
       loose hexes. */
    --about-pride-red: #e40303;
    --about-pride-orange: #ff8c00;
    --about-pride-yellow: #ffed00;
    --about-pride-green: #008026;
    --about-pride-blue: #004dff;
    --about-pride-purple: #750787;
    overflow-x: clip; /* rotated/oversized decor must not create a scrollbar */
}

/* ---------------------------------------------------------------------------
   Bands — a full-bleed color block with diagonal top and/or bottom edges.
   clip-path has no Bootstrap equivalent.
   --------------------------------------------------------------------------- */
.about-band {
    position: relative;
    background: var(--bs-primary);
}

/* Hero: straight top (it meets the header), slanted bottom.
   The site header is ALSO crimson, so a flat brand-red hero would fuse with it
   into one red mass. The vertical gradient — deeper at the top, brand red at
   the bottom — restores that separation without a second brand color. */
.about-band-hero {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bs-primary) 72%, var(--bs-black)) 0%,
        var(--bs-primary) 62%
    );
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--about-slant)), 0 100%);
    padding-bottom: calc(var(--about-slant) + 3rem);
}

/* Mid-page band: slanted on both edges. */
.about-band-both {
    clip-path: polygon(0 var(--about-slant), 100% 0, 100% calc(100% - var(--about-slant)), 0 100%);
    padding-block: calc(var(--about-slant) + 3rem);
}

/* ---------------------------------------------------------------------------
   Diagonal stripe — a red bar crossing a dark section.
   --------------------------------------------------------------------------- */
.about-stripe-wrap {
    position: relative;
    overflow: hidden;
}

/* A fixed-height bar, over-wide and rotated, so its ends always run off-canvas.
   Deliberately NOT a percentage gradient over an oversized box: percentages
   resolve against that box, so the "stripe" scales with section height and
   reads as a slab on tall sections. */
.about-stripe {
    position: absolute;
    /* Low in the section, so it crosses the padding band BELOW the text rather
       than through it — a stripe behind a paragraph wrecks legibility. */
    top: 82%;
    inset-inline: -30%;
    height: 108px;
    background: var(--bs-primary);
    transform: rotate(-13deg);
    pointer-events: none;
}

/* A thinner, dimmer companion, high in the section — together they frame the
   content instead of cutting across it. */
.about-stripe-thin {
    top: 8%;
    height: 22px;
    background: color-mix(in srgb, var(--bs-primary) 55%, transparent);
}

@media (max-width: 767.98px) {
    .about-stripe {
        height: 62px;
    }
    .about-stripe-thin {
        height: 14px;
    }
}

.about-stripe-wrap > .container-xxl {
    position: relative; /* lift content above the stripes */
}

/* ---------------------------------------------------------------------------
   Glowing pill CTA — the signature button. Bootstrap ships no glow utility.
   --------------------------------------------------------------------------- */
.btn-glow {
    border-radius: 50rem;
    padding-inline: 2.25rem;
    box-shadow:
        0 0 22px color-mix(in srgb, var(--accent-glow) 55%, transparent),
        0 0 60px color-mix(in srgb, var(--accent-glow) 32%, transparent);
    transition: box-shadow .2s ease, transform .2s ease;
}

.btn-glow:hover,
.btn-glow:focus-visible {
    box-shadow:
        0 0 30px color-mix(in srgb, var(--accent-glow) 75%, transparent),
        0 0 80px color-mix(in srgb, var(--accent-glow) 45%, transparent);
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------------
   Radial glow backdrop for illustration scenes.
   --------------------------------------------------------------------------- */
.about-scene {
    position: relative;
    isolation: isolate;
}

.about-scene::before {
    content: "";
    position: absolute;
    inset: -25%;
    z-index: -1;
    background: radial-gradient(
        ellipse at center,
        color-mix(in srgb, var(--bs-primary) 45%, transparent) 0%,
        transparent 68%
    );
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Skewed outlined frame — the "card that isn't square" device.
   The inner element counter-skews so the text stays upright.
   --------------------------------------------------------------------------- */
.about-frame {
    border: 2px solid var(--bs-primary);
    border-radius: 1.25rem;
    transform: skewY(-2.2deg);
    box-shadow: 0 0 40px color-mix(in srgb, var(--bs-primary) 25%, transparent);
}

.about-frame > * {
    transform: skewY(2.2deg);
}

/* ---------------------------------------------------------------------------
   Display type — larger + tighter than Bootstrap's display-* ladder, and
   fluid so the long Hebrew headlines never overflow a narrow phone.
   --------------------------------------------------------------------------- */
.about-display {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
}

/* The hero wordmark. brand-mark is em-sized (height 1em / width 3.125em), so the
   fluid clamp above has to reach the SVG itself — it defaults to an fs-3 class,
   which this overrides. Equal specificity, but about.css loads after Bootstrap
   via $pageStyles, so source order settles it. */
.about-mark {
    font-size: clamp(3.5rem, 10vw, 8rem);
    margin-inline: auto;
}

.about-title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.15;
}

/* The giant stat number. */
.about-figure {
    font-size: clamp(4rem, 16vw, 12rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.04em;
    text-shadow: 0 0 60px color-mix(in srgb, var(--bs-primary) 60%, transparent);
}

/* ---------------------------------------------------------------------------
   Text-over-illustration: the heart scene puts a headline on top of the SVG.
   --------------------------------------------------------------------------- */
.about-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    /* The extra bottom padding lifts the text off the geometric centre and onto
       the heart's VISUAL centre — a heart's mass sits high, its lower half
       tapering to a point, so true centring reads as "too low". */
    padding: 1rem 1rem 13%;
}

/* Decorative SVGs are never announced; sizing lives here, not on the tag. */
.about-art {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
   Feature list rows inside the red band (icon + text, no card chrome).
   --------------------------------------------------------------------------- */
.about-listrow {
    border-block-end: 1px solid rgba(var(--bs-white-rgb), .22);
}

.about-listrow:last-child {
    border-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
    .btn-glow {
        transition: none;
    }
    .btn-glow:hover,
    .btn-glow:focus-visible {
        transform: none;
    }
}