/* Process page layout refinements.
   Loaded LAST so it beats the unscoped `650px !important` block at the end of
   style.css (~line 3274), which otherwise defeats every responsive breakpoint
   and forces 650px-tall photos and accordion images at any viewport width.

   Goals: stop the photo stacks from eating vertical space, keep the accordion
   compact, and make the accordion image stack (not shrink to a sliver) on
   narrow screens. */

/* ---------------------------------------------------------------- photos --
   Use aspect-ratio instead of fixed pixel heights so crops stay natural. */

.about-section .process-photos-grid {
    grid-auto-rows: auto !important;
    gap: 20px !important;
    margin: 56px auto !important;
    align-items: stretch !important;
}

.about-section .process-photo-item {
    height: auto !important;
    aspect-ratio: 4 / 3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.about-section .process-photo-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Desktop: two on top, one wide below — same rhythm, far less height.
   The wide photo gets a cinematic crop so it doesn't dominate. */
@media (min-width: 1025px) {
    .about-section .process-photos-grid .process-photo-1 {
        grid-column: 2 / 7 !important;
        grid-row: 1 !important;
    }

    .about-section .process-photos-grid .process-photo-2 {
        grid-column: 7 / 12 !important;
        grid-row: 1 !important;
    }

    .about-section .process-photos-grid .process-photo-3 {
        grid-column: 2 / 12 !important;
        grid-row: 2 !important;
        aspect-ratio: 21 / 9;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .about-section .process-photos-grid {
        margin: 44px auto !important;
        gap: 16px !important;
    }

    .about-section .process-photos-grid .process-photo-1 {
        grid-column: 1 / 7 !important;
        grid-row: 1 !important;
    }

    .about-section .process-photos-grid .process-photo-2 {
        grid-column: 7 / 13 !important;
        grid-row: 1 !important;
    }

    .about-section .process-photos-grid .process-photo-3 {
        grid-column: 1 / 13 !important;
        grid-row: 2 !important;
        aspect-ratio: 16 / 9;
    }
}

/* Phone: 2-up mosaic instead of three full-width slabs.
   Cuts the photo block from ~1970px to roughly a third of that. */
@media (max-width: 768px) {
    /* No extra padding here — the parent .container already supplies the
       gutter, and doubling it squeezed the 2-up pair down to ~142px each. */
    .about-section .process-photos-grid {
        margin: 32px auto !important;
        gap: 8px !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Portrait pair reads better than squares at phone widths */
    .about-section .process-photo-item {
        aspect-ratio: 3 / 4;
    }

    .about-section .process-photos-grid .process-photo-1 {
        grid-column: 1 / 7 !important;
        grid-row: 1 !important;
    }

    .about-section .process-photos-grid .process-photo-2 {
        grid-column: 7 / 13 !important;
        grid-row: 1 !important;
    }

    /* Wide establishing shot below the pair */
    .about-section .process-photos-grid .process-photo-3 {
        grid-column: 1 / 13 !important;
        grid-row: 2 !important;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 480px) {
    .about-section .process-photos-grid {
        margin: 26px auto !important;
        gap: 6px !important;
    }
}

/* ------------------------------------------------------------- accordion --
   Trim the vertical rhythm; the 30px header padding plus a 650px image made
   each tab read as an endless column. */

/* Full-bleed grey band.
   style.css uses width:100vw + margin-left:-50vw, which left a white strip at
   narrow widths: 100vw includes the scrollbar gutter but the -50% offset is
   measured against the padded parent, so the two disagree.

   Anchoring the offset to 50% of the *parent* instead of 50vw keeps both sides
   referenced to the same box, so it lines up at every width. */
.process-accordion-section {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    margin-top: 64px !important;
    margin-bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.process-accordion-content {
    gap: 48px;
    align-items: start;
}

.accordion-header {
    padding: 20px 22px !important;
}

.accordion-header h4 {
    font-size: 1.15rem;
}

.accordion-item.active .accordion-body {
    padding: 0 22px 26px !important;
}

.accordion-body p {
    font-size: 1rem;
    line-height: 1.7;
}

/* Accordion image: cap it and let it sit sticky beside the items on desktop
   rather than stretching to an arbitrary 650px. */
.about-section .accordion-image {
    height: auto !important;
    aspect-ratio: 4 / 5;
    max-height: 520px !important;
    position: sticky;
    top: 100px;
}

.about-section .accordion-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Below the desktop breakpoint the flex row squeezed the image to a 6-33px
   sliver, because nothing ever set flex-direction: column. */
@media (max-width: 900px) {
    .process-accordion-content {
        flex-direction: column !important;
        gap: 28px !important;
    }

    .accordion-items,
    .about-section .accordion-image {
        flex: 1 1 auto !important;
        width: 100% !important;
    }

    .about-section .accordion-image {
        aspect-ratio: 16 / 9;
        max-height: 300px !important;
        position: static;
        order: -1; /* photo first, then the expandable list */
    }
}

@media (max-width: 768px) {
    .process-accordion-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
        margin-top: 44px !important;
    }

    /* Keep the inner content clear of the screen edge now that the section
       itself is genuinely full-bleed. */
    .process-accordion-container {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    .accordion-header {
        padding: 16px 18px !important;
    }

    .accordion-header h4 {
        font-size: 1.05rem;
        line-height: 1.35;
        padding-right: 12px;
    }

    .accordion-item.active .accordion-body {
        padding: 0 18px 20px !important;
    }

    .about-section .accordion-image {
        max-height: 220px !important;
    }
}

/* ----------------------------------------------------------- hero/intro --
   The intro block also ran to 1176px on a phone; tighten the image. */
@media (max-width: 768px) {
    .about-section .process-image {
        height: auto !important;
        aspect-ratio: 4 / 3;
    }

    .about-section .process-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
}