/* =============================================
   Our Approach – Principles Grid
   assets/css/our-approach-grid.css
   ============================================= */

/* --------------------------------------------------
   Fix: remove WordPress constrained layout left margin
   -------------------------------------------------- */
.our-approach .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    margin-left: 0 !important;
}

/* --------------------------------------------------
   1. Pin divider + verse to the bottom of each card

   Cards are now is-layout-grid themselves.
   Override to flex-column so we can use flex-grow
   on the description to push hr + verse to bottom.
   -------------------------------------------------- */

/* Outer grid: stretch all cells to equal row height */
.our-approach .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:not(.has-base-background-color) {
    align-items: stretch !important;
}

/* Each card (direct child of outer grid) must fill its cell */
.our-approach .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:not(.has-base-background-color) > .wp-block-group {
    height: 100% !important;
}

/* Override the card's own is-layout-grid to flex-column
   so we can pin content to the bottom */
.our-approach .wp-block-group.has-base-background-color.is-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Title: natural height, no grow */
.our-approach .wp-block-group.has-base-background-color.is-layout-grid > p.has-large-font-size {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Description: grows to fill all available space,
   pushing the hr + verse to the bottom */
.our-approach .wp-block-group.has-base-background-color.is-layout-grid > p.has-medium-font-size {
    flex-grow: 1 !important;
    flex-shrink: 0;
    margin-bottom: 0;
}

/* Divider: 1px solid #C9C9C9, full width, no shrink */
.our-approach .wp-block-group.has-base-background-color.is-layout-grid > .wp-block-separator {
    border: none !important;
    border-top: 1px solid #C9C9C9 !important;
    height: 1px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: transparent !important;
    opacity: 1 !important;
    flex-shrink: 0;
    align-self: stretch;
}

/* Verse: pinned at bottom */
.our-approach .wp-block-group.has-base-background-color.is-layout-grid > p.has-accent-1-color {
    flex-shrink: 0;
    margin-bottom: 0;
}

/* --------------------------------------------------
   2 & 3. Responsive grid: 4 > 3 > 2 > 1 columns
          Last row of 3 cards centred under 4-col row
   -------------------------------------------------- */

/* Desktop: 12-col internal grid so we can offset the last 3 cards */
@media (min-width: 1101px) {
    .our-approach .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:not(.has-base-background-color) {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        gap: var(--wp--preset--spacing--30, 1.5rem) !important;
    }

    /* Row 1: cards 1–4, each spanning 3 of 12 columns */
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group:nth-child(1) { grid-column: 1 / span 3; }
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group:nth-child(2) { grid-column: 4 / span 3; }
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group:nth-child(3) { grid-column: 7 / span 3; }
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group:nth-child(4) { grid-column: 10 / span 3; }

    /* Row 2: cards 5–7 start at col 2 so trio occupies cols 2–10, centred */
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group:nth-child(5) { grid-column: 2 / span 3; }
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group:nth-child(6) { grid-column: 5 / span 3; }
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group:nth-child(7) { grid-column: 8 / span 3; }
}

/* Tablet: 3 columns */
@media (min-width: 601px) and (max-width: 1100px) {
    .our-approach .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:not(.has-base-background-color) {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--wp--preset--spacing--30, 1.5rem) !important;
    }
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group {
        grid-column: auto !important;
    }
}

/* Small tablet: 2 columns */
@media (min-width: 481px) and (max-width: 600px) {
    .our-approach .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:not(.has-base-background-color) {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--wp--preset--spacing--30, 1.5rem) !important;
    }
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group {
        grid-column: auto !important;
    }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
    .our-approach .wp-block-group.is-layout-grid.wp-block-group-is-layout-grid:not(.has-base-background-color) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--wp--preset--spacing--30, 1.5rem) !important;
    }
    .our-approach .wp-block-group.is-layout-grid:not(.has-base-background-color) > .wp-block-group {
        grid-column: auto !important;
    }
}