/* ==========================================================================
 * Site v3: gallery and case studies.
 *
 * Pages: /gallery/ and its category pages (template-gallery.php, one page with a
 * query var, so one body class), the /case-study/ archive and single case studies.
 * Loads after css/site-v3.css. No focus styles, by agency rule.
 * ======================================================================== */

/* ---------- Gallery ---------- */
body.page-template-page-templatestemplate-gallery-php{--gal-gut:16px}
@media(min-width:1024px){body.page-template-page-templatestemplate-gallery-php{--gal-gut:40px}}

body.page-template-page-templatestemplate-gallery-php .gallery-page__header{padding:48px var(--gal-gut) 16px}
body.page-template-page-templatestemplate-gallery-php .gallery-page__header h1{font:400 clamp(36px,4.6vw,60px)/1.04 var(--v3-serif);letter-spacing:-.01em;color:var(--v3-ink)}
body.page-template-page-templatestemplate-gallery-php .gallery-page__intro{padding:0 var(--gal-gut) 24px}
body.page-template-page-templatestemplate-gallery-php .gallery-page__intro-copy,
body.page-template-page-templatestemplate-gallery-php .gallery-page__description{max-width:720px;color:var(--v3-ink)}
body.page-template-page-templatestemplate-gallery-php .gallery-page__description,
body.page-template-page-templatestemplate-gallery-php .gallery-page__description :is(p,li){font:400 16px/1.6 var(--v3-sans);letter-spacing:0;color:var(--v3-ink)}
body.page-template-page-templatestemplate-gallery-php .gallery-page__description p{margin:0 0 .8em}
body.page-template-page-templatestemplate-gallery-php .gallery-page__description a{color:inherit;text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}
body.page-template-page-templatestemplate-gallery-php .gallery-page__description-toggle{margin-top:12px;padding:0 0 4px;border-bottom:1px solid currentColor;border-radius:0;font:500 14px/1.3 var(--v3-sans);letter-spacing:.04em;color:var(--v3-ink)}

body.page-template-page-templatestemplate-gallery-php .gallery-page__cta-bar{padding:0 var(--gal-gut) 24px;text-align:center}
body.page-template-page-templatestemplate-gallery-php .gallery-page__cta-bar:not(:has(a)){display:none}
body.page-template-page-templatestemplate-gallery-php .gallery-page__cta-link{border:0}

body.page-template-page-templatestemplate-gallery-php .gallery-page{padding:0 var(--gal-gut) 56px}

