/* --- Procurement / Services --- */
.hero-info-block.hero-info-center {
    align-self: center;
    max-width: 600px;
}

/* =========================================
   EXECUTION PROCESS - GRID LAYOUT
   ========================================= */
/* Main grid container - simple 3-column grid */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 4rem;

    /* Space between rows */
}

/* Individual process step - flexbox layout */
.process-step {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

/* Number styling */
.process-number {
    line-height: 1;

    /* min-height: 2.5em */
    /* Fixed height for alignment */
    display: block;
}

.process-number-ghost {
    min-height: 2.5em;

    /* Match number height */
}

/* Content wrapper */
.process-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 8em;

    /* Min height to keep arrows aligned */
}

.process-header {
    margin: 0;
    min-height: 8em;
    position: relative;
    top: 1.1rem;

    /* Match content height */
}

.process-content-ghost {
    min-height: 8em;

    /* Match content height */
}

.process-title {
    margin: 0;
}

.process-description {
    margin: 0;
    max-width: 35ch;
}

/* SVG Arrow */
.process-arrow {
    width: 100%;
    height: auto;
    max-height: 45px;
    color: var(--color-text-main);
    margin-top: auto;
}

/* Arrow visibility: hide at end of each row (positions 3, 6, 9) */
/* .process-grid> :nth-child(3n) .process-arrow {
    visibility: hidden;
} */
/* Footer block */
.process-footer {
    display: flex;
    align-items: flex-end;
    min-height: 3em;
}

/* Tablet: 2 columns */
@media screen and (max-width: 991px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 3rem;
    }

    /* Reset desktop hide logic */
    .process-grid> :nth-child(3n) .process-arrow {
        visibility: visible;
    }

    /* Keep arrows visible on tablet rows */
    .process-grid> :nth-child(2n) .process-arrow {
        visibility: visible;
    }
}

/* Mobile: Stack */
@media screen and (max-width: 767px) {
    .process-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .process-step {
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        border-top: 3px solid var(--color-text-main);
        gap: 1rem;
    }

    .process-static-header {
        border-top: none;
        padding-top: 0;
    }

    .process-static-header .process-arrow,
    .process-arrow {
        display: none;
    }

    .process-number,
    .process-number-ghost,
    .process-content,
    .process-header,
    .process-content-ghost {
        min-height: 0;

        /* Remove fixed heights on mobile */
    }

    /*    .process-footer {
        padding-top: 2rem;
        border-top: 3px solid var(--color-text-main);
        min-height: 0;
    }
 */
    .process-number-ghost,
    .process-content-ghost {
        display: none;
    }
}

.service-item {
    border-top: 3px solid var(--color-text-main);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    display: grid;
    align-content: start;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0;
}

.advantage-item {
    border-top: 3px solid var(--color-text-main);
    padding-top: 1.5rem;
}

/* Page Hero Positions */
.procurement-subhead-pos {
    /* align-self: end */
}

.procurement-head-pos {
    grid-area: 1 / 1 / 2 / 9;
}

.procurement-subheader-pos {
    grid-area: 1 / 9 / 2 / 13;
    align-self: end;
}

.from-brief-table-pos {
    grid-area: 1 / 7 / 2 / 13;
}

/* Override base.css grid stacking for this section - maintain full-width stack until mobile */
@media screen and (min-width: 768px) and (max-width: 991px) {

    .from-brief-to-aftercare,
    .from-brief-table-pos {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        margin-bottom: 2rem !important;
    }
}

/* Partnerships / Who We Work With - Tile Layout */
.who-we-work-with {
    grid-area: 1 / 1 / 2 / 13;
}

.who-we-work-pos {
    grid-area: 2/ 7 / 3 / 13;
}

.who-we-work-img-pos {
    grid-area: 2 / 1 / 3 / 4;
}

@media screen and (max-width: 991px) {

    .who-we-work-with,
    .who-we-work-pos,
    .who-we-work-img-pos {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100%;
        margin-bottom: 3rem;
    }

    /* Stack the inner grid if present */
    .who-we-work-with .grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
}

