/* Front Page Hero Styles
 * Replaces Tailwind CDN utilities + inline <style> block
 * Loaded on: front page only
 *
 * Each rule comments which Tailwind class(es) it replaces.
 */

/* ========================================
   INLINE STYLE BLOCK (moved from template)
   ======================================== */

/* .text-gradient-gold */
.text-gradient-gold {
    background: linear-gradient(to bottom, #FFF8E1, var(--wp--preset--color--primary), var(--wp--preset--color--gold-deep));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* .play-btn-backdrop */
.play-btn-backdrop {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
}

/* .card-glow */
.card-glow {
    box-shadow: 0 0 50px rgba(180, 140, 50, 0.2);
}

/* .bg-main — background image + overlay */
.bg-main {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/themes/passionate-living-child/assets/images/darker_gold_bckgrnd.png) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* .particle-canvas — handled globally by particle-background.css */

/* ========================================
   HERO WRAPPER
   ======================================== */

/* replaces: relative w-full overflow-hidden */
.fp-hero {
    position: relative;
    width: 100%;
    overflow-x: clip;         /* clip horizontal only — contains particles, prevents scrollbar */
    overflow-y: visible;      /* allow vertical content to flow naturally on mobile stacked layout */
}

/* ========================================
   HERO CONTENT SECTION
   ======================================== */

/* replaces: relative z-10 w-full px-6 pb-12 flex flex-col items-center justify-center */
/* padding-top set via inline style using var(--header-height) */
.fp-hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    box-sizing: border-box;
    padding-left: 1.5rem;    /* px-6 = 24px */
    padding-right: 1.5rem;
    padding-bottom: 3rem;     /* pb-12 = 48px */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* replaces: md:px-12 */
@media (min-width: 768px) {
    .fp-hero__content {
        padding-left: 3rem;   /* md:px-12 = 48px */
        padding-right: 3rem;
    }
}

/* ========================================
   GRID LAYOUT
   ======================================== */

/* replaces: w-full max-w-[1600px] grid grid-cols-1 lg:grid-cols-12 gap-8 */
.fp-hero__grid {
    width: 100%;
    max-width: 1600px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;               /* gap-8 = 32px */
}

@media (min-width: 1024px) {
    .fp-hero__grid {
        grid-template-columns: minmax(0, 1fr) 280px; /* minmax(0,1fr) prevents video from pushing grid wider */
    }
}

/* ========================================
   VIDEO COLUMN (LEFT)
   ======================================== */

.fp-hero__video-col {
    width: 100%;
    min-width: 0;             /* prevent grid blowout from video intrinsic size */
    display: flex;
    justify-content: center;
    align-self: start;
}

@media (min-width: 1024px) {
    .fp-hero__video-col {
        justify-content: flex-start;
    }
}

/* ========================================
   VIDEO CARD
   ======================================== */

/* replaces: relative w-full rounded-2xl overflow-hidden group bg-[#1A1A1A] shadow-2xl border border-white/5 */
.fp-hero__video-card {
    position: relative;
    width: 100%;
    border-radius: 1rem;      /* rounded-2xl = 16px */
    overflow: hidden;
    background: var(--wp--preset--color--rich-black);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
    border: 1px solid rgba(255, 255, 255, 0.05); /* border-white/5 */
}

/* replaces: relative w-full aspect-video overflow-hidden bg-black */
.fp-hero__video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--wp--preset--color--black);
}

/* replaces: absolute inset-0 w-full h-full object-cover */
.fp-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* replaces: absolute inset-0 bg-black/10 pointer-events-none */
.fp-hero__video-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* ========================================
   VIDEO TEXT AREA
   ======================================== */

/* replaces: relative p-8 flex flex-col items-start gap-4 bg-[#1A1A1A] */
.fp-hero__video-text {
    position: relative;
    padding: 2rem;            /* p-8 = 32px */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;                /* gap-4 = 16px */
    background: var(--wp--preset--color--rich-black);
}

/* replaces: md:p-10 */
@media (min-width: 768px) {
    .fp-hero__video-text {
        padding: 2.5rem;      /* md:p-10 = 40px */
    }
}

/* replaces: text-white text-4xl font-bold font-sans tracking-tight leading-tight */
.fp-hero__title {
    color: var(--wp--preset--color--white);
    font-size: 2.25rem;       /* text-4xl = 36px */
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.025em; /* tracking-tight */
    line-height: 1.25;        /* leading-tight */
    margin: 0;
}

/* replaces: md:text-6xl */
@media (min-width: 768px) {
    .fp-hero__title {
        font-size: 3.75rem;   /* md:text-6xl = 60px */
    }
}

/* replaces: text-gold-400 (custom Tailwind config color) */
.fp-hero__title-accent {
    color: var(--wp--preset--color--gold-metallic);
}

