/* Atlas Construction Group — client_custom.css (post-launch tweaks).
   Loaded AFTER atlas-construction-group-global.css. Client design-QA revisions live here. */

/* --- QA: service-spoke hero CTAs were touching (gap rule was scoped to .hero only) --- */
.svc-hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
@media(max-width:560px){
  .svc-hero .ctas{flex-direction:column;align-items:stretch;gap:16px}
  .svc-hero .ctas .btn{width:100%;justify-content:center;margin:0}
}

/* --- QA: service-spoke "Browse Our … Services" tiles → 3 on the first row, 2 on the second --- */
.spoke-cards{align-items:stretch}
.spoke-cards .svc-card{flex:0 1 calc(33.333% - 16px);max-width:none}
@media(max-width:860px){ .spoke-cards .svc-card{flex:0 1 calc(50% - 12px)} }
@media(max-width:560px){ .spoke-cards .svc-card{flex:1 1 100%} }

/* --- QA: LSP "Other Services in {City}" related tiles → 2 per row --- */
body.page-lsp .rel-cards{max-width:760px;margin:0 auto}
body.page-lsp .rel-cards .svc-card{flex:0 1 calc(50% - 11px);max-width:none}
@media(max-width:560px){ body.page-lsp .rel-cards .svc-card{flex:1 1 100%} }

/* --- QA: every service/related tile gets a photo banner on top --- */
.svc-card{display:flex;flex-direction:column}
.svc-card .card-photo{margin:-30px -26px 18px;line-height:0}
.svc-card .card-photo img{width:100%;height:180px;object-fit:cover;border-radius:14px 14px 0 0;display:block}
.svc-card:has(.card-photo) .ic{margin-top:-46px;position:relative;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,42,99,.14)}
.svc-card a[href]{margin-top:auto} /* keep the "Learn More" link pinned to the card bottom */

/* --- QA: "this section needs an image" — the page's section photo in its intro section --- */
.section-photo{display:block;width:100%;max-width:960px;margin:6px auto 6px;border-radius:16px;max-height:400px;object-fit:cover;box-shadow:0 12px 30px rgba(0,42,99,.10)}

/* --- QA #16: on mobile the "What It Includes" grid should stack with the IMAGE ON TOP.
       (global.css has a duplicate .incl-grid rule AFTER its own media query that clobbers the
       stack, so force 1 column here with !important — client_custom loads last.) --- */
@media(max-width:820px){
  .incl-grid{grid-template-columns:1fr !important}
  .incl-grid .incl-media{order:-1}
  .incl-media img{max-height:340px}
}

/* --- QA #15: location pages — the section right after the hero was too close; add breathing room --- */
body.page-location .hero + section{padding-top:96px}
@media(max-width:640px){ body.page-location .hero + section{padding-top:64px} }

/* --- QA #17: homepage bottom CTA gets an image background (was flat orange) --- */
body.page-home .ctaband#estimate{
  background:linear-gradient(rgba(0,42,99,.82),rgba(0,42,99,.88)),url('/images/atlas-gallery-hanover-bath.webp') center/cover !important;
}
body.page-home .ctaband#estimate h2{color:#fff}
body.page-home .ctaband#estimate p{color:#dfe8f7}

/* --- QA #19: homepage before/after — 4 sliders, 2 per row --- */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1000px;margin:0 auto}
.ba-grid .ba{margin:0}
@media(max-width:640px){ .ba-grid{grid-template-columns:1fr} }

/* --- QA r5 #Homepage: the "Bathrooms, Windows & Doors" section — the standalone
       right-hand photo is REMOVED (in home.json); the 3 service tiles now sit in a
       single full-width row. --- */
@media(min-width:861px){
  body.page-home #home-services .svc-grid{grid-template-columns:repeat(3,1fr);gap:26px}
}