@media screen and (max-width: 767px) {

    .who-we-work-pos,
    .who-we-work-img-pos {
        grid-area: auto;
    }

    .from-brief-table-pos {
        grid-area: auto;
    }
}

@media screen and (max-width: 991px) {
    .procurement-head-pos {
        grid-area: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
        width: 100%;
        grid-column: 1 / -1;
    }

    .procurement-subheader-pos {
        grid-area: auto;
        width: 100%;
        grid-column: 1 / -1;
        margin-top: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .from-brief-table-pos {
        grid-area: auto;
    }
}

/* =========================================
   PROCUREMENT: DECOUPLED GRIDS (FIXED & EXPLICIT)
   ========================================= */
/* DESKTOP (min-width: 992px) */
@media screen and (min-width: 992px) {

    /* 1. Complete Services Grid - Strict 3-Col */
    .procurement-services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row;
        gap: 2rem 1.5rem;
        width: 100%;
    }

    /* First Column Empty Cell Logic - Only on Desktop */
    .procurement-services-grid .procurement-grid-skip {
        display: block;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .procurement-services-grid .service-item {
        grid-column: auto / span 1;
        width: 100%;
        height: 100%;
    }

    .procurement-services-grid .procurement-grid-ghost {
        display: block;
        grid-column: auto / span 1;
    }

    /* Add bottom border to last row - Excludes ghost cell */
    .procurement-services-grid>:nth-last-child(-n+3):not(.procurement-grid-ghost) .service-item {
        border-bottom: 3px solid var(--color-text-main);
    }

    .procurement-services-grid>:nth-last-child(-n+3) .service-item {
        padding-bottom: 3.5rem;

        /* Base 1.5rem + Gap 2rem to maintain rhythm */
    }

    .procurement-services-grid .procurement-grid-ghost {
        border-top: 3px solid var(--color-text-main);
        padding-top: 1.5rem;
        padding-bottom: 3.5rem;
    }

    /* 2. Why Choose Advantages Grid - Strict 2-Col */
    .trika-advantages-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1rem;
        width: 100%;
    }

    .trika-advantages-grid .advantage-item {
        width: 100%;
        grid-column: auto;
    }

    /* Add bottom border to last row (items 4, 5, 6) */
    .trika-advantages-grid>div:nth-last-child(-n+3) .advantage-item {
        border-bottom: 3px solid var(--color-text-main);
        padding-bottom: 1.5rem;
    }
}

/* MOBILE/TABLET (max-width: 991px) */
@media screen and (max-width: 991px) {

    /* Stack Services */
    .procurement-services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 100%;
    }

    /* Hide empty skip/ghost cells on mobile */
    .procurement-services-grid .procurement-grid-skip,
    .procurement-services-grid .procurement-grid-ghost {
        display: none;
    }

    /* Add bottom border and matching rhythm padding to last visible service item on mobile */
    .procurement-services-grid>:nth-last-child(2) .service-item {
        border-bottom: 3px solid var(--color-text-main);
        padding-bottom: 3.5rem;

        /* Base 1.5rem + Gap 2rem */
    }

    /* Stack Advantages */
    .trika-advantages-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 100%;
    }

    /* Add bottom border to last item on mobile only for separation */
    .trika-advantages-grid>div:last-child .advantage-item {
        border-bottom: 3px solid var(--color-text-main);
        padding-bottom: 1.5rem;
    }
}

/* --- Image Captions --- */
.image-caption-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    display: grid;
    grid-template-areas: "stack";
    justify-items: end;
    align-items: end;
    padding-bottom: 2rem;
    padding-right: 2rem;
}

.hero-captions-container {
    /* padding-bottom: 1rem */
    /* padding-right: 0 */
}

.image-caption {
    grid-area: stack;
    color: var(--color-text-inverted);
    font-size: var(--text-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width: 767px) {
    .image-caption-container {
        padding-bottom: 1rem;
        padding-right: 1.5rem;
    }
}