/*
    DASH System page, restyled to sit with the maintenance page (css/maintenance.css).
    The 2024 rules for this page in spectron.css centre all text, size photos in vh/vw and leave flex rows that
    cannot shrink (the page was 8px wider than a 1280px window); every rule here starts with .page-dash-system
    so it outranks them without editing that file.
    Photos of equipment on white sit in thin bordered frames like the maintenance component cards (.ds-shot);
    full-bleed photographs and the illustration need no frame (.ds-photo).
*/

/* ------------------------------------------------------------ type and sections */
.page-dash-system .section {
    text-align: left;
}

.page-dash-system .sp-section {
    margin-bottom: 6rem;
}

.page-dash-system h1 {
    margin: 0 0 3rem;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.page-dash-system h2 {
    margin: 0 0 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--sp-ink);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}

.page-dash-system .section p,
.page-dash-system .side-section-paragraph {
    font-size: 1.15rem;
    line-height: 1.6;
}

/* ------------------------------------------------------------ images */
/* spectron.css gives every image here an auto side margin, a 50vh/42vh/20vw cap and width:auto, which is what
   made rows overflow and photos shrink on phones; the grids below size them instead */
.page-dash-system .sp-page img {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    margin: 0;
}

.page-dash-system .sp-page .ds-shot {
    padding: 1rem;
    border: 1px solid var(--sp-rule);
    background: #fff;
    object-fit: contain;
}

/* ------------------------------------------------------------ text beside a picture (intro, controller) */
.page-dash-system .ds-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

    .page-dash-system .ds-split p {
        margin: 0;
    }

.page-dash-system .ds-media .ds-shot {
    aspect-ratio: 3 / 2;
}

/* ------------------------------------------------------------ photo rows */
.page-dash-system .ds-gallery {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    justify-content: start;
    margin-top: 2rem;
}

/* The two photos are a different shape; columns in proportion to each photo's width-to-height ratio give
   them one shared height. Capped so the small helmet photo (323px wide) is not blown up. */
.page-dash-system .ds-gallery-for {
    grid-template-columns: minmax(0, 1.105fr) minmax(0, 0.771fr);
    max-width: 860px;
}

/* both photos are close to 4:3, so one 4:3 frame lines up their edges; cover trims under 1% of the HMD photo */
.page-dash-system .ds-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .page-dash-system .ds-pair img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }

    .page-dash-system .ds-pair .ds-shot {
        object-fit: contain;
    }

/* the camera photos are upright, so they keep their own 3:4 shape rather than the maintenance cards' 4:3 */
.page-dash-system .ds-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

    .page-dash-system .ds-trio .ds-shot {
        aspect-ratio: 3 / 4;
    }

/* closing strip of aircraft photos: proportional columns again, so none of them is cropped */
.page-dash-system .ds-aircraft {
    grid-template-columns: minmax(0, 1.333fr) minmax(0, 1.52fr) minmax(0, 1.592fr);
    margin-top: 0;
}

/* ------------------------------------------------------------ accessories */
/* the inline style on this block adds 10vh; the rows below already open with a rule and their own space */
.page-dash-system .ds-acc-intro {
    margin-bottom: 2.5rem !important;
}

/* each accessory is a row between thin rules, like the maintenance part list, with its name first so the
   three can be scanned down the left edge; the photos come first in the markup, so grid areas place them */
.page-dash-system .ds-item {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas: "text media";
    gap: 2.5rem;
    align-items: start;
    padding: 2.5rem 0;
    border-top: 1px solid var(--sp-rule);
}

    .page-dash-system .ds-item:last-child {
        border-bottom: 1px solid var(--sp-rule);
    }

.page-dash-system .side-section-text {
    grid-area: text;
    display: block;
    width: auto;
    margin: 0;
    text-align: left;
}

    /* these are h2 in the markup but name parts of the Accessories section, so they take the h3 size */
    .page-dash-system .side-section-text h2 {
        margin: 0 0 1rem;
        padding: 0;
        border: 0;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 1.3;
    }

.page-dash-system .ds-item-media {
    grid-area: media;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

    .page-dash-system .ds-item-media .ds-shot {
        aspect-ratio: 3 / 4;
    }

    .page-dash-system .ds-item-media .ds-wide,
    .page-dash-system .ds-item-media .ds-single {
        grid-column: 1 / -1;
    }

    .page-dash-system .ds-item-media .ds-wide {
        aspect-ratio: 16 / 9;
    }

    .page-dash-system .ds-item-media .ds-single {
        aspect-ratio: 4 / 3;
    }

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 900px) {
    .page-dash-system .ds-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* spectron.css turns this row into a reversed column at 1000px; the grid areas set the order instead */
    .page-dash-system .ds-item {
        grid-template-columns: 1fr;
        grid-template-areas: "text" "media";
        gap: 1.5rem;
    }
}

@media (max-width: 600px) {
    .page-dash-system h1 {
        margin-bottom: 2rem;
        font-size: 2.4rem;
    }

    .page-dash-system h2 {
        font-size: 1.8rem;
    }

    .page-dash-system .sp-section {
        margin-bottom: 4rem;
    }

    .page-dash-system .ds-gallery {
        grid-template-columns: 1fr;
        max-width: none;
        gap: 1rem;
    }

    /* one upright photo per row; a square frame keeps each one tall enough to see without filling the screen */
    .page-dash-system .ds-trio .ds-shot {
        aspect-ratio: 1 / 1;
    }

    /* the GCI pair stays side by side: the point is comparing its top and bottom positions */
    .page-dash-system .ds-item-media {
        gap: 1rem;
    }

    .page-dash-system .sp-page .ds-shot {
        padding: 0.75rem;
    }
}

/* ------------------------------------------------------------ centred */
/* section headings centred (the 2px rule under them still runs the full column); text blocks, photo groups and lone
   photos sit in the middle of their space rather than against the left edge */
.page-dash-system .sp-section > h2,
.page-dash-system .ds-acc-intro > h2 {
    text-align: center;
}

.page-dash-system .sp-prose,
.page-dash-system .ds-gallery-for,
.page-dash-system img {
    margin-left: auto;
    margin-right: auto;
}

.page-dash-system .ds-split {
    align-items: center;
}

.page-dash-system .image-text,
.page-dash-system .image-footer {
    justify-content: center;
}