/* Category filters: square chips. Phones and tablets use an even 3-column grid so no chip sits alone. */
body.page-template-page-templatestemplate-gallery-php .gallery-page__filters{min-height:0;margin-bottom:20px}
body.page-template-page-templatestemplate-gallery-php .gallery-page__filters .relative.flex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;max-width:560px;margin:0 auto;overflow:visible}
body.page-template-page-templatestemplate-gallery-php .gallery-page__filters .relative.flex:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
body.page-template-page-templatestemplate-gallery-php .gallery-page__filters .relative.flex:has(> :nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr));max-width:680px}
body.page-template-page-templatestemplate-gallery-php .gallery-page__filter-btn{min-height:44px;padding:6px 10px;border:1px solid #cdc8bb;border-radius:var(--v3-r);background:#fff;color:var(--v3-ink);font:500 14px/1.2 var(--v3-sans);letter-spacing:.02em;text-align:center;text-wrap:balance}
body.page-template-page-templatestemplate-gallery-php .gallery-page__filter-btn:hover{border-color:var(--v3-olive);background:#fff;color:var(--v3-ink)}
body.page-template-page-templatestemplate-gallery-php .gallery-page__filter-btn.is-active,
body.page-template-page-templatestemplate-gallery-php .gallery-page__filter-btn.is-active:hover{border-color:var(--v3-olive);background:var(--v3-olive);color:#fff}
@media(min-width:900px){
  body.page-template-page-templatestemplate-gallery-php .gallery-page__filters .relative.flex,
  body.page-template-page-templatestemplate-gallery-php .gallery-page__filters .relative.flex:is(:has(> :nth-child(4):last-child),:has(> :nth-child(7))){display:flex;flex-wrap:nowrap;justify-content:center;max-width:none}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__filter-btn{padding:0 18px;font-size:15px;white-space:nowrap}
}

/* Grid: plain, even, 4px images with a plain-English caption. */
body.page-template-page-templatestemplate-gallery-php .gallery-page__grid-wrap{padding:0}
body.page-template-page-templatestemplate-gallery-php .gallery-page__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px}
body.page-template-page-templatestemplate-gallery-php .gallery-page__item{min-width:0}
body.page-template-page-templatestemplate-gallery-php .gallery-page__image-button{border-radius:var(--v3-r);background:#efebe0;cursor:zoom-in}
body.page-template-page-templatestemplate-gallery-php .gallery-page__image{aspect-ratio:4/3;border-radius:var(--v3-r);transition:transform .4s ease}
body.page-template-page-templatestemplate-gallery-php .gallery-page__image-button:hover .gallery-page__image{transform:scale(1.015)}
body.page-template-page-templatestemplate-gallery-php .gallery-page__caption{margin:8px 0 0;font:400 14px/1.4 var(--v3-sans);letter-spacing:0;color:var(--v3-ink);text-wrap:balance}
/* Odd count on two columns: the first photo runs full width, so the last row is never a single photo. */
body.page-template-page-templatestemplate-gallery-php .gallery-page__grid:has(> :last-child:nth-child(odd):not(:first-child)) > :first-child{grid-column:1/-1}
body.page-template-page-templatestemplate-gallery-php .gallery-page__grid:has(> :last-child:nth-child(odd):not(:first-child)) > :first-child .gallery-page__image{aspect-ratio:16/10}
@media(min-width:768px){
  body.page-template-page-templatestemplate-gallery-php .gallery-page{padding-bottom:80px}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__header{padding-top:72px;padding-bottom:20px}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__intro{padding-bottom:28px}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__description,
  body.page-template-page-templatestemplate-gallery-php .gallery-page__description :is(p,li){font-size:17px}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__filters{margin-bottom:28px}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__caption{font-size:15px;line-height:1.35}
  /* Reset the two-column rule, then handle a count that would leave one photo on the last row of three. */
  body.page-template-page-templatestemplate-gallery-php .gallery-page__grid:has(> :last-child:nth-child(odd):not(:first-child)) > :first-child{grid-column:auto}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__grid:has(> :last-child:nth-child(odd):not(:first-child)) > :first-child .gallery-page__image{aspect-ratio:4/3}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__grid:has(> :last-child:nth-child(3n+1):not(:first-child)) > :first-child{grid-column:span 2}
  body.page-template-page-templatestemplate-gallery-php .gallery-page__grid:has(> :last-child:nth-child(3n+1):not(:first-child)) > :first-child .gallery-page__image{aspect-ratio:8/3}
}

/* Lightbox: darker backdrop, 4px image, plain caption, square line controls. */
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal.fixed{padding:24px 16px}
@media(min-width:1024px){body.page-template-page-templatestemplate-gallery-php .gallery-page__modal.fixed{padding:40px 64px}}
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal > .absolute.inset-0{background:rgb(0 0 0/.88)}
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal .relative.h-fit{flex-direction:column;padding-top:0;padding-bottom:16px}
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal .min-h-\[260px\]{min-height:0}
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal-image{max-height:74vh;max-height:74svh;border-radius:var(--v3-r)}
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal-caption{margin:12px 0 0;max-width:640px;font:400 15px/1.4 var(--v3-sans);letter-spacing:0;color:#fff;text-align:center;text-wrap:balance}
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal .relative.flex.gap-6{gap:8px}
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal .relative.flex.gap-6 > button{width:44px;height:44px;border-radius:var(--v3-r);border:1px solid rgb(255 255 255/.5);background:transparent;color:#fff;transition:background .2s,border-color .2s}
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal .relative.flex.gap-6 > button:hover:not(:disabled){background:rgb(255 255 255/.12);border-color:#fff}
body.page-template-page-templatestemplate-gallery-php .gallery-page__modal .relative.flex.gap-6 > button svg{font-size:20px;stroke-width:0}

/* ---------- Case studies: shared card ---------- */
body:is(.post-type-archive-case_study,.single-case_study) a.group.flex.flex-col{gap:14px;color:var(--v3-ink);text-decoration:none}
body:is(.post-type-archive-case_study,.single-case_study) a.group.flex.flex-col > .relative.overflow-hidden{aspect-ratio:3/2;border-radius:var(--v3-r);background:#efebe0}
body:is(.post-type-archive-case_study,.single-case_study) a.group.flex.flex-col > .relative.overflow-hidden img{width:100%;height:100%;object-fit:cover;border-radius:var(--v3-r);transition:transform .4s ease}
body:is(.post-type-archive-case_study,.single-case_study) a.group.flex.flex-col:hover > .relative.overflow-hidden img{transform:scale(1.015)}
body:is(.post-type-archive-case_study,.single-case_study) a.group.flex.flex-col .flex.flex-col.gap-3{gap:6px;padding-top:2px}
body:is(.post-type-archive-case_study,.single-case_study) a.group.flex.flex-col :is(h2,h3){font:500 20px/1.3 var(--v3-sans);letter-spacing:-.005em;color:var(--v3-ink)}
body:is(.post-type-archive-case_study,.single-case_study) a.group.flex.flex-col p{font-size:16px;line-height:1.55;letter-spacing:0;color:var(--v3-ink)}
body:is(.post-type-archive-case_study,.single-case_study) a.group.flex.flex-col > div:last-child > span{display:inline-block;padding-bottom:4px;border-bottom:1px solid currentColor;font:500 14px/1.3 var(--v3-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--v3-ink)}
body:is(.post-type-archive-case_study,.single-case_study) a.group.flex.flex-col:hover > div:last-child > span{color:var(--v3-olive)}

/* ---------- Case study archive ---------- */
body.post-type-archive-case_study main > .py-10{padding-top:48px;padding-bottom:56px}
body.post-type-archive-case_study main > .space-y-10 > :not([hidden]) ~ :not([hidden]){margin-top:36px}
body.post-type-archive-case_study main > .py-10 > section:first-child .max-w-\[664px\]{max-width:720px;gap:16px}
body.post-type-archive-case_study main > .py-10 > section:first-child h1{font:400 clamp(36px,4.6vw,60px)/1.04 var(--v3-serif);letter-spacing:-.01em}
body.post-type-archive-case_study main > .py-10 > section:first-child p{font-size:16px;line-height:1.6;letter-spacing:0;color:var(--v3-ink)}
body.post-type-archive-case_study main > .py-10 > section:nth-child(2) > .container.grid{gap:40px 24px}
@media(min-width:768px){
  body.post-type-archive-case_study main > .py-10 > section:nth-child(2) > .container.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}
}
@media(min-width:1024px){
  body.post-type-archive-case_study main > .py-10{padding-top:72px;padding-bottom:80px}
  body.post-type-archive-case_study main > .space-y-10 > :not([hidden]) ~ :not([hidden]){margin-top:48px}
  body.post-type-archive-case_study main > .py-10 > section:first-child p{font-size:17px}
  body.post-type-archive-case_study main > .py-10 > section:nth-child(2) > .container.grid{gap:56px 32px}
}
/* Pagination: square 4px boxes */
body.post-type-archive-case_study ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
body.post-type-archive-case_study ul.page-numbers :is(a,span).page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 10px;border:1px solid #cdc8bb;border-radius:var(--v3-r);font:500 15px/1 var(--v3-sans);color:var(--v3-ink);text-decoration:none}
body.post-type-archive-case_study ul.page-numbers span.current{background:var(--v3-olive);border-color:var(--v3-olive);color:#fff}
body.post-type-archive-case_study ul.page-numbers a.page-numbers:hover{border-color:var(--v3-olive)}

/* ---------- Single case study: a story, text beside its photos ---------- */
body.single-case_study{--cs-gut:16px}
@media(min-width:1024px){body.single-case_study{--cs-gut:40px}}

/* Intro */
body.single-case_study main > section:first-child{padding:48px var(--cs-gut) 32px}
body.single-case_study main > section:first-child > .max-w-\[1128px\]{max-width:1200px;gap:28px}
body.single-case_study main > section:first-child h1{font:400 clamp(36px,4.6vw,60px)/1.04 var(--v3-serif);letter-spacing:-.01em;color:var(--v3-ink)}
body.single-case_study main > section:first-child h1 + p{max-width:760px;font-size:17px;line-height:1.55;letter-spacing:0;color:var(--v3-ink)}
/* Project facts: one hairline above, olive labels, no pill boxes. */
body.single-case_study main > section:first-child .grid.grid-cols-2{gap:20px 24px;padding-top:20px;border-top:1px solid var(--v3-line)}
body.single-case_study main > section:first-child .grid.grid-cols-2 > div{gap:6px}
body.single-case_study main > section:first-child .grid.grid-cols-2 .rounded-full{padding:0;border:0;border-radius:0;font:500 13px/1.3 var(--v3-sans);letter-spacing:.09em;color:var(--v3-olive)}
body.single-case_study main > section:first-child .grid.grid-cols-2 .flex.flex-col.gap-1{font-size:16px;line-height:1.45;letter-spacing:0;color:var(--v3-ink)}
body.single-case_study main > section:first-child .grid.grid-cols-2:has(> :last-child:nth-child(odd):not(:first-child)) > :last-child{grid-column:1/-1}

/* Hero photo: inside the page margins, never taller than the screen. */
body.single-case_study main > section.h-\[320px\]{box-sizing:content-box;max-width:1200px;height:280px;margin:0 auto;padding:0 var(--cs-gut)}
body.single-case_study main > section.h-\[320px\] img{border-radius:var(--v3-r)}

/* Story sections */
body.single-case_study main > section:nth-child(3){padding:48px var(--cs-gut) 56px}
body.single-case_study main > section:nth-child(3) > .max-w-\[1128px\]{max-width:1200px;gap:48px}
body.single-case_study main > section:nth-child(3) section{gap:24px}
body.single-case_study main > section:nth-child(3) section > .grid:first-child{gap:16px}
body.single-case_study main > section:nth-child(3) section h2{font:400 clamp(28px,3vw,40px)/1.08 var(--v3-serif);letter-spacing:-.01em;color:var(--v3-ink)}
body.single-case_study main > section:nth-child(3) .prose{--tw-prose-body:var(--v3-ink);--tw-prose-bold:var(--v3-ink);--tw-prose-bullets:var(--v3-olive);--tw-prose-links:var(--v3-ink);max-width:62ch;font-size:16px;line-height:1.65;color:var(--v3-ink)}
body.single-case_study main > section:nth-child(3) .prose :is(p,li){letter-spacing:0;color:var(--v3-ink)}
body.single-case_study main > section:nth-child(3) .prose > :first-child{margin-top:0}
body.single-case_study main > section:nth-child(3) .prose > :last-child{margin-bottom:0}
body.single-case_study main > section:nth-child(3) .prose :is(p,ul,ol){margin-top:0;margin-bottom:.85em}
body.single-case_study main > section:nth-child(3) .prose li{margin:.25em 0}
body.single-case_study main > section:nth-child(3) .prose a{text-decoration-color:currentColor}
/* Photos: pairs stay side by side, every photo is cropped to an even shape. */
body.single-case_study main > section:nth-child(3) section > .flex.flex-col{gap:10px}
body.single-case_study main > section:nth-child(3) section > .flex.flex-col > .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.single-case_study main > section:nth-child(3) section > .flex.flex-col .relative.overflow-hidden{border-radius:var(--v3-r)}
body.single-case_study main > section:nth-child(3) section > .flex.flex-col img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--v3-r)}
body.single-case_study main > section:nth-child(3) section > .flex.flex-col > .grid img{aspect-ratio:4/3}

/* Call to action: olive band with a solid white button */
body.single-case_study main a.bg-primary-green{display:block;padding:28px 24px;border-radius:var(--v3-r);background:var(--v3-olive);transition:background .2s}
body.single-case_study main a.bg-primary-green:hover{background:var(--v3-olive-d)}
body.single-case_study main a.bg-primary-green > .flex{gap:20px}
body.single-case_study main a.bg-primary-green .flex.flex-col.gap-1{gap:6px}
body.single-case_study main a.bg-primary-green .flex.flex-col.gap-1 p:first-child{font:400 clamp(28px,3vw,40px)/1.08 var(--v3-serif);letter-spacing:-.01em;color:#fff;text-wrap:balance}
body.single-case_study main a.bg-primary-green .flex.flex-col.gap-1 p + p{font-size:17px;line-height:1.55;font-style:normal;letter-spacing:0;color:#fff}
body.single-case_study main a.bg-primary-green > .flex > span.relative{display:inline-flex;align-self:flex-start;align-items:center;min-height:52px;padding:0 26px;border-radius:var(--v3-r);background:#fff;color:var(--v3-ink);transition:background .2s}
body.single-case_study main a.bg-primary-green:hover > .flex > span.relative{background:var(--v3-paper)}
body.single-case_study main a.bg-primary-green > .flex > span.relative > span{padding:0!important;overflow:visible;transition:none}
body.single-case_study main a.bg-primary-green > .flex > span.relative > span > span.absolute{display:none}
body.single-case_study main a.bg-primary-green > .flex > span.relative .font-serif{font:500 15px/1 var(--v3-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--v3-ink);white-space:nowrap}

/* Related case studies */
body.single-case_study main > section[class*="bg-[rgba(212"]{background:var(--v3-paper)}
body.single-case_study main > section.pt-\[60px\]:not(.py-\[60px\]){padding:56px var(--cs-gut) 0}
body.single-case_study main > section.pt-\[60px\] h2{font:400 clamp(32px,3.4vw,46px)/1.06 var(--v3-serif);letter-spacing:-.01em;color:var(--v3-ink)}
body.single-case_study main > section.py-\[60px\]{padding:28px var(--cs-gut) 56px}
body.single-case_study main > section.py-\[60px\] > .max-w-\[1360px\]{max-width:1200px;gap:36px}
body.single-case_study main > section.py-\[60px\] .grid.grid-cols-1{width:100%;gap:36px}

@media(min-width:768px){
  body.single-case_study main > section.py-\[60px\] .grid.grid-cols-1{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  body.single-case_study main > section:first-child .grid.grid-cols-2{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  body.single-case_study main > section:first-child .grid.grid-cols-2 > :last-child{grid-column:auto!important}
}
@media(min-width:1024px){
  body.single-case_study main > section:first-child{padding:72px var(--cs-gut) 40px}
  body.single-case_study main > section:first-child > .max-w-\[1128px\]{gap:36px}
  body.single-case_study main > section:first-child h1 + p{font-size:19px}
  body.single-case_study main > section:first-child .grid.grid-cols-2{gap:24px 40px;padding-top:24px}
  body.single-case_study main > section.h-\[320px\]{height:clamp(360px,calc(100svh - 220px),680px)}

  body.single-case_study main > section:nth-child(3){padding:72px var(--cs-gut) 80px}
  body.single-case_study main > section:nth-child(3) > .max-w-\[1128px\]{gap:80px}
  /* Text column beside the photos; sides alternate down the page. */
  body.single-case_study main > section:nth-child(3) section:has(> .flex.flex-col){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
  body.single-case_study main > section:nth-child(3) section:has(> .flex.flex-col):nth-of-type(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  body.single-case_study main > section:nth-child(3) section:has(> .flex.flex-col):nth-of-type(even) > .grid:first-child{order:2}
  body.single-case_study main > section:nth-child(3) section > .grid:first-child{grid-template-columns:minmax(0,1fr);gap:20px}
  body.single-case_study main > section:nth-child(3) section:not(:has(> .flex.flex-col)) > .grid:first-child{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
  body.single-case_study main > section:nth-child(3) .prose{font-size:17px}
  body.single-case_study main > section:nth-child(3) section > .flex.flex-col,
  body.single-case_study main > section:nth-child(3) section > .flex.flex-col > .grid{gap:12px}

  body.single-case_study main a.bg-primary-green{padding:40px}
  body.single-case_study main a.bg-primary-green > .flex{flex-direction:row;align-items:center;justify-content:space-between;gap:40px}
  body.single-case_study main a.bg-primary-green > .flex > span.relative{align-self:center;flex:none}

  body.single-case_study main > section.pt-\[60px\]:not(.py-\[60px\]){padding-top:80px}
  body.single-case_study main > section.py-\[60px\]{padding:36px var(--cs-gut) 80px}
  body.single-case_study main > section.py-\[60px\] .grid.grid-cols-1{gap:32px}
}