/*
 * Real ACE photos and phone layout for the trust and info pages (/site-visit/, /our-work/ and its stories, /reviews/,
 * /about/, /contact/, /service-area/, /faq/, /thank-you/). Loaded only on those pages, after trust-v3.css.
 * Focal points: a real photo carries background-position (or object-position) inline and its phone focal in --pos-m.
 */

/* Staging only (ace_photo_needed): the real photo a spot still needs. Never printed in production. */
.photo-needed{display:flex;align-items:center;justify-content:center;min-height:120px;margin:0;padding:16px;border:2px dashed #A67C3F;border-radius:6px;background:rgba(166,124,63,.06);color:#7a5a2c;font:600 12px/1.5 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center}

@media (max-width:640px){
	/* phones: the portrait crop and its own focal point */
	main.v3 [style*="--img-m"]{background-image:var(--img-m)!important}
	main.v3 [style*="--pos-m"]{background-position:var(--pos-m)!important}
	main.v3 img[style*="--pos-m"]{object-position:var(--pos-m)!important}
}

/* ---------- phone layout (390, also 360 and 430) ---------- */
@media (max-width:760px){
	main.v3{overflow-x:clip}
	main.v3 p,main.v3 li,main.v3 .lead,main.v3 .tp-lead,main.v3 .ct-text,main.v3 .sa-card-line,main.v3 .fq-mid-t{font-size:max(16px,1em)!important}
	main.v3 .btn,main.v3 a.btn,main.v3 button,main.v3 .ghost-link,main.v3 .ct-card,main.v3 .sa-card-go a,main.v3 .vis-actions a{min-height:44px}
	main.v3 .picker-opt,main.v3 .fin-more{min-height:44px!important}
	main.v3 .ct-proof-link,main.v3 .ct-close-social a,main.v3 .fq-gkey-go,main.v3 .fq-mid-call,main.v3 .ty-status-go,main.v3 .sa-find-l,main.v3 .sa-rv-part,main.v3 .fq-rev-more,main.v3 figcaption a{display:inline-flex;align-items:center;min-height:44px}
	main.v3 .fq-rail ol a{min-height:44px}
	main.v3 .rq-g{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
	main.v3 .crumbs a,main.v3 nav[aria-label="Breadcrumb"] a{display:inline-flex;align-items:center;min-height:44px}
	main.v3 .btn,main.v3 a.btn{display:inline-flex;align-items:center;justify-content:center}

	/* tabbed lists (site-visit SV-03 / SV-15): the tab labels become one swipe row */
	main.v3 .vis-tabs .tabset{display:grid;grid-template-columns:1fr}
	main.v3 .vis-tabs .tabset > label{min-height:44px;display:flex;align-items:center}

	/* short question cards: a swipe row, not a long stack */
	main.v3 .vcards{display:flex!important;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-16px;margin-right:-16px;padding:0 16px 8px;scrollbar-width:none}
	main.v3 .vcards::-webkit-scrollbar{display:none}
	main.v3 .vcards > .vcard{flex:0 0 66%;scroll-snap-align:start}

	/* behind the scenes (our work): a swipe row instead of a long mosaic */
	main.v3 .vis-gallery .gmosaic{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
	main.v3 .vis-gallery .gmosaic::-webkit-scrollbar{display:none}
	main.v3 .vis-gallery .gm-i{flex:0 0 78%;aspect-ratio:4/5;height:auto;grid-column:auto!important;grid-row:auto!important;scroll-snap-align:start;margin:0}
	main.v3 .vis-gallery .gm-i > div{height:100%}

	/* the reviews wall: one column, photos as wide frames between the quotes */
	main.v3 .vis-rwall .rwall{columns:1!important;display:block}
	main.v3 .vis-rwall .rw-photo > div{min-height:220px}

	/* service area directory: a swipe row of area cards */
	main.v3 .sa-dir-grid,main.v3 .sa-cards{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 8px;scrollbar-width:none}
	main.v3 .sa-dir-grid::-webkit-scrollbar,main.v3 .sa-cards::-webkit-scrollbar{display:none}
	main.v3 .sa-dir-grid > .sa-card,main.v3 .sa-cards > .sa-card{flex:0 0 84%;scroll-snap-align:start}

	/* project stories: gallery as a swipe row of tall frames */
	main.v3 .proj-gallery .gal-grid{display:flex;grid-template-columns:none;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
	main.v3 .proj-gallery .gal-grid::-webkit-scrollbar{display:none}
	main.v3 .proj-gallery .gal-img{flex:0 0 82%;scroll-snap-align:start;margin:0}
	main.v3 .proj-gallery .gal-img img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover}

	/* the closing band photo sits above the copy, never under it */
	main.v3 .fin3 .fin-visual img{aspect-ratio:4/3;height:auto;object-fit:cover}
}