/*
=========================================================
HOME STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the page-specific styles for the homepage on joshuadaltonmedia.com. It layers on top of shared systems such as media-grid, rails, blog-embed, pricing, process, and FAQ, and should stay focused on homepage-only layout, skins, and section presentation.

What belongs in this file
-------------------------
- Homepage media-grid variables and card presentation
- Homepage venue rail card styling
- Homepage testimonial card styling
- Homepage-only section spacing and visual treatments
- Homepage breakpoint rules

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

<link rel="stylesheet" href="/assets/css/home.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet after global.css and the shared feature styles it depends on
2. use it only on the site root homepage
3. keep shared rails, blog preview cards, media-grid, pricing, process, and FAQ styling in their shared stylesheets

Maintenance rule
----------------
If a selector is reusable beyond the homepage, it should move to a shared stylesheet instead. Keep this file focused on homepage-only skins, section presentation, and layout decisions.
*/

/* ================= PORTFOLIO CARDS ================= */
body[data-page="weddings"]{
	--portfolio-card-aspect-ratio:4/5;
	--portfolio-card-radius:clamp(12px,3vw,18px);
	--portfolio-card-border:1px solid rgba(255,255,255,.1);
	--portfolio-card-min-height:min(52vh,460px);
	--portfolio-card-shadow:0 18px 60px rgba(0,0,0,.45);
	--portfolio-card-scroll-snap-align:start;
	--portfolio-card-overlay:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.14) 38%,rgba(0,0,0,.82) 100%);
	--portfolio-card-overlay-hover-opacity:.92;
	--portfolio-card-title-position:static;
	--portfolio-card-title-left:auto;
	--portfolio-card-title-right:auto;
	--portfolio-card-title-bottom:auto;
	--portfolio-card-title-color:#fff;
	--portfolio-card-title-line-height:1.15;
	--portfolio-card-title-size:clamp(1rem,4.2vw,1.2rem);
	--portfolio-card-title-hover-transform:none;
	--portfolio-play-badge-top:10px;
	--portfolio-play-badge-right:auto;
	--portfolio-play-badge-left:10px;
	--portfolio-play-badge-bg:rgba(255,77,77,.94);
	--portfolio-play-badge-shadow:0 6px 20px rgba(255,77,77,.35);
}
.portfolio-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:6px;padding:16px}
.portfolio-kicker{font-size:.68rem;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--accent)}

/* ================= VENUE CARDS ================= */
.venue-card{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;scroll-snap-align:start;scroll-snap-stop:normal;padding:12px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(20,20,20,.9),rgba(20,20,20,.74));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 60px rgba(0,0,0,.45);overflow:hidden}
.venue-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--radius) - 4px)}
.venue-meta{display:grid;gap:4px}
.venue-name{font-size:clamp(1rem,4vw,1.12rem);line-height:1.15;font-weight:800;color:var(--ink);margin:0}
.venue-name a{color:#fff;text-decoration:none}
.venue-name a:hover{color:#fff;text-decoration:none}
.venue-area{font-size:clamp(.72rem,2.5vw,.82rem);line-height:1.35;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;font-weight:800}

.venue-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(12px,3vw,20px);padding:14px 18px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,77,77,.08),rgba(255,255,255,.02));border:1px solid rgba(255,77,77,.18);text-decoration:none;transition:border-color .2s,background .2s}
.venue-cta:hover{border-color:rgba(255,77,77,.35);background:linear-gradient(180deg,rgba(255,77,77,.12),rgba(255,255,255,.03));text-decoration:none}
.venue-cta__text{font-size:clamp(.78rem,2.6vw,.88rem);line-height:1.4;font-weight:700;color:var(--ink)}
.venue-cta__arrow{font-size:1.1rem;color:var(--accent);flex-shrink:0;transition:transform .2s}
.venue-cta:hover .venue-cta__arrow{transform:translateX(3px)}

/* ================= HOMEPAGE TESTIMONIALS ================= */
#home-testimonials .review-slide{flex:0 0 100%}

/* ================= ENQUIRY FORM COLUMNS ================= */
.form-cols{display:grid;gap:10px}
.form-col-left{display:grid;gap:12px;align-content:start}
.form-col-right{display:grid;gap:10px;align-content:start}

/* ================= HOMEPAGE SECTION HEADERS ================= */
body[data-page="weddings"] .section-header{gap:10px;padding:14px 0 18px}
body[data-page="weddings"] .section-header h2{margin-top:2px}
body[data-page="weddings"] .section-header .lead{margin-top:4px}

/* ================= TESTIMONIAL PULL-QUOTE ================= */
.testimonial-pull{position:relative;margin:0 0 clamp(20px,4vw,32px);padding:clamp(24px,5vw,40px) clamp(24px,5vw,40px) clamp(24px,5vw,36px);border-left:none;background:linear-gradient(135deg,rgba(255,77,77,.07),rgba(255,255,255,.02) 60%,rgba(255,77,77,.03));border:1px solid rgba(255,77,77,.14);border-radius:var(--radius);overflow:hidden}
.testimonial-pull::before{content:"\201C";position:absolute;top:-8px;left:clamp(14px,4vw,28px);font-size:clamp(5rem,18vw,8rem);line-height:1;font-weight:800;color:rgba(255,77,77,.1);pointer-events:none;font-family:Georgia,serif}
.testimonial-pull::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),rgba(255,77,77,.2) 60%,transparent)}
.testimonial-pull p{position:relative;margin:0 0 14px;font-size:clamp(1.05rem,3.5vw,1.28rem);line-height:1.6;color:var(--ink);font-style:italic;font-weight:300}
.testimonial-pull cite{position:relative;display:block;font-size:clamp(.72rem,2.2vw,.82rem);letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--accent);font-style:normal}

