/*
=========================================================
COMMERCIAL PAGE STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the page-specific styles for the /commercial/ page on joshuadaltonmedia.com. It layers on top of the shared systems used by that page and should stay focused on commercial-only layout, visual skin, and section treatments that are not reused elsewhere.

What belongs in this file
-------------------------
- Commercial-page media-grid variables and card presentation
- Commercial-only logo wall styling
- Commercial testimonial marquee styling
- Commercial page-only section and panel skins
- Commercial page breakpoint rules

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/commercial-page.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet after global.css and any shared feature files it depends on
2. use it only on the /commercial/ page
3. keep shared media-grid, hero, process, FAQ, and blog preview styling in their shared stylesheets

Maintenance rule
----------------
If a style would also be useful on homepage, portfolio, or other landing pages, it should move to a shared stylesheet instead. Keep this file focused on the commercial page skin and commercial-only sections.
*/

/* ================= PAGE TOKENS ================= */
body[data-page="commercial"]{
	--portfolio-grid-gap-base:7px;
	--portfolio-grid-gap-360:7px;
	--portfolio-grid-columns-base:repeat(2,1fr);
	--portfolio-grid-margin-inline-base:0;
	--portfolio-grid-margin-inline-360:0;
	--portfolio-grid-margin-inline-700:0;
	--portfolio-grid-wrap-max-width-base:92%;
	--portfolio-grid-wrap-max-width-1024:92%;
	--portfolio-card-title-display:none;
	--portfolio-play-badge-top:4px;
	--portfolio-play-badge-left:4px;
}

/* ================= EYEBROW ================= */
body[data-page="commercial"] .section-header .eyebrow{color:var(--accent)}

/* ================= HERO CTA BOX ================= */
body[data-page="commercial"] .cta-box{
	border-color:rgba(255,77,77,.18);
	border-left-width:3px;
	border-left-color:var(--accent);
	background:linear-gradient(135deg,rgba(13,13,13,.78),rgba(21,21,21,.68));
}

/* ================= VIDEO CARDS ================= */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
.card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow);transition:transform .35s ease,box-shadow .35s ease}

/* Red accent bar slides in from left on hover */
.card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.4,0,.2,1);z-index:3;pointer-events:none}

