/* assets/css/section.css */
.gtm-section {
    width: 100%;
    padding: clamp(40px, 5vw, 64px) 0;
    position: relative;
    overflow: hidden;
}

.gtm-section.gtm-bg-grey {
    background-color: #E2E2E2;
}

.gtm-section.gtm-bg-white {
    background-color: #FFFFFF;
}

.gtm-section-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.gtm-section-title {
    font-weight: 900;
    font-size: 32px;
    line-height: 40px;
    text-transform: uppercase;
    color: #9D9D9D;
    margin: 0 0 24px 0; /* Tightened from 32px */
}

.gtm-section-btn-wrap {
    margin-top: 32px;
    text-align: center;
}

.gtm-section-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    min-width: 209px;
    background: #342E37;
    color: #fff;
    border-radius: 96px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    transition: box-shadow 0.2s ease-in-out;
}

.gtm-section-btn:hover {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
    color: #fff;
    transform: none;
}

.brand-services {
    padding: 32px 0;
}

@media (max-width:768px) {
    .gtm-section-inner {
        padding: 0 16px;
    }

    .gtm-section-title {
        font-size: 28px;
    }
}

/* Explore GT Grid - Replaces Bootstrap Utility Classes */
.gtm-explore-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px; /* Tightened from 24px */
    margin-top: 0; /* Removed margin - title handles spacing */
}

@media (min-width: 768px) {
    .gtm-explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .gtm-explore-grid {
        /* Default 3-up. When the GT Performance card is re-enabled
           (GTM_SHOW_GT_PERFORMANCE=true), section-explore-gt.php adds the
           .gtm-explore-grid--four modifier below to switch this to 4-up. */
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 4-up when the GT Performance card is shown. section-explore-gt.php adds the
   .gtm-explore-grid--four modifier when GTM_SHOW_GT_PERFORMANCE is true. */
@media (min-width: 1200px) {
    .gtm-explore-grid--four {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Ensure full height for cards within grid */
.gtm-explore-grid>div,
.gtm-explore-grid>div>.card {
    height: 100%;
}

/* ==========================================================================
   Editorial vertical rhythm - About GT Motorcycles + Maintenance pages only
   --------------------------------------------------------------------------
   The owner finds these long-form content pages cramped. We give them a more
   generous, magazine-style section rhythm (56px mobile -> 96px desktop, up
   from 40 -> 64) WITHOUT touching the homepage, which shares .gtm-section and
   must stay tighter/denser. Scoped via the WordPress page-template body class
   so the homepage and all other pages are unaffected. Values stay on the 8px
   grid. Content width is unchanged.
   ========================================================================== */
body.page-template-page-maintenance-servicing .gtm-section,
body.page-template-page-history-and-culture .gtm-section,
body.page-template-page-legends-cafe .gtm-section,
body.page-template-page-meet-the-team .gtm-section {
    padding: clamp(56px, 6.5vw, 96px) 0;
}


/* NOTE: the special, non-.gtm-section bands on these pages
   (.section-team-spotlight, .team-grid__content, .section-why-choose,
   .gtm-icon-grid-section, .section-journey-cta) are harmonised to this
   same 56 -> 96px rhythm at their own source files, because those files
   load AFTER section.css and would otherwise win on cascade order.
   See meet-the-team.css, journey-cta.css and icon-grid.css. */

/* ==========================================================================
   Image + text two-column bands: vertical symmetry
   --------------------------------------------------------------------------
   Bug: every image+text section uses a Bootstrap `.row.align-items-center`
   with a vertical-gutter class (g-4 / g-5 / gy-*). Bootstrap sets
   `--bs-gutter-y` and pulls the row up with `margin-top: calc(-1 * gutter)`,
   then normally cancels it with `margin-top: gutter` on each column. base.css
   (`.row [class^="col-"] { margin-top: 0 }`) kills that per-column cancel, so
   the row keeps its negative margin and the content is yanked up by the gutter
   height (24px at g-4, 48px at g-5). The result: content sits ABOVE the top
   padding line while the full pad remains below -> the section reads
   top-heavy with a large gap underneath, at every desktop width.

   Fix: zero the vertical gutter for this two-column pattern only, so the row
   top aligns with the padded area and `align-items: center` centres the
   columns symmetrically. `--bs-gutter-y: 0` also neutralises the compensating
   `margin-top: var(--bs-gutter-y)` that brand-services.css re-adds on branded
   pages, keeping both paths consistent. Scoped to `.align-items-center` so
   multi-card grids (.homeCards, icon grid, team grid) keep their row-to-row
   gutter. A row-gap restores the stacking gap when the columns stack < lg.
   Applies site-wide (homepage dealer band, maintenance, history & culture,
   legends cafe, meet-the-team spotlights / why-choose, branded services).
   ========================================================================== */
.row.align-items-center {
    --bs-gutter-y: 0;
    margin-top: 0;
}

@media (max-width: 991.98px) {
    /* Columns are stacked here; row-gap only spaces the wrapped lines, so it
       never reintroduces a top offset. 40px keeps the image and copy clearly
       separated on the 8px grid. */
    .row.align-items-center {
        row-gap: 40px;
    }
}