/* ── GBP Case Study Patterns ── */

/* Meta Bar */
.gbp-case-study-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 48px;
    align-items: center;
    padding: 24px 0;
    margin: 24px 0;
}

.gbp-case-study-meta-bar .gbp-meta-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
}

.gbp-case-study-meta-bar .gbp-meta-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.gbp-case-study-meta-bar .gbp-meta-icon .wp-block-image,
.gbp-case-study-meta-bar .gbp-meta-icon figure {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gbp-case-study-meta-bar .gbp-meta-icon img {
    display: block;
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.gbp-case-study-meta-bar .gbp-meta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.gbp-case-study-meta-bar .gbp-meta-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #111111;
    margin: 0;
}

.gbp-case-study-meta-bar .gbp-meta-value {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e;
    margin: 0;
}

/* Inline variant — label and value flow on one line. Toggle via the
   GBP Classes panel ("Meta Bar → Inline") on the outer meta bar group. */
.gbp-case-study-meta-bar.gbp-meta-bar-inline .gbp-meta-text {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

/* Text Section */
.gbp-case-study-text-section {
    max-width: 900px;
    margin: 64px auto;
}

.gbp-case-study-text-section .gbp-section-label {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
}

.gbp-case-study-text-section .gbp-section-body {
    font-size: 15px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 16px;
}

/* 4-Image Row */
.gbp-case-study-image-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 36px 0;
    /* Images visible per view in the mobile carousel (see ≤640px rules).
       Overridden by the .gbp-carousel-per-* classes the "Images per view"
       control writes. Unused outside the mobile breakpoint. */
    --gbp-per: 1.15;
}

/* Mobile carousel — images-per-view presets (set by the inspector control) */
.gbp-case-study-image-row-4.gbp-carousel-per-1 { --gbp-per: 1; }
.gbp-case-study-image-row-4.gbp-carousel-per-1-5 { --gbp-per: 1.5; }
.gbp-case-study-image-row-4.gbp-carousel-per-2 { --gbp-per: 2; }
.gbp-case-study-image-row-4.gbp-carousel-per-2-5 { --gbp-per: 2.5; }

.gbp-case-study-image-row-4 figure {
    margin: 0;
}

.gbp-case-study-image-row-4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    aspect-ratio: 1 / 1;
}

/* Mixed Media (featured left + stacked right) */
.gbp-case-study-mixed-media {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    margin: 40px 0;
    align-items: stretch;
}

.gbp-case-study-mixed-media figure {
    margin: 0;
}

.gbp-case-study-mixed-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.gbp-case-study-mixed-media .gbp-mixed-right {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

/* Approach with bullets */
.gbp-case-study-approach {
    max-width: 900px;
    margin: 64px auto;
}

.gbp-case-study-approach .gbp-section-label {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
}

.gbp-case-study-approach .gbp-approach-intro {
    font-weight: 700;
    font-size: 16px;
    color: #1a1a2e;
    margin: 0 0 12px;
}

.gbp-case-study-approach ul {
    margin: 0 0 16px;
    padding-left: 20px;
}

.gbp-case-study-approach li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Map + Photo Split */
.gbp-case-study-map-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 40px 0;
}

.gbp-case-study-map-split figure {
    margin: 0;
}

.gbp-case-study-map-split img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    aspect-ratio: 4 / 3;
}

/* Outcome with subsections */
.gbp-case-study-outcome {
    max-width: 900px;
    margin: 64px auto;
}

.gbp-case-study-outcome .gbp-section-label {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px;
}

.gbp-case-study-outcome h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 28px 0 8px;
}

.gbp-case-study-outcome p {
    font-size: 15px;
    line-height: 1.75;
    color: #444;
    margin: 0 0 12px;
}

/* More Work */
.gbp-case-study-more-work {
    margin: 72px 0 40px;
}

.gbp-case-study-more-work .gbp-more-work-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
}

.gbp-case-study-more-work .gbp-more-work-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
}

.gbp-case-study-more-work .gbp-more-work-header .gbp-see-all {
    margin: 0;
    font-size: 14px;
    color: #1a1a2e;
}

.gbp-case-study-more-work .gbp-more-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gbp-case-study-more-work .gbp-more-work-grid figure {
    margin: 0;
}

