/* Hallmark · macrostructure: Portfolio Grid · genre: editorial · theme: existing BP yellow
 * Audience: Middle Tennessee property owners · use: browse work and request an estimate
 * Nav: existing contractor masthead preserved · footer: Ft2 inline
 * Pre-emit critique: P4 H4 E4 S5 R5 V4 */
@import url('../tokens.css?v=3');
.work-main{padding-block:var(--space-2xl)}
.desktop-nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--color-accent-text);text-underline-offset:6px}
.work-intro{max-width:48rem;margin-bottom:var(--space-xl)}
.work-intro h1{margin-bottom:var(--space-lg)}
.work-intro p{max-width:55ch;font-size:var(--text-lead);color:var(--color-muted)}
.work-tools{padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-rule);margin-bottom:var(--space-xl)}
.work-filters{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-bottom:var(--space-md)}
.work-filters button{min-height:44px;padding:var(--space-xs) var(--space-md);border:1px solid var(--color-muted);background:var(--color-paper);color:var(--color-ink);font-size:var(--text-sm);font-weight:600}
.work-filters button[aria-pressed=true]{background:var(--color-ink);color:var(--color-paper);text-decoration:underline;text-decoration-color:var(--color-accent);text-underline-offset:5px}
#work-count{font-size:var(--text-sm);color:var(--color-muted)}
.work-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
.work-card{min-width:0}
.work-photo{display:block;position:relative;background:var(--color-paper-2);color:var(--color-ink)}
.work-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 60%}
.work-photo span{position:absolute;bottom:var(--space-md);right:var(--space-md);background:var(--color-paper);color:var(--color-ink);padding:var(--space-sm) var(--space-md);font-weight:700;font-size:var(--text-sm);white-space:nowrap}
.work-caption{padding-top:var(--space-md)}
.work-caption h2{font-size:var(--text-subtitle);margin-bottom:var(--space-xs)}
.work-caption p{font-size:var(--text-sm);color:var(--color-muted)}
.work-next{margin-top:var(--space-2xl);padding-block:var(--space-xl);border-top:1px solid var(--color-rule);display:flex;align-items:flex-start;flex-direction:column;gap:var(--space-lg)}
.work-next h2{margin-bottom:var(--space-sm)}
.work-more{font-size:var(--text-sm)}
.work-more a{display:inline-block;white-space:nowrap}
.work-footer{padding-block:var(--space-xl);background:var(--color-ink);color:var(--color-paper)}
.work-footer .wrap{display:flex;flex-wrap:wrap;gap:var(--space-lg);align-items:center}
.work-footer a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
#work-gallery{position:fixed;inset:0;margin:auto;width:calc(100% - 2rem);max-width:1000px;height:fit-content;max-height:94dvh;overflow:auto;border:0;padding:var(--space-lg);background:var(--color-paper);color:var(--color-ink)}
#work-gallery::backdrop{background:color-mix(in oklch,var(--color-overlay) 88%,transparent)}
.gallery-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);margin-bottom:var(--space-md)}
.gallery-heading h2{font-size:var(--text-subtitle)}
#work-gallery button{min-height:44px;padding:var(--space-xs) var(--space-sm);border:1px solid var(--color-muted);background:var(--color-paper);color:var(--color-ink)}
.gallery-stage{background:var(--color-paper-2);color:var(--color-ink);min-height:12rem;position:relative}
.gallery-stage img,.gallery-stage video{display:block;width:100%;height:55dvh;object-fit:contain}
.gallery-stage[aria-busy=true]::after{content:'Loading…';position:absolute;bottom:var(--space-sm);left:var(--space-sm);padding:var(--space-xs);background:var(--color-paper);color:var(--color-ink)}
#media-error{padding:var(--space-lg);color:var(--color-error)}
#media-error a{text-decoration:underline}
.gallery-controls{display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs);padding-top:var(--space-md)}
#work-position{font-size:var(--text-sm);font-variant-numeric:tabular-nums;text-align:center}
.gallery-estimate{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-sm);font-size:var(--text-sm);text-decoration:underline}
body:has(#work-gallery[open]){overflow-y:hidden}
#work-gallery button:disabled{opacity:.5;cursor:not-allowed}
@media(hover:hover){.work-photo:hover span,.work-filters button:hover,#work-gallery button:not(:disabled):hover{background:var(--color-accent);color:var(--color-accent-ink)}}
.work-filters button:active,#work-gallery button:active{transform:translateY(1px)}
@media(min-width:43.75rem){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-xl);row-gap:var(--space-2xl)}.work-next{flex-direction:row;justify-content:space-between;align-items:center}}
@media(max-width:25rem){#work-gallery{padding:var(--space-sm)}.gallery-controls button{font-size:var(--text-sm)}.work-more a{font-size:.8rem}.gallery-estimate{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.work-filters button:active,#work-gallery button:active{transform:none}}