/*
 * Same pinned scroll-mask mechanism as the home page's hero/testing-block/
 * risks-section trio (assets/js/main.js — a dedicated IIFE keyed off
 * #about-scroll-wrapper / #about-intro / #team-section-shell), plus an
 * extra middle "pan" phase: if about-intro's content is taller than the
 * fully-grown pill, main.js measures the overflow and stretches this
 * wrapper's height (overriding the 500vh below via inline style) to add
 * exactly that much extra plain scroll distance, panning the content
 * upward via translateY before the shrink phase is allowed to start —
 * still driven purely by ordinary page scroll, no wheel/touch capture.
 * 500vh here is just the pre-JS/no-JS fallback, matching the original
 * even split (100vh sticky + 200vh grow + 200vh shrink) when there's no
 * overflow to pan through. margin-top:-120px is the same "engage
 * immediately, no dead scroll" trick used on the home page too.
 */
.about-scroll-wrapper {
    position: relative;
    margin-top: -120px;
    height: 500vh;
}

.about-scroll-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.about-hero {
    position: absolute;
    inset: 120px 0 0 0;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 96px;
    overflow: hidden;
    background-image: url('../assets/images/about.hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.15s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .about-hero {
        transition: none;
    }
}

.about-hero__content {
    width: 100%;
}

.about-hero__divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
}

.about-hero__divider--top {
    margin-bottom: 32px;
}

.about-hero__divider--bottom {
    margin-top: 32px;
}

.about-hero__title {
    margin: 0;
    max-width: 1231px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 88px;
    line-height: 108%;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

/* About intro section — the JS-morphed "pill" (assets/js/main.js sets
   width/height/top/left/border-radius inline every frame; none of those
   four are set here, same convention as #testing-block in
   testing-block/style.css). Content lives inside it from the start (like
   testing-block's feature cards) — sizing below is deliberately tight so
   the heading + text + 5 rows + button all fit within one viewport with
   no internal scrolling and no clipping once fully grown. */

.about-intro {
    /* fixed, not absolute — and rendered outside .about-scroll-stage in
       the PHP template on purpose. .about-scroll-stage's position:sticky
       creates its own stacking context, which would trap a z-index set
       here so it could only ever compete against stage-local siblings
       (about-hero) and never against .site-header. Being fixed + a
       sibling in the markup puts this in the SAME stacking context as the
       header, so z-index:20 vs the header's z-index:10 actually applies.
       Visually identical either way — main.js already computes width/
       height/top/left purely from vw/vh, exactly what position:fixed
       needs, and .about-scroll-stage is always flush against the
       viewport top for the whole relevant scroll range anyway. */
    position: fixed;
    /* Higher than .site-header's z-index:10 (see header/style.css) — so
       the pill simply paints over the header once it grows tall enough to
       reach that area, purely through stacking + geometry. No JS class
       toggling needed to hide/show the header at all: it's just naturally
       covered while the pill occupies that space, and reappears on its
       own once the pill shrinks back down past it. */
    z-index: 20;
    /* Explicit fallback width — none of width/height/top/left are set
       inline until main.js's first requestAnimationFrame actually fires,
       which is AFTER the synchronous first measure() call that reads
       .about-intro__inner's offsetHeight to size the pan phase. Without
       this, a fixed-position element with no width resolves to
       shrink-to-fit, which for a flex container whose child wants 100%
       can come out far narrower than the real 680px content width —
       forcing extra, spurious line-wraps that inflate that first
       measurement (worse for longer text, e.g. the Ukrainian translation)
       and throw off every #documents-anchor scroll-position calculation
       based on it. */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    /* flex-start (not center): while the pill is still shorter than the
       content's natural height, top-anchoring lets any overflow clip at
       the bottom instead of symmetrically eating into the top — which
       was cropping the title before it had fully grown. */
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    background: #023A85;
    box-shadow: 0 30px 80px rgba(11, 31, 58, 0.35);
    will-change: width, height, top, left, border-radius;
}

.about-intro__line {
    position: absolute;
    top: 0;
    height: 100%;
    width: auto;
    opacity: 0.5;
    pointer-events: none;
}

.about-intro__line--left {
    left: 6%;
}

.about-intro__line--right {
    right: 6%;
    transform: scaleX(-1);
}

/*
 * No overflow/scroll and no fixed height here on purpose. Height is auto
 * so main.js can read this element's true natural content height
 * (offsetHeight) to detect when it's taller than the fully-grown pill —
 * when it is, JS pans it upward via translateY (driven purely by plain
 * page scroll, see the "pan" phase in main.js's About IIFE) instead of
 * ever making it independently scrollable. A scrollable inner div here
 * previously "ate" mobile swipes: once the browser handed a touch gesture
 * to this div's own scroll, native scroll-chaining back out to the page
 * was unreliable, so scrolling could get stuck with nothing visibly
 * happening. .about-intro (the ancestor) still clips via its own
 * `overflow: hidden`, same as #testing-block on the home page.
 */
.about-intro__inner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 64px 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.about-intro__title {
    margin: 0 0 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

.about-intro__text {
    margin: 0 0 28px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.about-intro__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.about-intro__item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    text-align: left;
}

.about-intro__item-title {
    margin: 0 0 2px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #FFFFFF;
}

.about-intro__item-subtitle {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.about-intro__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding: 14px 28px;
    border: 1px solid #FFFFFF;
    border-radius: 40px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.about-intro__cta .icon-arrow {
    color: #FFFFFF;
}

.about-intro__cta:hover {
    background: #FFFFFF;
    color: #023A85;
}

.about-intro__cta:hover .icon-arrow {
    color: #023A85;
}

@media (max-width: 768px) {
    .about-hero {
        padding: 0 24px;
    }

    .about-hero__title {
        font-size: 48px;
    }

    .about-intro__inner {
        padding: 40px 24px 24px;
    }

    .about-intro__title {
        font-size: 22px;
    }

    .about-intro__line {
        display: none;
    }
}