.gbp-case-study-more-work .gbp-more-work-grid img {
    width: 100%;
    display: block;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 1024px) {
    .gbp-case-study-image-row-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .gbp-case-study-mixed-media,
    .gbp-case-study-map-split {
        grid-template-columns: 1fr;
    }

    .gbp-case-study-mixed-media .gbp-mixed-right {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .gbp-case-study-more-work .gbp-more-work-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gbp-case-study-meta-bar {
        gap: 24px 32px;
    }
}

@media (max-width: 640px) {
    .gbp-case-study-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .gbp-case-study-mixed-media .gbp-mixed-right,
    .gbp-case-study-more-work .gbp-more-work-grid {
        grid-template-columns: 1fr;
    }

    /* 4-image row becomes a swipeable, scroll-snapping carousel. Each slide
       shows large, square (1:1) images; how many are visible per view is
       driven by --gbp-per (the "Images per view" inspector control). */
    .gbp-case-study-image-row-4 {
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        margin: 24px 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gbp-case-study-image-row-4::-webkit-scrollbar {
        display: none;
    }

    .gbp-case-study-image-row-4 figure {
        flex: 0 0 calc((100% - (var(--gbp-per) - 1) * 10px) / var(--gbp-per));
        scroll-snap-align: start;
    }

    .gbp-case-study-image-row-4 img {
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* Tablet carousel (641–1024px) — opt-in.
   By default the 4-image row is a 2-up grid at this breakpoint (see the
   max-width:1024px rule above). When the "Images per view (tablet)" control
   adds a .gbp-carousel-tablet-* class, the row turns into the same swipeable,
   scroll-snapping carousel used on mobile, showing --gbp-per images per view.
   No class → grid stays, so previously-saved blocks are unaffected. The
   attribute selector raises specificity to (0,2,0) so it wins over the
   plain 2-up grid rule regardless of source order. */
@media (min-width: 641px) and (max-width: 1024px) {
    .gbp-case-study-image-row-4[class*="gbp-carousel-tablet-"] {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gbp-case-study-image-row-4[class*="gbp-carousel-tablet-"]::-webkit-scrollbar {
        display: none;
    }

    .gbp-case-study-image-row-4[class*="gbp-carousel-tablet-"] figure {
        flex: 0 0 calc((100% - (var(--gbp-per) - 1) * 10px) / var(--gbp-per));
        scroll-snap-align: start;
    }

    .gbp-case-study-image-row-4[class*="gbp-carousel-tablet-"] img {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .gbp-case-study-image-row-4.gbp-carousel-tablet-1 { --gbp-per: 1; }
    .gbp-case-study-image-row-4.gbp-carousel-tablet-1-5 { --gbp-per: 1.5; }
    .gbp-case-study-image-row-4.gbp-carousel-tablet-2 { --gbp-per: 2; }
    .gbp-case-study-image-row-4.gbp-carousel-tablet-2-5 { --gbp-per: 2.5; }
    .gbp-case-study-image-row-4.gbp-carousel-tablet-3 { --gbp-per: 3; }
}

/* Desktop carousel (≥1025px) — opt-in.
   Mirrors the tablet rule above for the largest breakpoint, where the row is
   normally a 4-up grid. A .gbp-carousel-desktop-* class (from the "Images per
   view (desktop)" control) flips it into the carousel. No class → 4-up grid
   stays, preserving existing blocks. */
@media (min-width: 1025px) {
    .gbp-case-study-image-row-4[class*="gbp-carousel-desktop-"] {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .gbp-case-study-image-row-4[class*="gbp-carousel-desktop-"]::-webkit-scrollbar {
        display: none;
    }

    .gbp-case-study-image-row-4[class*="gbp-carousel-desktop-"] figure {
        flex: 0 0 calc((100% - (var(--gbp-per) - 1) * 10px) / var(--gbp-per));
        scroll-snap-align: start;
    }

    .gbp-case-study-image-row-4[class*="gbp-carousel-desktop-"] img {
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .gbp-case-study-image-row-4.gbp-carousel-desktop-1 { --gbp-per: 1; }
    .gbp-case-study-image-row-4.gbp-carousel-desktop-2 { --gbp-per: 2; }
    .gbp-case-study-image-row-4.gbp-carousel-desktop-2-5 { --gbp-per: 2.5; }
    .gbp-case-study-image-row-4.gbp-carousel-desktop-3 { --gbp-per: 3; }
    .gbp-case-study-image-row-4.gbp-carousel-desktop-3-5 { --gbp-per: 3.5; }
    .gbp-case-study-image-row-4.gbp-carousel-desktop-4 { --gbp-per: 4; }
}

/* Side padding (left + right). Tablet & mobile (≤1024px) and a separate
   desktop (≥1025px) scale, set by the "Side padding" inspector controls.

   Why this block needed extra care to make padding "stick":
   1. box-sizing — the row is a grid (and a flex carousel ≤640px). Without
      border-box, padding adds to the width, and the page's
      `.single-post { overflow-x: hidden }` then clips the right inset off
      screen, so it looks like padding-right "does nothing". border-box keeps
      the padding inside the box so the tracks/slides simply shrink.
   2. !important — beats the block's own `margin: 40px 0` neighbours and any
      parent-theme / Gutenberg layout padding applied to .wp-block-group. */
.gbp-case-study-image-row-4[class*="gbp-side-pad-"] {
    box-sizing: border-box;
}

/* The `body` prefix raises specificity to (0,3,1) so these win over the
   parent theme's `.wp-block-group` / `body .wp-block-group` padding even when
   that rule is also !important. scroll-padding makes the gutter survive when
   the row is a scroll-snap carousel (≤640px, or tablet slider) so snapped
   slides don't sit flush against the edge. padding-right on the scroll
   container is honoured by current Chrome/Firefox/Safari. */
@media (max-width: 1024px) {
    body .gbp-case-study-image-row-4.gbp-side-pad-8 { padding-left: 8px !important; padding-right: 8px !important; scroll-padding: 0 8px; }
    body .gbp-case-study-image-row-4.gbp-side-pad-12 { padding-left: 12px !important; padding-right: 12px !important; scroll-padding: 0 12px; }
    body .gbp-case-study-image-row-4.gbp-side-pad-16 { padding-left: 16px !important; padding-right: 16px !important; scroll-padding: 0 16px; }
    body .gbp-case-study-image-row-4.gbp-side-pad-22 { padding-left: 22px !important; padding-right: 22px !important; scroll-padding: 0 22px; }
    body .gbp-case-study-image-row-4.gbp-side-pad-32 { padding-left: 32px !important; padding-right: 32px !important; scroll-padding: 0 32px; }
}

@media (min-width: 1025px) {
    body .gbp-case-study-image-row-4.gbp-side-pad-desktop-8 { padding-left: 8px !important; padding-right: 8px !important; }
    body .gbp-case-study-image-row-4.gbp-side-pad-desktop-12 { padding-left: 12px !important; padding-right: 12px !important; }
    body .gbp-case-study-image-row-4.gbp-side-pad-desktop-16 { padding-left: 16px !important; padding-right: 16px !important; }
    body .gbp-case-study-image-row-4.gbp-side-pad-desktop-22 { padding-left: 22px !important; padding-right: 22px !important; }
    body .gbp-case-study-image-row-4.gbp-side-pad-desktop-32 { padding-left: 32px !important; padding-right: 32px !important; }
}

/* Custom image size — set by the "Image width/height" inspector controls
   (gbp-image-offset-width.js). The row group carries gbp-img-w-set /
   gbp-img-h-set plus inline --gbp-img-w / --gbp-img-h vars to size every
   image; the same class + var on an individual figure overrides the row
   value for just that image (own inline var beats the inherited one, and
   the figure selector's extra class wins the specificity tie). No marker
   class → the default responsive sizing above applies untouched, so blocks
   saved before these controls existed render exactly as before.

   An explicit height drops the default 1:1 aspect and lets object-fit:cover
   (from the base rule) crop instead. max-width stops a too-large width from
   overflowing the grid track / carousel slide. These rules sit after the
   carousel media queries so they also win their (0,2,1) specificity ties. */
.gbp-case-study-image-row-4.gbp-img-w-set img {
    width: var(--gbp-img-w);
    max-width: 100%;
}

.gbp-case-study-image-row-4.gbp-img-h-set img {
    height: var(--gbp-img-h);
    aspect-ratio: auto;
}

.gbp-case-study-image-row-4 figure.gbp-img-w-set img {
    width: var(--gbp-img-w);
    max-width: 100%;
}

.gbp-case-study-image-row-4 figure.gbp-img-h-set img {
    height: var(--gbp-img-h);
    aspect-ratio: auto;
}