/* ==========================================================================
   Lab services page styles  (laboratories.html)

   This file is linked ONLY from laboratories.html, so nothing in it can
   reach any other page.

   Contents:
     1. Image gallery
     2. CTA section
     3. Feature list wrapping
     4. Sidebar contact image
   ========================================================================== */


/* ==========================================================================
   1. GALLERY
   Layout: one large image on the left, 3 stacked down its right side,
   4 across the bottom.

   Scoping: every selector is a descendant of .lab-gallery, and the .lab-
   prefix is used nowhere else in this project.
   ========================================================================== */

.lab-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

/* Large image: spans columns 1-3 and rows 1-3 */
.lab-gallery .lab-gallery-main {
    grid-column: 1 / 4;
    grid-row: 1 / 4;
}

/* The main tile must take its height from the grid rows, never from its
   image's natural size. Taking the image out of flow leaves the tile with
   no intrinsic height, so rows 1-3 are sized purely by the 3 side tiles and
   the main tile then stretches to meet them exactly - whatever aspect ratio
   the main image happens to have.

   Without this, a portrait main image (hospitals-2 is 1920x2560) makes the
   tile taller than the side column, which stretches rows 1-3 and opens gaps
   between the side images. laboratories.html only escaped this because
   lab-1 is 512x391 - a ratio that nearly matches what the rows want.

   (aspect-ratio on the tile is NOT a substitute: it suppresses the default
   align-self:stretch, leaving the main tile ~5px short of the side column.) */
.lab-gallery .lab-gallery-main {
    position: relative;
    min-height: 0;
}

.lab-gallery .lab-gallery-main img {
    position: absolute;
    inset: 0;
}

/* The 3 right-side and 4 bottom tiles auto-place into the remaining cells.
   The 4/3 box sizes the grid rows, which in turn gives the main image a
   ~1.32 ratio - matching lab-1's native 512x391 so it crops cleanly. */
.lab-gallery .lab-gallery-side,
.lab-gallery .lab-gallery-bottom {
    aspect-ratio: 4 / 3;
}

/* --------------------------------------------------------------------------
   Variant: 3 across the bottom instead of 4 (hospitals.html)

   3 tiles don't divide into 4 columns, so this variant re-lays the grid on
   12 columns - divisible by both 3 and 4. A quarter-width tile spans 3,
   a third-width tile spans 4.

   This is scoped to the variant rather than applied to the base grid on
   purpose: re-tracking the base to 12 columns changes sub-pixel rounding
   and shifts the laboratories.html gallery by a pixel or two. Keeping the
   4-column base untouched leaves that page byte-for-byte as it was.

   16/9 on the bottom tiles keeps that row the same height as the 4-up
   version, so the gallery has the same overall proportions on both pages.
   -------------------------------------------------------------------------- */
.lab-gallery.lab-gallery-bottom-3 {
    grid-template-columns: repeat(12, 1fr);
}

.lab-gallery.lab-gallery-bottom-3 .lab-gallery-main {
    grid-column: 1 / 10;
    grid-row: 1 / 4;
}

.lab-gallery.lab-gallery-bottom-3 .lab-gallery-side {
    grid-column: span 3;
    aspect-ratio: 4 / 3;
}

.lab-gallery.lab-gallery-bottom-3 .lab-gallery-bottom {
    grid-column: span 4;
    aspect-ratio: 16 / 9;
}

.lab-gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

@media (max-width: 767px) {
    .lab-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .lab-gallery .lab-gallery-main {
        grid-column: 1 / 3;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }

    /* The 3-up variant collapses to the same 2-column grid as the 4-up one,
       so undo its 12-column spans - only 2 columns exist at this width. */
    .lab-gallery.lab-gallery-bottom-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .lab-gallery.lab-gallery-bottom-3 .lab-gallery-main {
        grid-column: 1 / 3;
        grid-row: auto;
        aspect-ratio: 4 / 3;
    }

    .lab-gallery.lab-gallery-bottom-3 .lab-gallery-side,
    .lab-gallery.lab-gallery-bottom-3 .lab-gallery-bottom {
        grid-column: span 1;
        aspect-ratio: 4 / 3;
    }
}


/* ==========================================================================
   2. CTA SECTION

   Matches the CTA on about.html. That page gets its CTA styling from two
   files it links - home.css (the green box, icon size, and the overrides
   that strip the template's background image/overlay) and about.css (the
   vertical spacing). laboratories.html links neither, so the rules are
   reproduced here instead of linking those files in - linking them would
   drag ~1400 unrelated lines onto this page.

   Copied verbatim, in the same order about.html loads them (home.css rules
   first, then about.css), so the cascade resolves identically.

   Only .cta-section-2 + section / section:has(+ .cta-section-2) from
   home.css is deliberately left out: it zeroes the margin of NEIGHBOURING
   sections, not the CTA. It is inert on about.html (nothing follows the
   CTA there) but here it would hit the newsletter section below.
   ========================================================================== */

/* --- from home.css --- */
.cta-left-items .icon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.cta-bg {
    background: #00984a;
    border-radius: 20px;
}

.cta-section-2 {
    background: transparent !important;
}

