/* ==========================================================
   ABOUT PAGE
   Loaded only by Views/Home/About.cshtml via ~/bundles/about-css.
   Site-wide components stay in style.css / mobile_style.css.
   ========================================================== */

/* ---- Header ----
   Height follows the photo (ImagePreset.AboutHeader: 2508x800; 3:2 photo on phones). */
.about-header {
    width: 100%; /* see .home-hero in home.css: keeps max-height from shrinking the width */
    aspect-ratio: 2508 / 800;
    max-height: calc(100vh - var(--nav-h));
    overflow: hidden;
    background-color: #1c2125;
}

.about-header picture {
    display: block;
    height: 100%;
}

.about-header__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Company profile ---- */
.about-intro p {
    margin: 0 0 8px;
    color: #212529;
    font-size: 17px;
    line-height: 30px;
}

.about-intro strong {
    font-weight: 700;
}

.about-intro .about-intro__note {
    margin-top: 24px;
    color: #6c757d;
    font-size: 14px;
    line-height: 24px;
}

/* ---- Organization chart ----
   Each brand logo is a link: a window (18% x 15% of the chart, left edge --left %, set in About.cshtml)
   onto the full-colour chart, which fades in on hover so only that logo turns to colour. */
.about-org {
    position: relative;
}

.about-org__brand {
    position: absolute;
    top: 53.2%;
    left: calc(var(--left) * 1%);
    width: 18%;
    height: 18.9%;
    overflow: hidden;
}

/* Scaled back to the chart's full width and shifted so it lines up with the black chart underneath
   (percentages are of the link: 100% / 18% = chart width, top 53.2% / 18.9% = chart offset). */
.about-org__brand-color {
    position: absolute;
    top: calc(-53.2% / 0.189);
    left: calc(var(--left) * -1% / 0.18);
    width: calc(100% / 0.18);
    max-width: none;
    height: auto;
    opacity: 0;
    transition: opacity 200ms ease;
}

.about-org__brand:hover .about-org__brand-color,
.about-org__brand:focus-visible .about-org__brand-color {
    opacity: 1;
}

.about-org__brand:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 2px;
}

/* ==========================================================
   About page: responsive
   ========================================================== */
@media (max-width: 767.98px) {
    .about-header {
        aspect-ratio: 3 / 2;
    }

    .about-intro p {
        font-size: 15px;
        line-height: 26px;
    }
}

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