/* V-render Case Studies — frontend v2
   Sleek 2026 editorial pacing: generous whitespace, hero genuinely large
   (not a thumbnail), image-forward throughout. Matches the site design
   system (warm paper, red accent, Bricolage Grotesque / Fraunces / Inter). */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700;800&family=Fraunces:ital,wght@1,400;1,500&family=Inter:wght@400;500;600&display=swap');

:root{
	--vcs-paper:#FAF7F2; --vcs-card:#F0EAE0; --vcs-ink:#15130F; --vcs-ink-soft:#5C584F;
	--vcs-accent:#CF2D26; --vcs-accent-ink:#7A1712; --vcs-line: rgba(21,19,15,0.12);
}

.vcs-case-study{ background:transparent; color:var(--vcs-ink); font-family:'Inter',sans-serif; line-height:1.65; }
.vcs-wrap{ max-width:1040px; margin:0 auto; padding:0 32px; }
.vcs-kicker{ font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--vcs-accent); margin:0 0 12px; }
.vcs-case-study h1{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:48px; letter-spacing:-0.02em; line-height:1.06; margin:0 0 12px; }
.vcs-case-study h3{ font-size:17px; font-weight:600; margin:0 0 6px; }
.vcs-section{ padding:64px 0; border-bottom:1px solid var(--vcs-line); }
.vcs-section:last-child{ border-bottom:none; }
.vcs-hook{ font-family:'Fraunces',serif; font-style:italic; font-size:20px; color:var(--vcs-ink); max-width:680px; margin:0; }
.vcs-visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---- HERO: the story's opening — genuinely large, not a thumbnail ---- */
.vcs-hero{ padding:0 0 56px; }
.vcs-hero-media-wrap{ aspect-ratio:16/8; overflow:hidden; margin-bottom:32px; }
.vcs-hero-media-wrap img, .vcs-hero-media-wrap video{ width:100%; height:100%; object-fit:cover; display:block; }
.vcs-hero-caption{ max-width:1040px; margin:0 auto; padding:0 32px; }

/* ---- STATS ---- */
.vcs-stats{ display:flex; gap:40px; flex-wrap:wrap; margin:0 0 40px; max-width:1040px; padding:0 32px 0 0; }
.vcs-stat dt{ font-family:'Bricolage Grotesque',sans-serif; font-size:32px; font-weight:700; color:var(--vcs-accent); }
.vcs-stat dd{ font-size:12.5px; color:var(--vcs-ink-soft); margin:0; }

/* ---- STORY NOTES: magazine-style text + optional companion image ---- */
.vcs-story{ max-width:1040px; margin:0 auto; padding:64px 32px; }
.vcs-block{ margin-bottom:40px; }
.vcs-block p{ font-size:17px; max-width:680px; }
.vcs-block--text-only p{ margin:0 auto; }
.vcs-block--left, .vcs-block--right{
	display:grid; grid-template-columns:1fr 1.4fr; gap:32px; align-items:center;
}
.vcs-block--right{ grid-template-columns:1.4fr 1fr; }
.vcs-block--right .vcs-block-media{ order:2; }
.vcs-block-media{ border-radius:14px; overflow:hidden; }
.vcs-block-media img{ width:100%; display:block; }
.vcs-block--top .vcs-block-media{ border-radius:14px; overflow:hidden; margin-bottom:20px; max-width:680px; }
.vcs-block--top .vcs-block-media img{ width:100%; display:block; }
.vcs-block--bottom .vcs-block-media{ border-radius:14px; overflow:hidden; margin-top:20px; max-width:680px; }
.vcs-block--bottom .vcs-block-media img{ width:100%; display:block; }

.vcs-quote{ font-family:'Fraunces',serif; font-style:italic; font-size:21px; color:var(--vcs-ink); border-left:2px solid var(--vcs-accent); padding-left:22px; max-width:640px; margin:40px 0 0; }
.vcs-quote footer{ font-family:'Inter',sans-serif; font-style:normal; font-size:13px; color:var(--vcs-ink-soft); margin-top:8px; }

/* ---- GALLERY ---- */
.vcs-gallery-section.vcs-width-boxed{ max-width:1040px; margin:0 auto; padding:64px 32px; }
.vcs-gallery-section.vcs-width-full{ padding:64px 0; }
.vcs-gallery-section.vcs-width-full .vcs-gallery{ padding:0 32px; }

.vcs-gallery figure{ margin:0; }
.vcs-gallery img{ width:100%; display:block; border-radius:12px; cursor:zoom-in; }
.vcs-gallery figcaption{ font-size:12.5px; color:var(--vcs-ink-soft); margin-top:8px; }

/* Grid — uniform, cropped by design */
.vcs-gallery--grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.vcs-gallery--grid img{ aspect-ratio:4/3; object-fit:cover; }

/* Masonry — Pinterest-style, natural aspect ratio, no cropping */
.vcs-gallery--masonry{ column-count:3; column-gap:16px; }
.vcs-gallery--masonry figure{ break-inside:avoid; margin-bottom:16px; }
.vcs-gallery--masonry img{ height:auto; }

