/* client_custom.css: post-launch tweaks for Duration Concrete Coatings. Loaded AFTER duration-global.css on every page.
   The canonical stylesheet is regenerated whenever Phase 6A re-runs; put lasting design changes in the source, not here. */
/* QA 2026-10-31 (the user brought back the approved slider): the homepage "See Our Work" strip as approved (photos, gap,
   arrows below, scrollbar), kept inside the content width, with the same left and right edges as the heading and the
   portfolio button, instead of running to the right edge of the screen. CSS only; .work is on the homepage only. */
.work .strip{width:min(var(--container),100% - 2*var(--gutter));margin-inline:auto;padding:0 0 18px;scroll-padding-inline:0}
/* QA 2026-10-31: whole photos only, never a half photo at the edge: 4 per view on desktop, 2 on tablets, 1 on phones (the
   approved 30px gap; heights stay as approved, 366px and 300px from 768px down). The arrows step one photo. */
.work .strip>*{flex:0 0 calc((100% - 90px)/4)}
@media (max-width:1180px){.work .strip>*{flex-basis:calc((100% - 30px)/2)}}
@media (max-width:600px){.work .strip>*{flex-basis:100%}}

/* QA 2026-10-30: on the Specials page the coupon stubs' dates ("March through October.", "November through February.")
   were held on one line and clipped by the ticket. They now wrap onto balanced lines; font, size and spacing unchanged.
   The homepage coupons' shorter dates fit on one line, so they render as before. */
.ticket__dates{white-space:normal}
.ticket__valid{text-wrap:balance}

/* QA 2026-10-31: the Portfolio gallery. The browser's default <figure> margin (16px 40px) sat inside each grid cell, so the
   photos were 80px narrower than their columns and the gap between columns (110px) far wider than between rows (62px).
   Without it the photos fill their columns, edge to edge with the text above, and both gaps are the grid's own: 30px,
   16px on phones. .gallery-grid is on /portfolio/ only. */
.gallery-grid figure{margin:0}
/* QA 2026-10-31: a short last row is centred (20 photos in 3 columns leave 2): the gallery wraps as a centred flex row with
   the approved columns (3; 2 from 769-1180px; 1 from 768px down) and gaps, so full rows are exactly as before. */
.gallery-grid{display:flex;flex-wrap:wrap;justify-content:center}
.gallery-grid>figure{flex:0 0 calc((100% - 60px)/3)}
@media (min-width:769px) and (max-width:1180px){.gallery-grid>figure{flex-basis:calc((100% - 30px)/2)}}
@media (max-width:768px){.gallery-grid>figure{flex-basis:100%}}