/* Four Seasons design QA 2026-10-16 (Manual QA card a3a8ab49). Spacing and layout only: no copy, colour or font changes.
   Loaded after every other stylesheet. Rollback = remove the one <link> line that loads this file. */

/* 1. Service photo cards: the photo caption sat 2px from the card edge while the card text below sits 22px in.
      Line the caption up with the card text. (home "What We Do", /nj/services, every page with photo cards) */
.bvg-card-grid .bvg-img-card > .bvg-figure > figcaption{margin:10px 22px 0!important;padding:0!important;line-height:1.45}

/* 2. 3-up grids with an unfilled last row (home: 8 service cards; review grids with 5 or 4 reviews):
      the last row hugged the left with a blank card slot on the right. Centre the last row instead. Desktop only. */
@media (min-width:1001px){
  html body .bvg-body .bvg-card-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  html body .bvg-body .bvg-card-grid > *{grid-column:span 2!important}
  html body .bvg-body .bvg-card-grid > :nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2!important}
  html body .bvg-body .bvg-card-grid > :nth-child(3n+1):last-child{grid-column:3 / span 2!important}
}
@media (min-width:961px){
  html body .bvg-reviewproof-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  html body .bvg-reviewproof-grid > *{grid-column:span 2!important}
  html body .bvg-reviewproof-grid > :nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2!important}
  html body .bvg-reviewproof-grid > :nth-child(3n+1):last-child{grid-column:3 / span 2!important}
}

/* 3. 2-up dark link cards on town pages ("Other work we do in <town>"): an odd count left one card alone
      with a half-row hole beside it. Centre the lone last card. Only where the list is 2 columns (561px+). */
@media (min-width:561px){
  html body .bb-page .bb-svc-links > :last-child:nth-child(odd){grid-column:1 / -1!important;justify-self:center;width:calc(50% - 5px)}
}

/* 4. Mid-page call-to-action bands (/services/ pages): "Call" and "Get a Free Estimate" buttons stacked
      with 0px between them on phones (5px on desktop). Give them air. */
.bvg-midcta .bvg-btn{margin:6px!important}

/* 5. Headings ended with one word alone on the last line (133 on phones across the 19 money pages).
      Balance the lines; wording unchanged. */
main h1,main h2,main h3{text-wrap:balance}

/* ---- 2026-10-23 hamza/Claude, Manual QA card a3a8ab49: lone last cards (layout only, no copy/colour/font changes).
   This file = the 10-16 rules above unchanged + rules 6-10. Rollback = point the <link> back at fs-qa-design-8a478ca149db.css. */

/* 6. Town pages, "Get Driving Directions From <town>" map cards and the directions text cards: 3 cards in a 2-column
      grid at tablet width (561-1020px) left the third card alone with a half-row hole. Centre the lone last card. */
@media (min-width:561px) and (max-width:1020px){
  html body .bb-page .bb-dir-maps > :last-child:nth-child(odd):not(:first-child),
  html body .bb-page .bb-dir-text > :last-child:nth-child(odd):not(:first-child){grid-column:1 / -1!important;justify-self:center;width:calc(50% - 11px)}
}

/* 7. Route notes (Route 3 / Route 46 / Route 21 / Garden State Parkway): 4 notes in a 3-column grid on desktop left the
      fourth alone on the left. Centre the short last row (same method as rule 2). */
@media (min-width:1001px){
  html body .bvg-body .bvg-routes{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  html body .bvg-body .bvg-routes > *{grid-column:span 2!important}
  html body .bvg-body .bvg-routes > :nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2!important}
  html body .bvg-body .bvg-routes > :nth-child(3n+1):last-child{grid-column:3 / span 2!important}
}

/* 7b. Same for the area lists inside "Keep reading" on the town and service template (.bb-areas): 3 columns above 860px,
       so 4 towns left the fourth alone. Centre the short last row. */
@media (min-width:861px){
  html body .bb-page .bb-areas .bb-more-body .bvg-dir-grid,
  html body .bb-page .bb-areas .bb-more-body ul.bvg-svc-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  html body .bb-page .bb-areas .bb-more-body .bvg-dir-grid > *,
  html body .bb-page .bb-areas .bb-more-body ul.bvg-svc-grid > *{grid-column:span 2!important}
  html body .bb-page .bb-areas .bb-more-body .bvg-dir-grid > :nth-child(3n+1):nth-last-child(2),
  html body .bb-page .bb-areas .bb-more-body ul.bvg-svc-grid > :nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2!important}
  html body .bb-page .bb-areas .bb-more-body .bvg-dir-grid > :nth-child(3n+1):last-child,
  html body .bb-page .bb-areas .bb-more-body ul.bvg-svc-grid > :nth-child(3n+1):last-child{grid-column:3 / span 2!important}
}