/* Carousel — natural aspect ratio, horizontal scroll-snap, no JS required */
.vcs-gallery--carousel{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
.vcs-gallery--carousel figure{ flex:0 0 auto; width:min(70%, 480px); scroll-snap-align:start; }
.vcs-gallery--carousel img{ height:auto; }

/* Slideshow — one image at a time, JS-controlled */
.vcs-slideshow{ position:relative; aspect-ratio:16/10; border-radius:12px; overflow:hidden; }
.vcs-slide{ position:absolute; inset:0; opacity:0; transition:opacity .4s ease; margin:0; }
.vcs-slide--active{ opacity:1; }
.vcs-slide img{ width:100%; height:100%; object-fit:contain; background:var(--vcs-card); border-radius:0; }
.vcs-slideshow-controls{ display:flex; justify-content:center; gap:12px; margin-top:16px; }
.vcs-slideshow-controls button{ background:var(--vcs-ink); color:#fff; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:16px; }
.vcs-slideshow-controls button:hover{ background:var(--vcs-accent-ink); }

/* ---- TIMELINE ---- */
.vcs-timeline{ max-width:1040px; margin:0 auto; padding:64px 32px; }
.vcs-timeline-list{ list-style:none; margin:0; padding:0; }
.vcs-timeline-step{ display:grid; grid-template-columns:70px 1fr; gap:24px; padding:28px 0; border-top:1px solid var(--vcs-line); }
.vcs-timeline-step:first-child{ border-top:none; }
.vcs-timeline-num{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:28px; color:var(--vcs-card); -webkit-text-stroke:1.5px var(--vcs-ink); }
.vcs-timeline-step p{ font-size:14.5px; color:var(--vcs-ink-soft); margin:0; }

/* ---- SERVICE (taxonomy term archive) ---- */
.vcs-service{ background:var(--vcs-paper); color:var(--vcs-ink); font-family:'Inter',sans-serif; line-height:1.65; }
.vcs-service h1{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:48px; letter-spacing:-0.02em; line-height:1.06; margin:0 0 12px; }
.vcs-service h2{ font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:28px; margin:0 0 24px; }
.vcs-service h3{ font-size:17px; font-weight:600; margin:0 0 6px; }

.vcs-service-hero{ padding-top:64px; }
.vcs-service-description{ font-size:17px; color:var(--vcs-ink-soft); max-width:680px; margin:0; }

.vcs-service-feature-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:14px 32px; }
.vcs-service-feature-list li{ font-size:15.5px; padding-left:22px; position:relative; }
.vcs-service-feature-list li::before{ content:''; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--vcs-accent); }

.vcs-service-process-list{ list-style:none; margin:0; padding:0; }
.vcs-service-process-step{ display:grid; grid-template-columns:70px 1fr; gap:24px; padding:28px 0; border-top:1px solid var(--vcs-line); }
.vcs-service-process-step:first-child{ border-top:none; }
.vcs-service-process-step p{ font-size:14.5px; color:var(--vcs-ink-soft); margin:0; }

.vcs-related-work-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.vcs-related-work-card{ display:block; text-decoration:none; color:inherit; }
.vcs-related-work-media{ aspect-ratio:4/3; background:var(--vcs-card); border-radius:12px; overflow:hidden; margin-bottom:14px; }
.vcs-related-work-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vcs-related-work-client{ font-size:12.5px; color:var(--vcs-ink-soft); text-transform:uppercase; letter-spacing:.04em; margin:0 0 4px; }

/* ---- native WP content (manual additions) ---- */
.vcs-native-content{ padding:48px 32px; }
.vcs-native-content p{ font-size:16px; max-width:680px; }

/* ---- LIGHTBOX ---- */
.vcs-lightbox-overlay{
	position:fixed; inset:0; background:rgba(21,19,15,0.92); z-index:9999;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	padding:40px 20px;
}
.vcs-lightbox-overlay[hidden]{ display:none; }
.vcs-lightbox-img{ max-width:min(92vw, 1100px); max-height:78vh; object-fit:contain; border-radius:8px; }
.vcs-lightbox-caption{ color:#EFEBDF; font-family:'Inter',sans-serif; font-size:13.5px; margin-top:14px; max-width:640px; text-align:center; }
.vcs-lightbox-close{
	position:absolute; top:20px; right:24px; background:rgba(255,255,255,0.1); color:#fff;
	border:none; width:40px; height:40px; border-radius:50%; font-size:22px; line-height:1; cursor:pointer;
}
.vcs-lightbox-close:hover{ background:rgba(255,255,255,0.2); }

@media(max-width:780px){
	.vcs-case-study h1{ font-size:32px; }
	.vcs-service h1{ font-size:32px; }
	.vcs-service-feature-list{ grid-template-columns:1fr; }
	.vcs-block--left, .vcs-block--right{ grid-template-columns:1fr; }
	.vcs-block--right .vcs-block-media{ order:0; }
	.vcs-gallery--grid{ grid-template-columns:repeat(2,1fr); }
	.vcs-gallery--masonry{ column-count:2; }
	.vcs-gallery--carousel figure{ width:82%; }
}