/* =========================================================
   Single project (single-tap_portfolio.php) — editorial/luxury
   redesign: full-bleed hero, then a 65/35 two-column layout that
   runs the narrative (overview, challenge callout, scope
   checklist, solution content) beside a sticky sidebar (project
   snapshot facts + a permanently-visible CTA) so the two run in
   parallel instead of stacking — the main reason this cuts total
   scroll length vs. a single centered column. Phases (timeline),
   gallery, and outcomes drop back to full width below the split
   since they benefit from more room than the 65% column gives.
   Reuses .tap-journey-track/.tap-journey-stage/.tap-journey-arrow
   from elementor-sections.css (already a dependency — see
   functions.php's tap-single-project enqueue). No new colors,
   radii, or shadows — everything pulls from the shared tokens.
   ========================================================= */

.tap-project-main-wrap{padding-bottom:100px;}
.tap-project-body{max-width:1180px;margin-inline:auto;padding-inline:24px;}

/* ---------------------------------------------------------
   Hero banner
--------------------------------------------------------- */
.tap-project-hero{
	position:relative;min-height:440px;display:flex;align-items:flex-end;
	overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy-dark));
}
.tap-project-hero-media{position:absolute;inset:0;}
.tap-project-hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
.tap-project-hero-overlay{
	position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(15,22,36,.1) 0%,rgba(15,22,36,.48) 55%,rgba(15,22,36,.94) 100%);
}
.tap-project-hero-inner{position:relative;z-index:2;width:100%;padding:210px 24px 74px;max-width:1180px;margin-inline:auto;}
.tap-project-hero .tap-breadcrumb{margin-bottom:20px;justify-content:flex-start;}
.tap-project-hero .tap-breadcrumb a,.tap-project-hero .tap-breadcrumb span{color:rgba(255,255,255,.75);}
.tap-project-hero .tap-breadcrumb a:hover{color:#fff;}
.tap-project-hero .tap-breadcrumb-sep svg{color:rgba(255,255,255,.4);}

.tap-project-hero-cat{
	display:inline-block;font-size:12px;font-weight:700;letter-spacing:.2px;
	padding:6px 16px;border-radius:100px;margin-bottom:16px;
	background:rgba(var(--gold-rgb),.85);color:#fff;
	transition:background .3s var(--ease);
}
.tap-project-hero-cat:hover{background:var(--gold);}

/* !important: body.tap-body h1 (a global heading-color rule in
   style.css) has higher specificity than a plain .tap-project-hero h1
   selector — same class of conflict the project already fights on
   buttons; here it's headings. */
.tap-project-hero h1{color:#fff !important;font-size:clamp(28px,3.4vw,40px);line-height:1.3;max-width:780px;}

/* ---------------------------------------------------------
   Snapshot strip — floats up over the hero's bottom edge so the
   key facts read as one continuous unit with the banner instead
   of a separate block further down the page.
--------------------------------------------------------- */
.tap-project-snapshot-strip{
	position:relative;z-index:3;margin-top:-46px;margin-bottom:8px;
	max-width:1180px;margin-inline:auto;padding-inline:24px;
}
.tap-project-snapshot-strip-inner{
	display:flex;flex-wrap:wrap;gap:0;
	background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lift);
	overflow:hidden;
}
.tap-project-snapshot-item{
	flex:1 1 160px;display:flex;align-items:center;gap:12px;padding:18px 22px;
	border-inline-end:1px solid var(--border);
}
.tap-project-snapshot-item:last-child{border-inline-end:none;}
.tap-project-snapshot-icon{
	flex-shrink:0;width:38px;height:38px;border-radius:10px;
	background:rgba(var(--gold-rgb),.14);color:var(--gold-deep);
	display:flex;align-items:center;justify-content:center;
}
.tap-project-snapshot-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tap-project-snapshot-label{display:block;font-size:11px;color:var(--text-muted);margin-bottom:2px;}
.tap-project-snapshot-value{font-size:13.5px;font-weight:700;color:var(--navy-dark);line-height:1.4;}
.tap-project-snapshot-services-list{display:flex;flex-wrap:wrap;gap:4px 8px;}

/* ---------------------------------------------------------
   Two-column layout: narrative + sticky sidebar
--------------------------------------------------------- */
.tap-project-layout{display:grid;grid-template-columns:66fr 34fr;gap:52px;align-items:start;margin-top:36px;}
.tap-project-main-col{min-width:0;}
.tap-project-sidebar{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px;}

.tap-project-lead{position:relative;}
.tap-project-lead-rule{display:block;width:44px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:18px;}
.tap-project-lead p{font-size:18px;line-height:1.85;color:var(--navy-dark);}

.tap-project-callout{
	display:flex;gap:14px;align-items:flex-start;
	background:rgba(var(--navy-rgb),.045);border-inline-start:3px solid var(--gold);
	border-radius:var(--radius-md);padding:22px 24px;margin-top:32px;
}
.tap-project-callout-icon{
	flex-shrink:0;width:36px;height:36px;border-radius:10px;margin-top:2px;
	background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;
}
.tap-project-callout-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tap-project-callout h2{font-size:14.5px;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;color:var(--navy-dark);}
.tap-project-callout p{font-size:14.5px;line-height:1.8;color:var(--text-muted);margin:0;}

.tap-project-main-col .tap-project-section{margin-top:40px;padding-top:36px;border-top:1px solid var(--border);}
.tap-project-main-col .tap-project-section h2{font-size:19px;margin-bottom:16px;}

/* Sidebar cards */
.tap-project-sidebar-card{
	background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
	padding:24px;box-shadow:var(--shadow-soft);
}
.tap-project-sidebar-card h3{
	font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:16px;
}
.tap-project-sidebar-row{display:flex;align-items:flex-start;gap:10px;padding-block:12px;border-top:1px solid var(--border);}
.tap-project-sidebar-row:first-of-type{border-top:none;padding-top:0;}
.tap-project-sidebar-icon{
	flex-shrink:0;width:30px;height:30px;border-radius:8px;margin-top:1px;
	background:rgba(var(--gold-rgb),.14);color:var(--gold-deep);
	display:flex;align-items:center;justify-content:center;
}
.tap-project-sidebar-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tap-project-sidebar-label{display:block;font-size:11px;color:var(--text-muted);margin-bottom:2px;}
.tap-project-sidebar-value{font-size:13.5px;font-weight:700;color:var(--navy-dark);line-height:1.5;}
.tap-project-sidebar-services{display:flex;flex-wrap:wrap;gap:6px;}
.tap-project-sidebar-services span{font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;background:var(--bg-alt);color:var(--navy);}

.tap-project-sidebar-cta{
	background:linear-gradient(135deg,var(--navy),var(--navy-dark));border-radius:var(--radius-lg);
	padding:26px 22px;text-align:center;position:relative;overflow:hidden;
}
.tap-project-sidebar-cta::before{
	content:"";position:absolute;inset:0;
	background:radial-gradient(circle at 85% 15%,rgba(var(--gold-rgb),.25),transparent 55%);
}
.tap-project-sidebar-cta > *{position:relative;z-index:1;}
.tap-project-sidebar-cta strong{display:block;color:#fff;font-size:15.5px;margin-bottom:8px;line-height:1.4;}
.tap-project-sidebar-cta p{color:rgba(255,255,255,.72);font-size:12.5px;margin-bottom:16px;line-height:1.6;}
.tap-project-sidebar-cta .tap-btn{width:100%;justify-content:center;}

/* ---------------------------------------------------------
   Scope of work — checklist grid (lives inside the 66% main col)
--------------------------------------------------------- */
.tap-project-check-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.tap-project-check-card{
	display:flex;align-items:flex-start;gap:11px;padding:14px 16px;
	background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
	transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.tap-project-check-card:hover{border-color:rgba(var(--gold-rgb),.4);box-shadow:var(--shadow-soft);transform:translateY(-2px);}
.tap-project-check-icon{
	flex-shrink:0;width:24px;height:24px;border-radius:50%;
	background:rgba(var(--gold-rgb),.14);color:var(--gold-deep);
	display:flex;align-items:center;justify-content:center;
}
.tap-project-check-icon svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.tap-project-check-card span{font-size:14px;font-weight:600;color:var(--navy-dark);line-height:1.5;}

/* Outcomes sit full-width below the two-column split, so it can
   afford a third column instead of the main col's two. */
.tap-project-outcomes-grid{grid-template-columns:repeat(3,1fr);}
.tap-project-outcomes-grid .tap-project-check-icon{background:rgba(var(--navy-rgb),.08);color:var(--navy);}

/* ---------------------------------------------------------
   Full-width sections below the two-column split
--------------------------------------------------------- */
.tap-project-full-section{margin-top:56px;padding-top:48px;border-top:1px solid var(--border);}
.tap-project-full-section h2{font-size:22px;margin-bottom:22px;}

/* Implementation phases — numbered timeline, reusing the About
   page's .tap-journey-track system so it inherits its already-
   tuned responsive behavior (row → wrap → column). */
.tap-project-full-section .tap-journey-track{margin-top:4px;}
.tap-project-full-section .tap-journey-stage{padding:22px 16px;}
.tap-project-full-section .tap-journey-num{margin-bottom:8px;}
.tap-project-full-section .tap-journey-stage h3{font-size:14.5px;line-height:1.5;margin-bottom:0;}

/* ---------------------------------------------------------
   Solution delivered (rich WYSIWYG content)
--------------------------------------------------------- */
.tap-project-content{font-size:16px;line-height:1.9;color:var(--text);}
.tap-project-content > *:first-child{margin-top:0;}
.tap-project-content p{margin-bottom:1.3em;}
.tap-project-content h3{
	font-size:17px;color:var(--navy-dark);margin-block:0 .6em;
	padding-inline-start:14px;border-inline-start:3px solid var(--gold);
}
.tap-project-content h3:first-child{margin-top:0;}
.tap-project-content ul,.tap-project-content ol{margin:0 0 1.3em;padding-inline-start:0;list-style:none;}
.tap-project-content li{
	position:relative;margin-bottom:.55em;padding-inline-start:26px;font-size:14.5px;line-height:1.7;
}
.tap-project-content li::before{
	content:"";position:absolute;inset-inline-start:0;top:.5em;width:7px;height:7px;
	border-radius:50%;background:var(--gold);
}
.tap-project-content img{max-width:100%;height:auto;border-radius:var(--radius-md);margin-block:1.3em;}
.tap-project-content a{color:var(--gold-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px;}

/* Two-column magazine flow: a heading is kept attached to what
   follows it (avoid-column) and a list never splits mid-item, so
   each "N. Section Title" + its list reads as one visual block even
   though the browser is free to break between blocks wherever the
   column height works out — no wrapper markup needed since this is
   free-form WYSIWYG content, not PHP-looped items. */
.tap-project-content-cols{columns:2;column-gap:56px;}
.tap-project-content-cols h3{break-after:avoid-column;}
.tap-project-content-cols ul,.tap-project-content-cols ol,.tap-project-content-cols p{break-inside:avoid;}

/* ---------------------------------------------------------
   Gallery
--------------------------------------------------------- */
.tap-project-gallery{columns:4 220px;column-gap:14px;}
.tap-project-gallery-item{
	display:block !important;width:100% !important;margin-bottom:14px;padding:0 !important;
	border:none !important;background:none !important;border-radius:var(--radius-md) !important;overflow:hidden;
	break-inside:avoid;box-shadow:var(--shadow-soft);position:relative;
	transition:box-shadow .3s var(--ease) !important;
}
.tap-project-gallery-item:hover{box-shadow:var(--shadow-lift);}
.tap-project-gallery-item img{width:100%;height:auto;display:block;transition:transform .5s var(--ease);}
.tap-project-gallery-item:hover img{transform:scale(1.06);}
.tap-project-gallery-item::after{
	content:"";position:absolute;inset:0;opacity:0;
	background:linear-gradient(180deg,transparent 60%,rgba(15,22,36,.55));
	transition:opacity .3s var(--ease);
}
.tap-project-gallery-item:hover::after{opacity:1;}

/* ---------------------------------------------------------
   Related services / bottom CTA / related projects
--------------------------------------------------------- */
.tap-project-related-services{display:flex;flex-wrap:wrap;gap:10px;}
.tap-project-related-tag{
	display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:9px 18px;border-radius:100px;
	background:var(--bg-alt);color:var(--navy);transition:background .3s var(--ease),color .3s var(--ease);
}
.tap-project-related-tag svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tap-project-related-tag:hover{background:var(--gold);color:#fff;}

/* Final CTA — bigger, page-ending version of the sidebar's sticky
   CTA, for the reader who has scrolled all the way through. */
.tap-project-final-cta{
	margin-top:56px;padding:60px 40px;border-radius:var(--radius-lg);text-align:center;
	background:linear-gradient(135deg,var(--navy),var(--navy-dark));
	position:relative;overflow:hidden;
}
.tap-project-final-cta::before{
	content:"";position:absolute;inset:0;
	background:radial-gradient(circle at 85% 12%,rgba(var(--gold-rgb),.28),transparent 55%);
}
.tap-project-final-cta > *{position:relative;z-index:1;}
.tap-project-final-cta strong{display:block;font-size:clamp(22px,2.6vw,28px);color:#fff;margin-bottom:14px;}
.tap-project-final-cta p{font-size:15.5px;color:rgba(255,255,255,.75);margin-bottom:30px;max-width:520px;margin-inline:auto;}
.tap-project-final-cta .tap-btn{font-size:16px;padding-block:17px;padding-inline:38px;}

.tap-project-related h2{font-size:20px;margin-bottom:20px;}
.tap-project-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.tap-project-related-card{
	display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
	overflow:hidden;box-shadow:var(--shadow-soft);
	transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.tap-project-related-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-4px);}
.tap-project-related-card-media{display:block;aspect-ratio:4/3;background:var(--bg-alt);}
.tap-project-related-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.tap-project-related-card strong{display:block;padding:14px 16px;font-size:14px;color:var(--navy-dark);}

@media (max-width:1020px){
	.tap-project-hero{min-height:400px;}
	.tap-project-hero-inner{padding-top:190px;padding-bottom:60px;}
	.tap-project-snapshot-strip{margin-top:-30px;}
	.tap-project-snapshot-item{flex:1 1 45%;border-inline-end:none;border-bottom:1px solid var(--border);}
	.tap-project-layout{grid-template-columns:1fr;gap:0;}
	.tap-project-sidebar{position:static;margin-top:40px;}
	.tap-project-check-grid{grid-template-columns:1fr;}
	.tap-project-outcomes-grid{grid-template-columns:repeat(2,1fr);}
	.tap-project-content-cols{columns:1;}
}

@media (max-width:640px){
	.tap-project-main-wrap{padding-bottom:60px;}
	.tap-project-hero{min-height:340px;}
	.tap-project-hero-inner{padding:180px 20px 44px;}
	.tap-project-snapshot-strip{margin-top:-22px;padding-inline:16px;}
	.tap-project-snapshot-item{flex:1 1 100%;border-bottom:1px solid var(--border);}
	.tap-project-snapshot-item:last-child{border-bottom:none;}
	.tap-project-outcomes-grid{grid-template-columns:1fr;}
	.tap-project-gallery{columns:2 160px;}
	.tap-project-related-grid{grid-template-columns:1fr;}
	.tap-project-final-cta{padding:40px 24px;}
	.tap-project-final-cta .tap-btn{width:100%;justify-content:center;}
}