/* ==========================================================================
   Service Location Page — Section Rhythm & Component Classes
   Reusable, scoped classes for city/service-location pages (Chhatarpur and
   future city pages). Uses only the existing theme CSS variables already
   defined in custom.css :root — no new brand colors are introduced.
   ========================================================================== */

.city-section{
    padding: 100px 0;
}

.city-section-white{
    background-color: var(--white-color);
}

.city-section-light{
    background-color: var(--secondary-color);
}

/* Lets a page's existing CTA heading stay on its original tag level (e.g. h3)
   while still reading as the large white Chhatarpur-style CTA heading. */
.cta-box-content .section-title .city-cta-heading{
    display: block;
    color: var(--white-color);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3em;
    text-transform: capitalize;
    padding-left: 0;
    margin-bottom: 0;
}

.cta-box-content .section-title .city-cta-heading::before{
    content: none;
}

/* Collapse the doubled top+bottom padding where two white blocks sit back
   to back with no colour change between them (avoids an oversized gap). */
.page-team-single + .page-team-single,
.page-team-single + .city-section-white,
.city-section-white + .page-team-single,
.city-section-white + .city-section-white{
    padding-top: 0;
}

/* The theme's .team-member-about carries its own 60px margin-bottom, meant
   for spacing between stacked blocks in the same group. When it is the last
   block before another white section, that margin stacks with this
   section's own bottom padding and reads as an oversized gap — remove it
   only in that specific case. */
.page-team-single:has(+ .page-team-single) > .container > .row > .col-lg-12 > .team-member-about:last-child,
.page-team-single:has(+ .city-section-white) > .container > .row > .col-lg-12 > .team-member-about:last-child{
    margin-bottom: 0;
}

/* The hero + main-intro block (identified by its H1) still felt too spacious
   right before the Products Intro heading even after the fix above, so its
   own bottom padding is trimmed specifically for that one transition. */
.page-team-single:has(h1){
    padding-bottom: 100px;
}

/* Gap between the hero image/intro block and the "Tensile Structure
   Manufacturer..." heading right below it. */
.team-member-info-box{
    margin-bottom: 60px;
}

/* ---- Product blocks ---- */
.city-product-section{
    padding: 45px 0;
    border-bottom: 1px solid var(--divider-color);
}

.city-product-section:last-child{
    border-bottom: none;
    padding-bottom: 0;
}

.city-product-section:first-child{
    padding-top: 0;
}

.city-product-features{
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    padding: 40px;
}

.city-product-features h5,
.city-product-features h4.h5{
    position: relative;
    padding-left: 18px;
}

/* Bootstrap's .h5 class otherwise overrides the theme's heading styling. */
.city-product-features h4.h5{
    color: var(--primary-color);
    font-family: var(--accent-font);
    font-weight: 700;
    line-height: 1.2em;
}

.city-product-features h5::before,
.city-product-features h4.h5::before{
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background-color: var(--accent-color);
}

/* ---- Design considerations / Cost factor grids ---- */
.city-design-grid,
.city-cost-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 40px;
}

.city-design-card,
.city-cost-card{
    background-color: var(--white-color);
    border: 1px solid var(--divider-color);
    padding: 30px;
    width: calc(50% - 12px);
}

.city-design-grid .city-design-card:last-child,
.city-cost-grid .city-cost-card:last-child{
    width: 100%;
}

.city-design-card p,
.city-cost-card p{
    margin-bottom: 0;
    color: var(--text-color);
}

.city-design-card .city-card-title,
.city-cost-card .city-card-title{
    font-family: var(--accent-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: capitalize;
    line-height: 1.3em;
    margin-bottom: 12px;
    padding-left: 16px;
    position: relative;
}

.city-card-title::before{
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background-color: var(--accent-color);
}

/* ---- Process grid ---- */
.city-process-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 40px;
}

.city-process-item{
    width: calc(50% - 12px);
    background-color: var(--white-color);
    border: 1px solid var(--divider-color);
    padding: 30px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: 0.3s;
}

.city-process-item:hover{
    border-color: var(--accent-color);
}

.city-process-grid .city-process-item:last-child{
    width: 100%;
}