/* 8. Text card grids (.bvg-mini-grid, e.g. /services/gutters): the grid fits as many 290px columns as it can, so an odd
      number of cards in its 2-column state left one card alone. Centre it. 2 columns = from 2x290 + 1 gap up to (not incl.)
      3x290 + 2 gaps, with the grid's own gap clamp(26px,3vw,46px). Skipped where another sheet fixes the column count:
      cards inside .bb-card (always 2), and above 1000px the post pages, /about and grids without card headings
      (fs-reading-flow makes those 1 column). */
.bvg-mini-grid{container:fsqa-mini / inline-size}
@media (max-width:1000px){
  @container fsqa-mini (min-width:calc(580px + clamp(26px,3vw,46px))) and (max-width:calc(869.98px + 2 * clamp(26px,3vw,46px))){
    html body main .bvg-mini-grid:not(.bb-card .bvg-mini-grid) > :last-child:nth-child(odd):not(:first-child){grid-column:1 / -1!important;justify-self:center;width:calc((100% - clamp(26px,3vw,46px)) / 2)}
  }
}
@media (min-width:1001px){
  @container fsqa-mini (min-width:calc(580px + clamp(26px,3vw,46px))) and (max-width:calc(869.98px + 2 * clamp(26px,3vw,46px))){
    html:not(.bvg-post-page):not(:has(link[rel="canonical"][href="https://www.4seasons-construction.com/about"])) body main .bvg-mini-grid:has(> .bvg-mini > h2, > .bvg-mini > h3):not(.bb-card .bvg-mini-grid) > :last-child:nth-child(odd):not(:first-child){grid-column:1 / -1!important;justify-self:center;width:calc((100% - clamp(26px,3vw,46px)) / 2)}
  }
}

/* 8b. The same text card grids inside a .bb-card (hub and town template) are always 2 columns from 561px
       (fs-radius-bb-layout), so the odd last card is centred there too. Above 1000px only grids with card headings
       stay 2 columns (fs-reading-flow), so the rule follows that. */
@media (min-width:561px) and (max-width:1000px){
  html body .bb-page .bb-card .bvg-mini-grid > :last-child:nth-child(odd):not(:first-child){grid-column:1 / -1!important;justify-self:center;width:calc((100% - clamp(26px,3vw,46px)) / 2)}
}
@media (min-width:1001px){
  html:not(.bvg-post-page) body .bb-page .bb-card .bvg-mini-grid:has(> .bvg-mini > h2, > .bvg-mini > h3) > :last-child:nth-child(odd):not(:first-child){grid-column:1 / -1!important;justify-self:center;width:calc((100% - clamp(26px,3vw,46px)) / 2)}
}

/* 8c. A free-fitting text card grid in its 3-column state (3x290 + 2 gaps up to 4x290 + 3 gaps) with one card left
       on the last row: put that card in the middle column. Same exclusions as rule 8 above 1000px. */
@media (min-width:1001px){
  @container fsqa-mini (min-width:calc(870px + 2 * clamp(26px,3vw,46px))) and (max-width:calc(1159.98px + 3 * clamp(26px,3vw,46px))){
    html:not(.bvg-post-page):not(:has(link[rel="canonical"][href="https://www.4seasons-construction.com/about"])) body main .bvg-mini-grid:has(> .bvg-mini > h2, > .bvg-mini > h3):not(.bb-card .bvg-mini-grid) > :nth-child(3n+1):last-child:not(:first-child){grid-column:2!important}
  }
}

/* 9. Same for the 240px map-card grid outside the town template (e.g. /nj/best-roofing-contractors-clifton-nj):
      always 2 columns between 498 and 755px wide (2x240 + 18 gap; 3 columns need 3x240 + 2x18 = 756). Not inside .bvg-body,
      where design.css makes the same grid 1 column up to 1000px (e.g. the /es/ pages). */
.bvg-dir-grid.bvg-dir-maps-2026-07-24:not(.bb-dir-maps):not(.bvg-body .bvg-dir-grid){container:fsqa-dir / inline-size}
@container fsqa-dir (min-width:498px) and (max-width:755px){
  .bvg-dir-grid.bvg-dir-maps-2026-07-24:not(.bb-dir-maps):not(.bvg-body .bvg-dir-grid) > :last-child:nth-child(odd):not(:first-child){grid-column:1 / -1!important;justify-self:center;width:calc(50% - 9px)}
}

/* 10. Phones: the floating "Get a roof quote" tab sat over the hero form's featured review and form fields. While a lead
       form is on screen (an inline script sets body.fs-form-onscreen) the tab steps aside; it shows again as soon as no form
       is in view. The sticky Call bar and the forms themselves are unchanged. */
@media (max-width:767px){
  html body.fs-form-onscreen .fs-quote-tab{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
}