.cta-wrapper-2,
.zoom-effect-style {
    background-image: none !important;
    position: relative;
}

/* Strip the template's dark overlay pseudo-elements */
.cta-wrapper-2::before,
.cta-wrapper-2::after,
.zoom-effect-style::before,
.zoom-effect-style::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
}

/* Fix black gap above CTA section */
.cta-section-2 {
    background-color: #ffffff !important;
    margin-top: 0 !important;
    padding-top: 60px;
    overflow: hidden;
}

.cta-wrapper-2 {
    margin-top: 0 !important;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .cta-right-items .theme-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
    }
}

/* --- from about.css --- */
.cta-custom-spacing {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media (max-width: 767px) {
    .cta-custom-spacing {
        padding-top: 100px;
        padding-bottom: 60px;
    }
}


/* ==========================================================================
   3. FEATURE LIST WRAPPING

   Each <li> is "<i icon> text". As a plain block, text that wraps onto a
   second line returns to the <li>'s left edge - i.e. underneath the icon.
   Making the <li> a flex row puts the text in its own column, so wrapped
   lines align with the first line instead.

   The text is a bare text node; flex turns it into an anonymous flex item,
   which is what gives it its own wrapping box.

   Same selector as main.css uses, and this file loads after main.css, so
   these win on the cascade without needing !important.
   ========================================================================== */

.services-details-wrapper .services-details-right-items .list-box ul li {
    display: flex;
    align-items: baseline; /* keeps the icon on the first line's baseline */
}

.services-details-wrapper .services-details-right-items .list-box ul li i {
    flex-shrink: 0; /* never let the icon squash as the text wraps */
}


/* ==========================================================================
   4. SIDEBAR CONTACT IMAGE

   The phone/email panel in the sidebar. main.css gives the image
   width:100% + height:100% with no object-fit, so it just scales with its
   column and keeps its source aspect ratio. The source is portrait (2:3),
   so the taller the column, the taller the image: fine at ~340px wide on
   desktop, but below the lg breakpoint the sidebar goes full width and the
   image balloons to ~774px tall - far more than the ~219px of text in it.

   Only these 4 services pages use .sidebar-widget-image, and this file is
   linked only from those 4, so nothing else is affected.
   ========================================================================== */

/* Dark gradient so the white phone/email text stays legible on the photo.
   Weighted to the bottom, where the text sits. */
.services-details-wrapper .services-details-sidebar .sidebar-widget-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0.78) 100%
    );
    pointer-events: none;
}

/* The overlay is a generated last child, so it would paint over .content.
   Lift .content above it. */
.services-details-wrapper .services-details-sidebar .sidebar-widget-image .content {
    z-index: 1;
}

/* Below lg the sidebar goes full width - cap the height and crop instead of
   letting the portrait source stretch the panel. 340px comfortably clears
   the ~219px content block plus its 25px offset. */
@media (max-width: 991px) {
    .services-details-wrapper .services-details-sidebar .sidebar-widget-image img {
        height: 340px;
        object-fit: cover;
        object-position: center;
    }
}

/* --------------------------------------------------------------------------
   Fix right-side overflow on small phones (<=575px).
   The services-details .row uses Bootstrap's g-5, which sets a 3rem
   horizontal gutter -> the row gets -24px side margins while the full-width
   container only pads 12px, so it spills ~12px past the viewport (a gap on
   the right). Above 576px the centered container absorbs it; below, it shows.
   Reset only the horizontal gutter so the row aligns with the container edges;
   the vertical gutter (spacing between stacked sidebar/content) is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .services-details-section .row {
        --bs-gutter-x: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Compact the CTA (cta-newsletter) card on tablet and mobile.
   The card's size is driven by .cta-wrapper-2 padding + the 124px logo
   circle + the h3, so we trim those down at smaller widths.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .cta-newsletter-section .cta-wrapper-2 {
        padding: 32px 30px;
        gap: 24px;
    }
    .cta-newsletter-section .cta-left-items {
        gap: 24px;
    }
    .cta-newsletter-section .cta-left-items .icon {
        width: 84px;
        height: 84px;
        line-height: 84px;
    }
    .cta-newsletter-section .cta-left-items .icon img {
        max-width: 48px;
        vertical-align: middle;
    }
    .cta-newsletter-section .cta-left-items .content h3 {
        font-size: 22px;
    }
    .cta-newsletter-section .cta-right-items .theme-btn {
        margin-top: 20px;
    }
}

@media (max-width: 767px) {
    .cta-newsletter-section .cta-wrapper-2 {
        padding: 26px 22px;
        gap: 18px;
    }
    .cta-newsletter-section .cta-left-items .icon {
        width: 66px;
        height: 66px;
        line-height: 66px;
    }
    .cta-newsletter-section .cta-left-items .icon img {
        max-width: 38px;
    }
    .cta-newsletter-section .cta-left-items .content h3 {
        font-size: 19px;
    }
    .cta-newsletter-section .cta-left-items .content p {
        font-size: 14px;
    }
    .cta-newsletter-section .cta-right-items .theme-btn {
        margin-top: 16px;
    }
}