/* ================= VENUE CARD DESCRIPTOR ================= */
.venue-desc{margin:0;font-size:clamp(.7rem,2.2vw,.78rem);line-height:1.4;color:var(--muted)}

/* ================= HOMEPAGE PROCESS CARDS ================= */
body[data-page="weddings"] .process-step{border-top:2px solid rgba(255,77,77,.3);background:linear-gradient(180deg,rgba(255,77,77,.04) 0%,rgba(20,20,20,.92) 8%,rgba(20,20,20,.74) 100%)}
body[data-page="weddings"] .process-step::before{background:linear-gradient(160deg,rgba(255,77,77,.18),transparent 36%);opacity:.35}
body[data-page="weddings"] .process-num{color:rgba(255,77,77,.18);font-size:clamp(32px,9vw,52px)}
body[data-page="weddings"] .process-icon{background:rgba(255,77,77,.18);border-color:rgba(255,77,77,.4);color:#fff}
body[data-page="weddings"] .process-kicker{color:var(--accent);font-size:.72rem}

/* ================= SECTION MORE LINK ================= */
.section-more{width:min(calc(100% - (var(--gutter) * 2)),var(--container));margin-inline:auto;margin-top:24px;text-align:center}

/* ================= FEATURED FILM SCROLL DOTS ================= */
.rail-dots{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;height:16px}
.rail-dots span{display:block;width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.22);transition:background .25s ease,width .25s ease,transform .25s ease;flex-shrink:0}
.rail-dots span.is-active{background:var(--accent);width:18px}

/* ================= STICKY MOBILE CTA ================= */
.sticky-cta{display:block;position:fixed;bottom:18px;right:14px;z-index:900;background:var(--accent);color:#fff;font-weight:800;font-size:.78rem;line-height:1;border-radius:999px;padding:.65em 1.3em;border:2px solid rgba(255,255,255,.18);box-shadow:0 6px 20px rgba(255,77,77,.45);white-space:nowrap;text-decoration:none;transition:opacity .25s ease,transform .25s ease}
.sticky-cta.is-hidden{opacity:0;transform:translateY(16px);pointer-events:none}

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

@media(min-width:360px){
	/* ================= PORTFOLIO CARDS ================= */
	body[data-page="weddings"]{--portfolio-card-title-size:clamp(1.05rem,4vw,1.22rem)}
	.portfolio-copy{padding:18px}
}

@media(min-width:700px){
	/* ================= SECTION SPACING ================= */
	body[data-page="weddings"]{--section-top:48px;--section-bottom:64px}
	/* ================= SECTION HEADERS ================= */
	body[data-page="weddings"] .section-header{gap:12px;padding:18px 0 22px}
	/* ================= ENQUIRY FORM COLUMNS ================= */
	#lead .form-main{grid-template-columns:1fr}
	.form-cols{grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);align-items:start;gap:18px}
	.form-col-left{order:-1}
	/* ================= PORTFOLIO CARDS ================= */
	body[data-page="weddings"]{
		--portfolio-card-aspect-ratio:16/10;
		--portfolio-card-min-height:0;
		--portfolio-card-title-size:clamp(1rem,1.9vw,1.22rem);
	}
	.portfolio-copy{padding:18px}
	/* ================= VENUE CARDS ================= */
	.venue-card{padding:16px}
	.venue-name{font-size:clamp(1rem,1.8vw,1.16rem)}
	/* ================= HOMEPAGE TESTIMONIALS ================= */
	#home-testimonials .review-slide{flex:0 0 100%}
	/* ================= TESTIMONIAL PULL-QUOTE ================= */
	.testimonial-pull{padding:clamp(28px,3vw,44px) clamp(28px,3vw,44px) clamp(28px,3vw,40px)}
	.testimonial-pull::before{font-size:clamp(6rem,12vw,9rem);top:-10px}
	.testimonial-pull p{font-size:clamp(1.14rem,2.2vw,1.36rem)}
	/* ================= PROCESS CARDS ================= */
	body[data-page="weddings"] .process-num{font-size:clamp(36px,5vw,52px)}
	/* ================= STICKY CTA ================= */
	.sticky-cta{display:none}
}

@media(min-width:1024px){
	/* ================= SECTION SPACING ================= */
	body[data-page="weddings"]{--section-top:64px;--section-bottom:80px}
	/* ================= SECTION HEADERS ================= */
	body[data-page="weddings"] .section-header{gap:14px;padding:20px 0 26px}
	/* ================= ENQUIRY FORM COLUMNS ================= */
	.form-cols{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:22px}
	/* ================= PORTFOLIO CARDS ================= */
	body[data-page="weddings"]{--portfolio-card-title-size:clamp(1.05rem,1.2vw,1.26rem)}
	.portfolio-copy{padding:20px}
	/* ================= HOMEPAGE TESTIMONIALS ================= */
	#home-testimonials .review-slide{flex:0 0 calc(50% - 6px)}
	/* ================= RAIL DOTS ================= */
	.rail-dots{display:none}
}

@media(hover:hover){
	/* ================= PROCESS CARDS ================= */
	body[data-page="weddings"] .process-step:hover{border-top-color:rgba(255,77,77,.5)}
}

/* ================= TESTIMONIALS ================= */
#home-testimonials .review-quote{-webkit-line-clamp:8;line-clamp:8}