/* ===================================================================
   Progressive Enviro Care - Layout & container scale
   Keeps one content width shared by the header, page body and footer,
   and lets that width grow on large monitors and TVs instead of
   stranding the site in a 1200px strip.
   =================================================================== */

:root {
    --container: 1200px;
    --container-pad: 24px;
}

/* Header, content and footer all resolve to the same measure, so the logo
   lines up with the copy underneath it. The theme had the header at 1280px
   against a 1200px body. */
.auto-container,
.site-header-inner {
    max-width: var(--container);
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Text blocks keep a readable measure regardless of how wide the shell
   grows - widening the container must not widen the line length. */
.sec-title p,
.about-v2 .text p,
.reason-card p {
    max-width: 68ch;
}

/* ---------- Large laptops and desktops ---------- */
@media (min-width: 1600px) {
    :root {
        --container: 1360px;
        --container-pad: 32px;
    }
}

/* ---------- Large monitors ---------- */
@media (min-width: 2000px) {
    :root {
        --container: 1560px;
    }
    body {
        font-size: 17px;
    }
}

/* ---------- Very large monitors, ultrawides and TVs ----------
   Beyond this the limit is human, not technical: line length and comfortable
   reading distance, so the shell stops growing and the type steps up instead. */
@media (min-width: 2600px) {
    :root {
        --container: 1760px;
    }
    body {
        font-size: 18px;
    }
    .sec-title p,
    .about-v2 .text p,
    .reason-card p {
        max-width: 72ch;
    }
}

@media (min-width: 3400px) {
    :root {
        --container: 2000px;
    }
    body {
        font-size: 20px;
    }
}

/* ---------- Full-bleed sections stay full-bleed ----------
   Backgrounds should still span the viewport at every size. */
.hero-v2,
.page-title,
.call-to-action,
.call-to-action-two,
.events-section,
.process-section,
.main-footer {
    width: 100%;
}

/* Hero art shouldn't tower over the viewport on short laptop screens, and
   shouldn't leave a letterbox on tall ones. */
@media (min-width: 992px) {
    .hero-v2 {
        min-height: min(897px, 92vh);
    }
}

/* ===================================================================
   Touch targets
   The carousel dots ship at 4x9px, which is unusable on a phone. Grow the
   hit area without changing how the dot itself looks.
   =================================================================== */
.owl-dots .owl-dot,
.owl-theme .owl-dots .owl-dot {
    position: relative;
    min-width: 30px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    background: none;
    border: 0;
    padding: 0;
}
.owl-nav button,
.owl-theme .owl-nav [class*="owl-"] {
    min-width: 40px;
    min-height: 40px;
}

/* Standalone call-to-action links get a comfortable tap area */
.view-event,
.read-more-link,
.services-block .inner-box .read-more,
.services-block .inner-box a[href]:not(.image-link),
.event-block .image .featured a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}
/* ...but the card heading link should still lay out as a heading */
.services-block .inner-box h3 a,
.services-block .inner-box h4 a {
    display: inline;
    min-height: 0;
}
.event-block .image .featured a {
    padding: 0 18px;
    justify-content: center;
}

/* Breadcrumb links sit close together, so give each one some room */
.page-title .bread-crumb li a {
    display: inline-block;
    padding: 6px 2px;
}

/* ---------- Tablet: the bootstrap gap ----------
   The theme's grid jumps straight from col-sm (768) to col-md (992), so
   768-991px inherits phone layouts on a screen with room for two columns. */
@media (min-width: 768px) and (max-width: 991px) {
    .services-section .services-block,
    .news-style-one {
        width: 50%;
        float: left;
    }
    .industry-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .reason-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .client-logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}