.city-process-number{
    font-family: var(--accent-font);
    font-size: 28px;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    flex-shrink: 0;
}

.city-process-title{
    font-family: var(--accent-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.3em;
    margin: 0 0 8px;
}

.city-process-text .city-process-desc{
    margin: 0;
    color: var(--text-color);
}

/* ---- Why ShadeCo inner trust panel (sits inside Process section) ---- */
.city-why-panel{
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-top: 3px solid var(--accent-color);
    padding: 40px;
    margin-top: 50px;
}

.city-why-panel h3{
    margin-bottom: 20px;
}

.city-why-panel p{
    margin-bottom: 20px;
}

.city-why-panel p:last-child{
    margin-bottom: 0;
}

/* ---- Service area tags ---- */
.city-area-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.city-area-tag{
    display: inline-block;
    background-color: var(--white-color);
    border: 1px solid var(--divider-color);
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 18px;
    transition: border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.city-area-tag:hover{
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* ---- Technical specification table ---- */
.city-spec-table table{
    background-color: var(--white-color);
    margin-bottom: 0;
    border-bottom: 2px solid var(--divider-color);
}

.city-spec-table thead th{
    background-color: var(--primary-color);
    color: var(--white-color);
    border-color: var(--primary-color);
    font-family: var(--accent-font);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.02em;
    border-top: 2px solid var(--primary-color);
}

.city-spec-table td,
.city-spec-table th{
    border-color: var(--divider-color);
    padding: 16px 20px;
}

/* Bootstrap's .table strips the bottom border off the last row by default;
   restore it so the table reads as visually closed at the bottom. */
.city-spec-table tbody tr:last-child td,
.city-spec-table tbody tr:last-child th{
    border-bottom: 1px solid var(--divider-color);
}

.city-spec-table tbody th{
    color: var(--primary-color);
    font-weight: 600;
}

.city-spec-table tbody td{
    color: var(--text-color);
}

/* ---- Responsive ---- */
@media only screen and (max-width: 991px){
    .city-section{
        padding: 70px 0;
    }

    .city-product-section{
        padding: 35px 0;
    }

    .city-design-card,
    .city-cost-card,
    .city-process-item{
        width: 100%;
    }
}

@media only screen and (max-width: 767px){
    .city-section{
        padding: 50px 0;
    }

    .city-product-features{
        padding: 30px;
    }

    .city-why-panel{
        padding: 30px;
        margin-top: 35px;
    }

    .city-process-item{
        padding: 25px;
        gap: 15px;
    }

    .city-process-number{
        font-size: 22px;
    }

    .city-design-grid,
    .city-cost-grid,
    .city-process-grid{
        margin-top: 25px;
        gap: 16px;
    }
}

/* Shared city collages must show the complete artwork at every breakpoint. */
.team-member-image img[src*="/shadeco-tensile-structure-services.webp"]{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.project-image img:is(
    [src*="/shadeco-architectural-tensile-structure.webp"],
    [src*="/shadeco-car-parking-tensile-shade.webp"],
    [src*="/shadeco-commercial-tensile-structure-project.webp"],
    [src*="/tensile-car-parking-shade-project.webp"],
    [src*="/architectural-tensile-structure.webp"],
    [src*="/car-parking-tensile-shade.webp"],
    [src*="/commercial-tensile-structure-project.webp"],
    [src*="/car-parking-shade-project.webp"]
){
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

.project-item:hover .project-image img:is(
    [src*="/shadeco-architectural-tensile-structure.webp"],
    [src*="/shadeco-car-parking-tensile-shade.webp"],
    [src*="/shadeco-commercial-tensile-structure-project.webp"],
    [src*="/tensile-car-parking-shade-project.webp"],
    [src*="/architectural-tensile-structure.webp"],
    [src*="/car-parking-tensile-shade.webp"],
    [src*="/commercial-tensile-structure-project.webp"],
    [src*="/car-parking-shade-project.webp"]
){
    transform: none;
}

/* Keep location-page artwork clear of the theme's dark card gradient. */
.project-image a:has(img[src*="images/service-locations/"])::before{
    content: none;
    background: none;
}