/* =========================================================================
   HOMEPAGE (index.html) — page-scoped styles, loaded only on the front page.
   Section background/text color is now driven by the bg-light/bg-dark
   theme_mode classes (defined in style.css) instead of #id selectors, so
   every block's Theme Mode control actually has visual effect. Defaults
   below match each block's registered default theme_mode, so the page
   renders pixel-identical to the original static index.html out of the box.
   ========================================================================= */

body.home section { padding: 120px 0; }

h2 { font-size: clamp(32px, 5vw, 64px); font-weight: 900; letter-spacing: -0.04em; margin-bottom: 30px; line-height: 1.1; }
.section-lead { font-size: 20px; color: var(--text-muted); max-width: 800px; margin-bottom: 60px; line-height: 1.6; }

.split-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }

/* HERO */
.hero { height: 85vh; display: flex; align-items: center; position: relative; overflow: hidden; }
/* z-index was -1 here — confirmed by direct testing that a negative
   z-index on this layer breaks painting of the hardware-decoded video
   inside it (the video keeps decoding real frames — proven via canvas
   pixel sampling and a live currentTime check — it just never gets
   composited onto the screen). Using 0 here and explicitly lifting
   .hero .container above it fixes this without changing anything visually
   for the plain background-image case. */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero .container { position: relative; z-index: 1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; filter: grayscale(0.2); }
/* Identical treatment to the header nav-pill's .header-bg-video, the one
   implementation confirmed to visibly autoplay — full brightness/color,
   darkened by a separate overlay at a strictly higher z-index (not the
   same level as the video), both non-interactive. */
.hero-bg-video-file { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.hero-bg-video-overlay { position: absolute; inset: 0; background: rgba(15, 15, 15, 0.72); z-index: 1; pointer-events: none; }
/* Poster fallback, hidden on desktop where the video plays; shown instead
   of the video on mobile (see media query below) — mobile OS power/data
   saving modes block video autoplay unpredictably across devices with no
   reliable code-side workaround, so don't gamble the hero on it there;
   show the same dimmed/grayscaled treatment as the no-video <img> path. */
.hero-bg-video-poster { display: none; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; filter: grayscale(0.2); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0%, var(--bg-dark) 100%); }

/* Optional YouTube background video (hero.php / service-hero.php bg_video_id) */
.hero-video-embed { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.hero-video-embed.is-loaded { opacity: 1; }
.hero-video-embed iframe {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100vw; height: 56.25vw;
    min-height: 100%; min-width: 177.78%;
}

.hero-top-text { font-size: clamp(16px, 2vw, 22px); font-style: italic; font-weight: 400; color: rgba(255, 255, 255, 0.9); margin-bottom: 15px; }

.hero h1 { font-size: clamp(28px, 4vw, 56px); text-transform: none; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 20px 0; line-height: 1.1; max-width: 900px; }

.hero-subtext { font-size: clamp(14px, 1.5vw, 16px); font-weight: 400; color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 0 40px 0; line-height: 1.6; }

.hero-btns-wrapper { display: flex; gap: 15px; align-items: center; }

.hero-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 32px; border-radius: 4px;
    background: var(--accent); color: #fff; text-decoration: none;
    font-size: 15px; font-weight: 600; transition: all 0.3s ease; border: 1px solid var(--accent);
}
.hero-btn-primary:hover { background: transparent; color: var(--accent); }

.hero-btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 32px; border-radius: 4px;
    border: 1px solid #ffffff; color: #ffffff; text-decoration: none;
    font-size: 15px; font-weight: 600; transition: all 0.3s ease; background: transparent;
}
.hero-btn-outline:hover { background: #ffffff; color: #000000; }

.btn-outline {
    display: inline-flex; align-items: center; gap: 10px; padding: 14px 36px; border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; text-decoration: none; font-size: 14px; font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(255, 255, 255, 0.02); backdrop-filter: var(--glass);
}
.btn-outline:hover {
    border-color: var(--accent); color: var(--accent); background: rgba(255, 255, 255, 0.05); transform: translateY(-3px);
}

.btn-outline-dark {
    display: inline-block; padding: 14px 36px; border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.2); color: #000; text-decoration: none; font-size: 14px; font-weight: 700;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: transparent; text-align: center;
}
.btn-outline-dark:hover {
    border-color: #000; color: #fff; background: #000; transform: translateY(-3px);
}

/* BENTO GRIDS (Services / Recent Work / Insights) */
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; gap: 24px; }
.insights-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 280px; gap: 20px; }

.bento-card {
    background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg);
    position: relative; overflow: hidden; padding: 40px; text-decoration: none; color: inherit; transition: 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    display: block;
}
.bento-card:hover { transform: translateY(-10px); border-color: var(--accent); background: rgba(255,255,255,0.06); }
.bento-card.wide { grid-column: span 2; }
.bento-card.tall { grid-row: span 2; }

.bento-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0.3; transition: 0.6s; }
.bento-card:hover .bento-img { opacity: 0.5; transform: scale(1.05); }
.bento-content { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }

.bento-title { font-size: 24px; font-weight: 800; margin: 0; line-height: 1.2; overflow-wrap: break-word; }

/* VIDEO PRODUCTION SERVICES — Blog-card-style caption (dark bar, white title, gray subtext, no pink), own classes so bento-card elsewhere is untouched */
.services-card {
    background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg);
    position: relative; overflow: hidden; text-decoration: none; color: inherit; transition: 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    display: block;
}
.services-card:hover { transform: translateY(-10px); border-color: var(--accent); }
.services-card.wide { grid-column: span 2; }
.services-card.tall { grid-row: span 2; }