/* --- QA: image-frame boxes are styled as DASHED PLACEHOLDERS; when a real photo is present,
       drop the placeholder chrome (border/bg/padding/flex) and let the image fill the frame.
       Fixes About portraits/team, story image, and small images on service spokes/hub. --- */
.imgph:has(img),
.team-ph:has(img),
.story-img:has(img),
.incl-media:has(img),
.svc-media:has(img){
  display:block !important; padding:0 !important; border:0 !important;
  background:transparent !important; overflow:hidden;
}
.imgph:has(img) img,
.team-ph:has(img) img,
.story-img:has(img) img,
.incl-media:has(img) img,
.svc-media:has(img) img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block;
}
.team-ph:has(img){border-radius:50%}
.team-ph:has(img) img{border-radius:50%}

/* --- QA: About owner portraits were stretched tall by the flex row (align-items:stretch).
       Pin a fixed 4:5 size so they aren't distorted; stack + center on narrow mobile. --- */
.owner{align-items:flex-start}
.owner .imgph.portrait{width:120px;height:150px;aspect-ratio:auto;flex:none}
@media(max-width:480px){
  .owner{flex-direction:column;align-items:center;text-align:center}
  .owner .imgph.portrait{width:150px;height:188px}
}

/* ===== QA Round 2 (Masud + Ammar) ===== */