/* replaces: text-white text-lg leading-relaxed max-w-2xl font-sans font-semibold */
.fp-hero__subtitle {
    color: var(--wp--preset--color--white);
    font-size: 1.125rem;      /* text-lg = 18px */
    line-height: 1.625;       /* leading-relaxed */
    max-width: 42rem;         /* max-w-2xl = 672px */
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin: 0;
}

/* replaces: md:text-xl */
@media (min-width: 768px) {
    .fp-hero__subtitle {
        font-size: 1.25rem;   /* md:text-xl = 20px */
    }
}

/* ========================================
   LEAD MAGNET COLUMN (RIGHT)
   ======================================== */

/* replaces: w-full flex justify-center lg:justify-end lg:col-span-2 xl:col-span-2 self-start */
.fp-hero__form-col {
    width: 100%;
    min-width: 0;             /* prevent grid blowout */
    display: flex;
    justify-content: center;
    align-self: start;
}

@media (min-width: 1024px) {
    .fp-hero__form-col {
        justify-content: flex-end;
    }
}

/* replaces: relative w-full max-w-[280px] bg-black/80 backdrop-blur-md border border-gold-400/40 rounded-lg overflow-hidden shadow-xl flex flex-col */
.fp-hero__lead-card {
    position: relative;
    width: 100%;
    max-width: 280px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);  /* backdrop-blur-md */
    border: 1px solid rgba(212, 175, 55, 0.4); /* border-gold-400/40 */
    border-radius: 0.5rem;   /* rounded-lg = 8px */
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
    display: flex;
    flex-direction: column;
}

/* replaces: p-3 */
.fp-hero__lead-body {
    padding: 0.75rem;         /* p-3 = 12px */
}

/* replaces: flex items-center gap-2 mb-2 */
.fp-hero__lead-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;              /* gap-2 = 8px */
    margin-bottom: 0.5rem;    /* mb-2 = 8px */
}

/* replaces: w-3 h-3 text-gold-400 flex-shrink-0 */
.fp-hero__lead-icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--wp--preset--color--gold-metallic);
    flex-shrink: 0;
}

/* replaces: font-sans text-sm text-white font-bold uppercase tracking-wide leading-tight */
.fp-hero__lead-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;     /* text-sm = 14px */
    color: var(--wp--preset--color--white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em; /* tracking-wide */
    line-height: 1.25;       /* leading-tight */
    margin: 0;
}

/* replaces: mb-2 rounded-md overflow-hidden border border-white/10 mx-auto */
.fp-hero__lead-thumb {
    margin-bottom: 0.5rem;
    border-radius: 0.375rem; /* rounded-md = 6px */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-left: auto;
    margin-right: auto;
    max-width: 65%;
}

/* replaces: w-full h-auto object-cover */
.fp-hero__lead-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* replaces: flex flex-col gap-1.5 */
.fp-hero__lead-form {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;            /* gap-1.5 = 6px */
}

/* replaces: w-full px-2 py-1.5 text-[10px] rounded bg-[#2D2D2D] border border-white/10 focus:border-gold-400 text-white placeholder-gray-600 focus:outline-none transition-colors box-border */
.fp-hero__lead-input {
    width: 100%;
    padding: 0.375rem 0.5rem; /* py-1.5 px-2 */
    font-size: 12px;
    border-radius: 0.25rem;   /* rounded = 4px */
    background: var(--wp--preset--color--dark-charcoal);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--wp--preset--color--white);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.fp-hero__lead-input::placeholder {
    color: #4B5563;           /* placeholder-gray-600 */
}

.fp-hero__lead-input:focus {
    border-color: var(--wp--preset--color--gold-metallic);    /* focus:border-gold-400 */
    outline: 2px solid var(--wp--preset--color--gold-bright);
    outline-offset: 2px;
}

/* replaces: w-full flex items-center justify-center gap-1 cursor-pointer transition-transform hover:scale-105 text-[10px] font-semibold uppercase tracking-wider py-1.5 rounded-full whitespace-nowrap */
/* note: gradient background stays as inline style in HTML for now */
.fp-hero__lead-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: transform 0.15s ease;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;   /* tracking-wider */
    padding: 0.375rem 0;      /* py-1.5 */
    border-radius: 9999px;    /* rounded-full */
    white-space: nowrap;
    background: linear-gradient(135deg, var(--wp--preset--color--gold-deep) 0%, var(--wp--preset--color--primary) 50%, var(--wp--preset--color--gold-shimmer) 100%);
    color: var(--wp--preset--color--rich-black);
    border: none;
}

.fp-hero__lead-submit:hover {
    transform: scale(1.05);   /* hover:scale-105 */
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .fp-hero *,
  .fp-hero *::before,
  .fp-hero *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}