.card-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.65));transition:opacity .35s ease}
.card h3{position:absolute;left:0;right:0;bottom:0;margin:0;font-size:.75rem;padding:4px;color:#fff;z-index:2;transition:transform .35s ease}

/* ================= OUTCOME CARD BODY ================= */
.card-body{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px;z-index:2;display:grid;gap:6px;background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,transparent 100%)}
.card-body h3{position:static;padding:0;margin:0;font-size:.875rem;color:#fff;line-height:1.2;transition:transform .35s ease}
.card-body h3 strong{color:var(--accent)}
.card-desc{margin:0;font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.72);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ================= PHILOSOPHY SECTION ================= */
.philosophy-wrap{display:grid;gap:clamp(28px,5vw,44px)}
.philosophy-intro{display:grid;gap:10px}
.philosophy-intro .lead{max-width:68ch}

/* ================= PROCESS ICON ================= */
body[data-page="commercial"] .process-icon{
	width:auto;
	height:auto;
	border-radius:4px;
	background:transparent;
	color:var(--accent);
	border:1.5px solid rgba(255,77,77,.35);
	padding:5px 12px;
	line-height:1;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:52px;
}

/* ================= LOGO WALL ================= */
#logos{position:relative;background:linear-gradient(180deg,rgba(255,77,77,.04) 0%,rgba(255,255,255,.02) 50%,rgba(255,77,77,.03) 100%);border-color:rgba(255,77,77,.1)}
#logos::before{content:"";position:absolute;top:50%;left:50%;width:min(700px,90vw);height:200px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(255,77,77,.05) 0%,transparent 70%);pointer-events:none}
.logo-wall{position:relative;z-index:1;display:grid;justify-items:center;align-items:center;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.logo-wall img{max-height:32px;opacity:.9}


/* ================= LEAD FORM (LIGHT ENQUIRY) ================= */
body[data-page="commercial"] .form-cols{display:grid;gap:10px}
body[data-page="commercial"] .form-col-left{display:grid;gap:12px;align-content:start}
body[data-page="commercial"] .form-col-right{display:grid;gap:10px;align-content:start}

/* ================= RESPONSIVE BREAKPOINTS ================= */

@media(min-width:360px){
	/* ================= PAGE TOKENS ================= */
	body[data-page="commercial"]{
		--portfolio-card-title-display:block;
		--portfolio-card-title-size:min(3.2vw,1rem);
	}
	/* ================= VIDEO CARDS ================= */
	.cards{gap:12px}
	.card h3{font-size:1rem}
	/* ================= OUTCOME CARD BODY ================= */
	.card-body h3{font-size:1rem}
	.card-desc{font-size:13px}
}

@media(min-width:700px){
	/* ================= HERO CTA BOX ================= */
	body[data-page="commercial"] .cta-box{max-width:420px}
	/* ================= PAGE TOKENS ================= */
	body[data-page="commercial"]{
		--portfolio-grid-columns-700:repeat(2,1fr);
		--portfolio-grid-gap-700:12px;
	}
	/* ================= VIDEO CARDS ================= */
	.cards{grid-template-columns:repeat(2,1fr);gap:clamp(14px,2.4vw,20px)}
	.card h3{font-size:1.4rem;padding:clamp(6px,1.2vw,8px) clamp(10px,1.8vw,12px)}
	/* ================= OUTCOME CARD BODY ================= */
	.card-body{padding:12px 16px 16px}
	.card-body h3{font-size:1.15rem}
	.card-desc{font-size:.82rem;-webkit-line-clamp:2}
	/* ================= LOGO WALL ================= */
	.logo-wall{grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,16px)}
	.logo-wall img{max-height:clamp(34px,5vw,46px)}
/* ================= LEAD FORM ================= */
	body[data-page="commercial"] #lead .form-main{grid-template-columns:1fr}
	body[data-page="commercial"] .form-cols{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);align-items:start;gap:18px}
	body[data-page="commercial"] .form-col-left{order:-1}
}

@media(min-width:1024px){
	/* ================= HERO CTA BOX ================= */
	body[data-page="commercial"] .cta-box{max-width:460px}
	/* ================= PAGE TOKENS ================= */
	body[data-page="commercial"]{
		--portfolio-grid-columns-1024:repeat(4,1fr);
		--portfolio-grid-gap-1024:12px;
		--portfolio-card-title-size:clamp(.75rem,.9vw,1rem);
	}
	/* ================= VIDEO CARDS ================= */
	.card video{display:block}
	/* ================= LOGO WALL ================= */
	.logo-wall{grid-template-columns:repeat(6,1fr);gap:20px;max-width:1440px;margin-inline:auto}
	.logo-wall img{max-height:81px}
/* ================= PROCESS GRID BREAKOUT ================= */
	body[data-page="commercial"] .philosophy-wrap .process-grid.three{width:min(calc(100vw - (var(--gutter) * 2)),var(--container-wide));margin-inline:calc((100% - min(calc(100vw - (var(--gutter) * 2)),var(--container-wide))) / 2)}
	/* ================= LEAD FORM ================= */
	body[data-page="commercial"] .form-cols{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:22px}
}

@media(hover:hover){
	/* ================= VIDEO CARDS ================= */
	.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
	.card:hover::after{transform:scaleX(1)}
	.card:hover .card-overlay{opacity:.22}
	.card:hover h3{transform:translateY(-4px)}
	.card:hover .card-body{transform:translateY(-4px)}
	.card:hover .card-body h3{transform:none}
}

/* ================= TESTIMONIALS BG (PREVIEW) ================= */
body[data-page="commercial"] .testimonials{
	background-image:url("/images/posters/auckland-commercial-videographer-smartways-logistics-video.webp");
	background-size:cover;
	background-position:center;
	border-top:none;
}
body[data-page="commercial"] .testimonials-glow{
	inset:0;
	width:auto;
	height:auto;
	transform:none;
	background:rgba(0,0,0,.8);
}