/*
 * ============================================================
 * FEARANN ALBA — film-photography.css
 * ============================================================
 * Styles specific to the Film & Photography page
 * (templates/page-film-photography.php, slug: film-photography).
 *
 * This file ONLY carries what is unique to this page:
 *
 *   1. HERO — a contained, full-screen looping background video
 *      (a different file for mobile and desktop) with a darkening
 *      overlay, and the title / subtitle / intro / button laid out
 *      exactly like the Time Travel page hero. Unlike the Time
 *      Travel hero, the video here is NOT scroll-scrubbed and NOT
 *      fixed — it simply autoplays and loops inside the hero box,
 *      so the sections below scroll normally over an opaque page.
 *
 *   2. VIDEO EMBED — the responsive 16:9 YouTube frame that drops
 *      into the .tt-compare__media column in place of the
 *      before/after image slider.
 *
 * The other two big blocks on this page reuse existing, proven
 * stylesheets, loaded alongside this one in inc/enqueue.php:
 *   - Benefits section  → drone.css      (.drone-benefits / cards)
 *   - Video sections     → historic-site.css (.tt-compare layout)
 *
 * Brand tokens (--color-*), .btn, .container, .label, .section
 * all come from main.css / hero.css, loaded site-wide.
 * ============================================================
 */


/*
 * ============================================================
 * 1. HERO
 * ============================================================
 * A self-contained full-screen band. The <video> is absolutely
 * positioned to fill it (object-fit: cover crops to fit), with a
 * gradient overlay above it for legibility, and all the copy
 * floated above both. Height matches the Time Travel hero:
 * one screen, minus the 70px fixed header.
 * ============================================================
 */
.ffp-hero {
    position: relative;
    min-height: calc(100vh - 70px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #000;          /* black until the video paints */
}

@supports (height: 100dvh) {
    .ffp-hero {
        min-height: calc(100dvh - 70px);
    }
}

/* The looping background video — fills and crops to the box */
.ffp-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;            /* never intercept clicks/scroll */
}

/*
 * Darkening overlay — a touch heavier top and bottom so the title,
 * the nav and the scroll cue all stay readable over bright frames.
 * (Same treatment as the Time Travel hero.)
 */
.ffp-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.4) 35%,
        rgba(0, 0, 0, 0.4) 65%,
        rgba(0, 0, 0, 0.62) 100%
    );
}

/* Everything below floats above the video + overlay */
.ffp-hero__top,
.ffp-hero__lower,
.ffp-hero__scroll {
    position: relative;
    z-index: 2;
}

/* --- Title + subtitle, centred up top --- */
.ffp-hero__top {
    padding-top: clamp(2rem, 8vh, 6rem);
    text-align: center;
}

.ffp-hero__title {
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: var(--weight-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.05;
    margin: 0;
}

.ffp-hero__subtitle {
    margin: 1rem auto 0;
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    font-weight: var(--weight-regular);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    max-width: none;
}

.ffp-hero__subtitle-em {
    color: var(--color-gold);
    font-weight: var(--weight-bold);
}

/* --- Middle band: intro lower-left, graphic lower-right --- */
.ffp-hero__lower {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
}

.ffp-hero__intro {
    max-width: 32rem;
}

.ffp-hero__intro p {
    margin: 0 0 1.75rem;
    max-width: 36ch;
    font-size: 1.05rem;
    color: var(--color-text);
}

.ffp-hero__intro strong {
    font-weight: var(--weight-bold);
    color: #fff;
}

.ffp-hero__graphic {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.ffp-hand {
    width: clamp(120px, 16vw, 200px);
    height: auto;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
}

/* --- Scroll cue at the foot --- */
.ffp-hero__scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding-bottom: 1.75rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
}

.ffp-hero__scroll svg {
    width: 16px;
    height: 16px;
    animation: ffp-bob 1.8s ease-in-out infinite;
}

.ffp-hero__scroll:hover {
    color: var(--color-gold);
}

@keyframes ffp-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(4px); }
}


/*
 * ============================================================
 * 2. VIDEO EMBED  (inside .tt-compare__media)
 * ============================================================
 * The three "Video Example" sections reuse the historic-site
 * .tt-compare layout, but the media column holds a YouTube frame
 * instead of the before/after slider. This wrapper keeps the
 * iframe at a tidy 16:9, fills the column width, and matches the
 * rounded corners / soft border feel of the rest of the site.
 * ============================================================
 */
.ffp-video-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background-color: #000;
    border: 1px solid var(--color-border);
}

.ffp-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/*
 * ============================================================
 * 3. RESPONSIVE — max-width 768px
 * ============================================================
 * Hero stacks and centres, mirroring the Time Travel hero: the
 * graphic moves above the intro and the copy centres.
 * (The benefits and .tt-compare video sections bring their own
 * mobile rules from drone.css / historic-site.css.)
 * ============================================================
 */
@media (max-width: 768px) {

    .ffp-hero__lower {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }

    .ffp-hero__graphic {
        order: -1;
        justify-content: center;
    }

    .ffp-hero__intro {
        margin: 0 auto;
    }

    .ffp-hero__intro p {
        margin-left: auto;
        margin-right: auto;
    }
}


/*
 * ============================================================
 * 4. REDUCED MOTION
 * ============================================================
 */
@media (prefers-reduced-motion: reduce) {
    .ffp-hero__scroll svg {
        animation: none;
    }
}