.services-card-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.services-card:hover .services-card-media { transform: scale(1.05); }

.services-card-caption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 22px 20px;
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.85) 20%, rgba(10,10,10,0.97) 42%, rgba(10,10,10,0.97) 100%);
}
.services-card-title { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.2; }
.services-card-subtext { font-size: 13px; color: rgba(255,255,255,0.6); margin: 0; line-height: 1.5; }

/* RECENT WORK — own classes so hover can be inverted (bright by default, darkens on hover) without touching .bento-card used elsewhere */
.recent-work-card {
    background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg);
    position: relative; overflow: hidden; padding: 40px; text-decoration: none; color: inherit; transition: 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    display: block;
}
.recent-work-card:hover { transform: translateY(-10px); border-color: var(--accent); }
.recent-work-card.wide { grid-column: span 2; }
.recent-work-card.tall { grid-row: span 2; }

.recent-work-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0.9; transition: 0.6s; }
.recent-work-card:hover .recent-work-media { opacity: 0.35; transform: scale(1.05); }
.recent-work-content { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 1; }
.recent-work-content::before {
    content: ''; position: absolute; left: -40px; right: -40px; bottom: -40px; height: 160px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); z-index: -1;
}
.recent-work-title { font-size: 24px; font-weight: 800; margin: 0; line-height: 1.2; overflow-wrap: break-word; color: #fff; }

.video-box { aspect-ratio: 16/9; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,0.3); }
.video-box iframe { width: 100%; height: 100%; border: 0; }
.image-box { border-radius: var(--radius-lg); overflow: hidden; width: 100%; height: 100%; }
.image-box img { width: 100%; height: 100%; object-fit: cover; }

/* SHOWREEL (white bg by default via bg-light) */
#showreel { position: relative; z-index: 2; padding: 80px 0 80px; }

.showreel-header { text-align: center; margin-bottom: 60px; }
.showreel-header h2 { font-size: clamp(32px, 5vw, 64px); font-weight: 900; letter-spacing: -0.04em; margin-bottom: 60px; line-height: 1.1; }

.showreel-subtitle { font-size: clamp(12px, 1.5vw, 18px); font-weight: 500; letter-spacing: 0.05em; color: #4a4a4a; text-transform: uppercase; line-height: 1.5; margin-bottom: 15px; }

.showreel-grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: 60px; align-items: flex-start; }

.showreel-text p { font-size: 18px; line-height: 1.6; margin-bottom: 20px; color: #1a1a1a; }
.showreel-text p strong { font-weight: 700; }

.showreel-video-container .video-box { border-radius: 0; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }

.stats-divider { width: 100%; height: 1px; background: rgba(0,0,0,0.1); margin: 60px 0 40px; }
.stats-container { display: flex; justify-content: center; gap: 60px; text-align: center; flex-wrap: wrap; }
.stat-item { flex: 1; min-width: 200px; }
.stat-number { display: block; font-size: clamp(32px, 4vw, 48px); font-weight: 900; color: var(--accent); margin-bottom: 5px; }
.stat-label { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #666; font-weight: 600; }

/* WHY CHOOSE US / TEAM (white bg by default via bg-light) */
#why-choose-us { position: relative; z-index: 3; padding-bottom: 40px; }
#team { position: relative; z-index: 2; padding: 40px 0 120px; }

.slideshow-container {
    position: relative; overflow: hidden; border-radius: var(--radius-lg); width: 100%; height: 100%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}
.slideshow-container .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; z-index: 1; }
.slideshow-container .slide.active { opacity: 1; z-index: 2; }

/* FULL SERVICE PROCESS (dark by default via bg-dark) */
#process { position: relative; }

.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }

.process-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-lg); padding: 40px; transition: 0.4s ease; }
.process-card:hover { transform: translateY(-10px); border-color: var(--accent); background: rgba(255,255,255,0.06); }

.process-icon { width: 50px; height: 50px; background: rgba(233, 157, 177, 0.1); color: var(--accent); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.process-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.process-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 15px; color: #fff; }
.process-card p { color: var(--text-muted); font-size: 17px; line-height: 1.6; }

/* BUDGET CALCULATOR */
.calc-wrapper {
    background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.05);
    padding: 60px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px;
}
.result-box {
    background: var(--accent); color: #fff; padding: 48px; border-radius: var(--radius-lg);
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
}
.result-price { font-size: 48px; font-weight: 900; margin: 15px 0; letter-spacing: -2px; }

/* CONTACT (white bg by default via bg-light) — label/placeholder color overrides live globally in style.css now that Contact Form is used off-homepage too */

/* FAQ (native <details>/<summary>) */
.faq-item { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 30px 0; }
summary { list-style: none; font-size: 20px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; }
summary::after { content: "+"; color: var(--accent); transition: 0.3s; }
details[open] summary::after { transform: rotate(45deg); }

/* RESPONSIVE (index.html-specific breakpoints; header/footer handled globally) */
@media (max-width: 1100px) {
    .insights-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
}

@media (max-width: 900px) {
    /* Mobile: never attempt the video, show the static poster instead —
       see .hero-bg-video-poster in the base rules above for why. */
    .hero-bg-video-file, .hero-bg-video-overlay { display: none; }
    .hero-bg-video-poster { display: block; }
    .hero h1 { white-space: normal; }
    .showreel-grid { grid-template-columns: 1fr; gap: 40px; }
    .bento-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .insights-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-card { padding: 16px; border-radius: 20px; }
    .bento-title { font-size: clamp(14px, 4.5vw, 18px); line-height: 1.2; }
    .split-grid, .calc-wrapper { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
    .process-grid, .insights-grid { grid-template-columns: 1fr; gap: 40px; }
}