/* ---- Section base -------------------------------------------------------- */

.pb-section-pb-f-large-image-grid {
    position: relative;
}

/* ---- Margin wrapper ------------------------------------------------------ */

.pb-section-pb-f-large-image-grid .pb-section-margin-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 768px) {
    .pb-section-pb-f-large-image-grid .pb-section-margin-wrap {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1280px) {
    .pb-section-pb-f-large-image-grid .pb-section-margin-wrap {
        padding-left: 0;
        padding-right: 0;
    }
}

.pb-section-pb-f-large-image-grid .pb-large-image-grid-intro {
    max-width: 720px;
    margin: 0 auto 40px;
}
.pb-section-pb-f-large-image-grid .pb-large-image-grid-intro.section-intro-align-left {
    margin: 0 0 40px;
}

.pb-section-pb-f-large-image-grid .pb-large-image-grid-intro.section-intro-align-right {
    margin: 0 0 40px;
    text-align: right;
}



.pb-section-pb-f-large-image-grid .pb-large-image-grid-intro p {
    font-family: var(--font-body, 'Outfit', sans-serif);
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 16px;
}

.pb-section-pb-f-large-image-grid .pb-large-image-grid-intro a {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   Tiles grid + columns
   (ported from .industries__grid: 3-up desktop, gap 50px)
   ========================================================================== */

.pb-section-pb-f-large-image-grid .pb-large-image-grid-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.pb-section-pb-f-large-image-grid .pb-large-image-grid-item {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

@media (min-width: 768px) {
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-row {
        gap: 50px;
    }
}

@media (min-width: 768px) and (max-width: 1130px) {
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-row.columns-2,
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-row.columns-3,
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-row.columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1131px) {
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-row.columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-row.columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-row.columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Optional tile link wrapper
   When a tile has a link, the whole <figure> is wrapped in an <a> (mirrors the
   original front-page a.industry-card, where the card itself was the anchor).
   The anchor must be transparent to layout: it is the flex child of the
   .pb-large-image-grid-item, so it takes the tile's full width and the figure
   inside it fills the anchor. All .pb-large-image-grid-tile / corner-clip /
   overlay / label / img rules are descendant selectors (not direct-child), so
   they apply identically whether the figure is wrapped or not.
   ========================================================================== */

.pb-section-pb-f-large-image-grid .pb-large-image-grid-tile-link {
    display: block;
    width: 100%;
    /* The visuals live on the figure; the anchor carries no border/box of its
       own and inherits text colour so the label keeps its white colour. */
    color: inherit;
    text-decoration: none;
    /* Keep the focus ring crisp; the tile's own overflow clip is on the figure,
       so the ring on this anchor is not clipped (see :focus-visible below). */
}

.pb-section-pb-f-large-image-grid .pb-large-image-grid-tile-link > .pb-large-image-grid-tile {
    /* The figure already declares width:100% + aspect-ratio; nothing extra is
       needed, but make the inheritance explicit so a wrapped tile matches an
       unwrapped one exactly. */
    margin: 0;
}

/* Hover: port the front-page .industry-card:hover img zoom to the linked tile
   (pointer users), matching the unlinked-tile :hover already defined below. */
.pb-section-pb-f-large-image-grid .pb-large-image-grid-tile-link:hover .pb-large-image-grid-img {
    transform: scale(1.05);
}

/* Focus-visible (WCAG 2.4.7 / 1.4.11 / 2.4.13): linked tiles need a clearly
   visible keyboard focus indicator. Match the theme's established two-tone ring
   (black outline + white/teal-light box-shadow band, see pb-template-globals.css)
   rather than inventing a new one. The figure clips its contents (overflow:hidden
   for the image zoom + corner-clip mask), so we pull the outline INWARD with a
   negative offset and use box-shadow:inset so the ring is never clipped away. */
.pb-section-pb-f-large-image-grid .pb-large-image-grid-tile-link:focus {
    outline: none;
}

.pb-section-pb-f-large-image-grid .pb-large-image-grid-tile-link:focus-visible {
    outline: 3px solid var(--colour-black, #000000);
    outline-offset: -3px;
    box-shadow:
        inset 0 0 0 5px var(--colour-white, #ffffff),
        inset 0 0 0 8px var(--colour-teal-light, #3cab97);
    border-radius: 2px;
}

/* ==========================================================================
   Image tile (ported from .industry-card)
   ========================================================================== */

.pb-section-pb-f-large-image-grid .pb-large-image-grid-tile {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
    margin: 0;
    aspect-ratio: 6 / 3.25;
    background-color: rgba(0, 44, 53, 0.06);
}

.pb-section-pb-f-large-image-grid .pb-large-image-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Editor-preview placeholder fill when no image is set. */
.pb-section-pb-f-large-image-grid .pb-large-image-grid-img-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 44, 53, 0.08), rgba(0, 44, 53, 0.16));
}

.pb-section-pb-f-large-image-grid .pb-large-image-grid-tile:hover .pb-large-image-grid-img {
    transform: scale(1.05);
}

/* ---- Dark-blue fade overlay (ported from .industry-card::before) ---------
   Rendered as a real <span> (aria-hidden) rather than a pseudo-element so it
   only appears on labelled tiles. Top-anchored gradient fading to transparent. */
.pb-section-pb-f-large-image-grid .pb-large-image-grid-overlay {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(
        to bottom,
        rgba(9, 58, 75, 0.95) 0%,
        rgba(9, 58, 75, 0.95) 10%,
        rgba(9, 58, 75, 0.85) 30%,
        rgba(9, 58, 75, 0.6) 60%,
        rgba(9, 58, 75, 0.4) 80%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ---- Label (ported from .industry-card__label) --------------------------
   Top, horizontally centred, uppercase, white. Sits above the fade overlay so
   it keeps contrast against the dark-blue gradient regardless of the image. */
.pb-section-pb-f-large-image-grid .pb-large-image-grid-label {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 18px 20px;
    margin: 0;
    color: #fff;
    font-family: var(--font-heading, proxima-nova, sans-serif);
    font-weight: 900;
    font-size: 30px;
    line-height: 1;
    text-transform: uppercase;
    width: calc(100% - 40px);
    text-align: center;
    z-index: 2;
}

@media (max-width: 1130px) {
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-label {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-label {
        font-size: 40px;
    }
}

@media (max-width: 550px) {
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-label {
        font-size: 30px;
    }
}

@media (max-width: 430px) {
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-label {
        font-size: 26px;
    }
}



/* ==========================================================================
   Buttons row (standard theme arrow buttons via pb_render_buttons; Large size
   adds .larger-button — full-width 32px variant from pb-button.css).
   Spacing ported from .birdon-arrow-btn-wrap (margin-top: 60px). We do NOT
   port the .birdon-arrow-btn visual styles — these are the standard arrow
   buttons.
   ========================================================================== */

.pb-section-pb-f-large-image-grid .pb-large-image-grid-buttons {
    margin-top: 40px;
}

@media (min-width: 768px) {
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-buttons {
        margin-top: 60px;
    }
}

.pb-section-pb-f-large-image-grid .pb-large-image-grid-buttons-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 16px;
    margin: 0;
}

/* ==========================================================================
   COLOUR DERIVATION — intro heading/text + corner-notch fill per SECTION
   ground (G2 covers only the section body text). The label always rides its
   own dark fade, so it is intentionally NOT re-coloured per ground.
   ========================================================================== */

/* ---- LIGHT grounds (white / light-grey / teal-light) AND the section default
   (no .bg-* class — the front-page Industries ground is light-grey). ------- */
.pb-section-pb-f-large-image-grid:not([class*=" bg-"]),
.pb-section-pb-f-large-image-grid.bg-white,
.pb-section-pb-f-large-image-grid.bg-light-grey,
.pb-section-pb-f-large-image-grid.bg-teal-light {
    --pb-corner-fill: var(--colour-background-light, #f7f8fa);
}



/* White ground: the corner notch should match white, not light-grey. */
.pb-section-pb-f-large-image-grid.bg-white {
    --pb-corner-fill: var(--colour-white, #ffffff);
}

/* ---- DARK / saturated grounds (teal / teal-dark / teal-mid / orange / black)
   --- intro heading uses the on-dark accent; the corner notch matches ground. */
.pb-section-pb-f-large-image-grid.bg-teal {
    --pb-corner-fill: var(--colour-primary-teal, #09414e);
}
.pb-section-pb-f-large-image-grid.bg-teal-dark {
    --pb-corner-fill: var(--colour-teal-dark, #002c35);
}
.pb-section-pb-f-large-image-grid.bg-teal-mid {
    --pb-corner-fill: var(--colour-teal-mid, #216c79);
}
.pb-section-pb-f-large-image-grid.bg-orange {
    --pb-corner-fill: var(--colour-primary-orange, #e61e09);
}
.pb-section-pb-f-large-image-grid.bg-black {
    --pb-corner-fill: var(--colour-black, #000000);
}

.pb-section-pb-f-large-image-grid.bg-teal .pb-large-image-grid-intro h1,
.pb-section-pb-f-large-image-grid.bg-teal .pb-large-image-grid-intro h2,
.pb-section-pb-f-large-image-grid.bg-teal .pb-large-image-grid-intro h3,
.pb-section-pb-f-large-image-grid.bg-teal-dark .pb-large-image-grid-intro h1,
.pb-section-pb-f-large-image-grid.bg-teal-dark .pb-large-image-grid-intro h2,
.pb-section-pb-f-large-image-grid.bg-teal-dark .pb-large-image-grid-intro h3,
.pb-section-pb-f-large-image-grid.bg-teal-mid .pb-large-image-grid-intro h1,
.pb-section-pb-f-large-image-grid.bg-teal-mid .pb-large-image-grid-intro h2,
.pb-section-pb-f-large-image-grid.bg-teal-mid .pb-large-image-grid-intro h3,
.pb-section-pb-f-large-image-grid.bg-orange .pb-large-image-grid-intro h1,
.pb-section-pb-f-large-image-grid.bg-orange .pb-large-image-grid-intro h2,
.pb-section-pb-f-large-image-grid.bg-orange .pb-large-image-grid-intro h3,
.pb-section-pb-f-large-image-grid.bg-black .pb-large-image-grid-intro h1,
.pb-section-pb-f-large-image-grid.bg-black .pb-large-image-grid-intro h2,
.pb-section-pb-f-large-image-grid.bg-black .pb-large-image-grid-intro h3 {
    color: var(--colour-white, #ffffff);
}

/* ==========================================================================
   Mobile-down adjustments
   ========================================================================== */

@media (max-width: 767px) {
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-row {
        grid-template-columns: 1fr;
    }

    .pb-section-pb-f-large-image-grid .pb-large-image-grid-intro h1,
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-intro h2,
    .pb-section-pb-f-large-image-grid .pb-large-image-grid-intro h3 {
        font-size: 34px;
    }
}

/* ---- Editor preview placeholder ----------------------------------------- */

.pb-section-pb-f-large-image-grid .pb-large-image-grid-item.is-placeholder .pb-large-image-grid-tile {
    opacity: 0.9;
    outline: 1px dashed rgba(0, 44, 53, 0.25);
}