/* h4->h3 tag changes must keep the original look (the .xxx h4 rules no longer match) */
.why-item h3{font-size:17px;color:var(--navy);margin-bottom:4px;font-family:var(--b);font-weight:600}
.pstep h3{color:var(--navy);font-size:17px;margin-bottom:3px;font-family:var(--b);font-weight:600}
.team-card h3{color:var(--navy);font-size:16px;font-family:var(--b);font-weight:600}
.cred h3{color:var(--navy);font-size:16px;margin-bottom:3px;font-family:var(--b);font-weight:600}
/* #29 footer column headers rendered as plain text (was <h4>) */
.fcol-h{color:#fff;font-family:var(--b);font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}

/* #5 CTA band heading white on orange, site-wide */
.ctaband h2{color:#fff}
.ctaband p{color:rgba(255,255,255,.92)}

/* #4 / #39 reduce hero vertical padding on mobile so the whole hero is visible */
@media(max-width:640px){
  .hero .container,.svc-hero .container{padding-top:40px !important;padding-bottom:40px !important}
}

/* #2 top bar centered on mobile; prevent horizontal slivers behind the mobile menu.
   Use `clip` (not `hidden`): `overflow-x:hidden` on html/body makes overflow-y
   compute to `auto`, turning body into a scroll container — which BREAKS
   position:sticky (the home-services photo). `clip` hides the sliver without
   creating a scroll container, so sticky keeps working. */
html,body{overflow-x:clip}
@media(max-width:720px){ .topbar .container{justify-content:center;text-align:center} }

/* #9 / QA r6: gap above the "Local insight" box on ALL location + service pages
   — the client wants clear padding between the intro image (or stats) and this box
   (a later .igbox rule in global.css had zeroed its top margin). */
.igbox{margin-top:40px}

/* #12.1 team member cards 2 per row on mobile (were 1) */
@media(max-width:520px){ .team-grid{grid-template-columns:1fr 1fr} }

/* #14 gallery 2 per row on mobile (were 1 under 480px) */
@media(max-width:480px){ .gal-grid{grid-template-columns:1fr 1fr} }

/* #16 separate the "Other Services" cards from the FAQ on LSP/city pages: tint the FAQ band */
body.page-lsp section.why[style],
body.page-location section.why[style]{background:var(--gray) !important}

/* ===== QA Round 3 (live-deploy fixes) ===== */

/* #4 before/after sliders: the invisible drag overlay was keyed on the #baRange id, so only
   the single slider worked. Make it class-based so every .ba slider is draggable. */
.ba input[type="range"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:5}
/* and the "before" image was hardcoded to 900px; the slider JS now sets its width to the
   slider's own width (inline !important) so the 2-per-row grid sliders align at any size. */
.ba-before img{max-width:none}

/* #3 homepage side photo: client wants it to STICK and slide down the taller cards
   column as you scroll (sticky re-added in the desktop grid block above). */

/* ===== QA (4) #1: mobile menu opens BELOW the header (header/topbar/logo/
   hamburger stay visible), instead of a drawer that covers everything. The menu
   is a full-width panel that drops down from under the header; JS sets its `top`
   to the header's bottom edge and locks body scroll while open. ===== */
@media(max-width:980px){
  /* keep the whole header above the sliding panel so it's never covered */
  .topbar{position:relative;z-index:1200}
  header.site{z-index:1200}
  .mnav{
    top:0;left:0;right:0;bottom:auto;width:100%;max-width:none;
    transform:translateY(-120%);transition:transform .28s ease;
    z-index:900;border-top:1px solid var(--border);
    box-shadow:0 16px 30px rgba(0,0,0,.16);
    padding:14px 18px 26px;overflow-y:auto;
  }
  .mnav.open{transform:none}
  .mnav .mclose{display:none}          /* the header hamburger toggles it now */
  .mnav-backdrop{z-index:850}          /* dim only below the header (JS sets its top) */
}

/* =====================================================================
   QA Round 5 (Atlas Construction QA (3).docx)
   ===================================================================== */

/* --- Global: primary buttons used the dark CTA color (#A8500F / hover #8F440C),
       which is off-brand. Match the brand-guide orange (--orange #E57A2E). --- */
.btn-primary{background:var(--orange)}
.btn-primary:hover{background:#c9661f}
.mobilebar a.call{background:var(--orange)}

/* --- Blog article prose (page-blog): readable measure + spacing for the recreated
       legacy posts rendered as raw HTML inside .article. --- */
.article{max-width:760px;margin:0 auto;color:var(--text);font-size:17px;line-height:1.75}
.article h2{font-family:var(--h);color:var(--navy);font-size:26px;line-height:1.25;margin:36px 0 12px}
.article h3{font-family:var(--h);color:var(--navy);font-size:20px;margin:26px 0 8px}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 18px;padding-left:22px}
.article li{margin:0 0 8px}
.article a{color:var(--orange-cta);font-weight:600}
.article a:hover{text-decoration:underline}
.article > *:first-child{margin-top:0}
@media(max-width:560px){ .article{font-size:16px} .article h2{font-size:22px} }

/* --- Reusable "content left / image on the right column" split layout.
       Add `split` to a section's class and drop a `.split-photo` image after
       the content part. Head spans full width; the grid part (why-grid/cards)
       goes left, the photo right. Stacks on mobile. --- */
.split .container{display:grid;grid-template-columns:1fr;gap:28px}
.split .sec-head{text-align:center}
.split-photo{display:block;width:100%;border-radius:16px;object-fit:cover}
@media(min-width:900px){
  .split .container{grid-template-columns:1.05fr .95fr;column-gap:48px;row-gap:24px;align-items:center}
  .split .sec-head{grid-column:1 / -1}
  .split .why-grid{grid-template-columns:1fr}      /* stack the 4 items in the left column */
  .split-photo{height:100%;max-height:520px}
}

/* --- Location (city) pages: the "What We Offer in {City}" service tiles should
       sit 4 across in a single row (spoke-cards is 3-up elsewhere; scope to city pages). --- */
@media(min-width:861px){
  body.page-location .spoke-cards .svc-card{flex:0 1 calc(25% - 18px);max-width:none}
}

/* --- service-areas page: the "Our Primary Service Areas" city tiles need photo
       banners on top (the raw-HTML tiles get a .card-photo added in content). --- */
.rel-cards .svc-card .card-photo{margin:-26px -26px 16px;line-height:0}
.rel-cards .svc-card .card-photo img{width:100%;height:150px;object-fit:cover;border-radius:14px 14px 0 0;display:block}
.rel-cards .svc-card:has(.card-photo) .ic{margin-top:-40px;position:relative;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,42,99,.14)}

/* --- guide/financing: a page section image dropped below the copy. --- */
.below-photo{display:block;width:100%;max-width:900px;margin:8px auto 0;border-radius:16px;max-height:420px;object-fit:cover;box-shadow:0 12px 30px rgba(0,42,99,.10)}

/* --- blog CTA heading: honor an explicit newline so "Let's Talk." drops to the
       second line (h2 renders as text, so a preserved newline does it). Harmless
       on other ctabands that have no newline. --- */
.ctaband h2{white-space:pre-line}

/* --- Financing: the section photo sat flush against the pricing tickets row.
       Add breathing room between the two (section-photo only appears in a
       .specials section on the financing page). --- */
.specials .section-photo{margin-bottom:40px}

/* --- QA r6: the "Local Proof" box read as a heavy navy card that clashed with the
       clean "Permits in {City}" section right above it. Restyle it to the same clean,
       centered format so the two sections read consistently. --- */
.proofbox{background:transparent;color:var(--text);max-width:820px;margin:0 auto;text-align:center;padding:0}
.proofbox .eyebrow{color:var(--orange)}
.proofbox p{color:#475569;font-size:15.5px;margin-top:6px}
.proofbox strong{color:var(--navy)}

/* --- QA (4) #3: "Referral-Led" stat value wrapped to two lines while the numeric
   values sat on one. Fix the stat value to 27px and keep it on one line so all
   four cards match. --- */
.stat .num{font-size:27px !important;white-space:nowrap}

/* =====================================================================
   QA Round 6 (Atlas Construction QA (6).docx)
   ===================================================================== */

/* --- #2 Hero padding was excessive top & bottom. Tighten it site-wide so the
       hero reads more compact, on both desktop and mobile. (Reduced further in a
       follow-up: client still saw too much space.) --- */
.hero .container,.svc-hero .container{padding-top:40px !important;padding-bottom:40px !important}
@media(max-width:820px){ .hero .container,.svc-hero .container{padding-top:30px !important;padding-bottom:30px !important} }
@media(max-width:560px){ .hero .container,.svc-hero .container{padding-top:22px !important;padding-bottom:22px !important} }

/* --- #5 Footer "Get In Touch": secondary phone sits under the primary (aligned
       past the icon), and the business hours render on three lines. --- */
.fcontact .fsubphone{padding-left:26px}
.fcontact .fsubphone a{color:#cdd7e6;font-weight:600}
/* clock icon aligns to the FIRST hours line (Mon–Fri), not the last, so the row
   is top-aligned instead of baseline-aligned to the inline-block span. */
.fcontact li.fhours-li{display:flex;align-items:flex-start;gap:8px}
.fcontact li.fhours-li i{margin-top:4px;flex:none}
.fcontact .fhours{display:inline-block;line-height:1.65}

/* --- #5 Contact info-card: primary + secondary phone each on their own line;
       hours span wraps to three lines. --- */
.info-card .row>div a{display:block}

/* --- #1 Chat widget: handled below via a targeted script (setting `position` on
       the <chat-widget> host hid it, so CSS on the host is not safe). --- */

/* --- QA follow-up: the sticky mobile action bar's "Free Quote" label wrapped to
       two lines on narrower phones (e.g. Galaxy S20 ~360px). Keep each label on
       one line and scale the type/padding down on narrow widths so all three
       buttons read consistently. --- */
.mobilebar a{white-space:nowrap}
@media(max-width:430px){ .mobilebar a{font-size:13px;padding:13px 4px;gap:6px} .mobilebar a i{font-size:15px} }
@media(max-width:360px){ .mobilebar a{font-size:12px;gap:5px} }