/* ============================================================
   TRAINING PAGE V2 — Page-Specific Styles
   Supplements variables.css, base.css, components.css, responsive.css
   ============================================================ */

/* ---- Hero: Full bleed cinematic ---- */
.hero--training {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 0;
}
.hero--training::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 22, 40, 0.4) 0%, rgba(10, 22, 40, 0.7) 60%, var(--abyss) 100%);
    z-index: 1;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%;
    filter: brightness(0.8);
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 2rem 1.5rem;
}
.hero-content .eyebrow { margin-bottom: 1rem; font-size: 13px; }
.hero-content h1 { margin-bottom: 1.5rem; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.hero-content .subtitle {
    font-size: 1.15rem;
    color: var(--cream-60);
    margin-bottom: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.hero-content .date-badge {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--gold);
    margin: 1rem 0 2rem;
}
.hero--training .btn-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- Split section (image + text side by side) ---- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
.split-img {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.split-img img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

/* ---- Body text (adapts to section context) ---- */
.body-text { color: var(--cream-60); }
.section-alt .body-text { color: var(--deep-water); }

/* ---- Icon cards (Who This Is For) ---- */
.icon-card {
    background: var(--undertow-60);
    backdrop-filter: blur(12px);
    border: 1px solid var(--gold-20);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}
.icon-card:hover {
    border-color: var(--gold-40);
    transform: translateY(-4px);
}
.icon-card .icon { display: none; }
.icon-card h4 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.icon-card p { color: var(--cream-60); font-size: 0.9rem; line-height: 1.6; }

/* ---- Checklist style ---- */
.checklist { list-style: none; padding: 0; }
.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
}
.checklist li::before {
    content: '\2713';
    color: var(--gold);
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.checklist li strong { color: var(--cream); }
.checklist li span { color: var(--cream-60); }

/* ---- Pricing cards ---- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}
.pricing-card {
    background: var(--undertow-60);
    backdrop-filter: blur(12px);
    border: 1px solid var(--gold-20);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
}
.pricing-card--featured {
    border-color: var(--gold);
    position: relative;
    box-shadow: 0 0 40px rgba(201, 169, 110, 0.15);
}
.pricing-card--featured::before {
    content: 'Best Value';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold);
    color: var(--abyss);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.pricing-card h3 { margin-bottom: 0.5rem; }
.price-amount {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 0.5rem;
}
.price-timeline {
    color: var(--cream-60);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.price-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: left;
}
.price-features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gold-20);
    color: var(--cream-60);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.price-features li::before {
    content: '\2713';
    color: var(--gold);
    font-weight: 700;
}
.btn-block { display: block; width: 100%; text-align: center; margin-top: 1rem; }

/* ---- Instructor cards ---- */
.instructor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}
.instructor-card { text-align: center; }
.instructor-photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1.5rem;
    border: 3px solid var(--gold-40);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.instructor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}
.instructor-card h3 { margin-bottom: 0.5rem; }
.instructor-card .role {
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.instructor-card p { color: var(--cream-60); font-size: 0.95rem; line-height: 1.7; }

/* ---- Testimonial quote ---- */
.quote-section {
    background: var(--deep-water);
    border-top: 1px solid var(--gold-20);
    border-bottom: 1px solid var(--gold-20);
}
.quote-block {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
.quote-mark {
    font-family: 'Playfair Display', serif;
    font-size: 5rem;
    color: var(--gold);
    line-height: 1;
    margin-bottom: -1rem;
}
.quote-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 600;
    color: var(--cream);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-style: italic;
}
.quote-author { color: var(--gold); font-size: 1rem; font-weight: 600; }
.quote-role { color: var(--cream-60); font-size: 0.9rem; }

/* ---- Testimonial cards ---- */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}
.testimonial-card {
    background: var(--undertow-60);
    backdrop-filter: blur(12px);
    border: 1px solid var(--gold-20);
    border-radius: 12px;
    padding: 2rem;
}
.testimonial-card .stars {
    color: var(--gold);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}
.testimonial-card .tq { color: var(--cream-60); font-size: 0.95rem; line-height: 1.7; font-style: italic; margin-bottom: 1rem; }
.testimonial-card .tauthor { color: var(--cream); font-weight: 600; font-size: 0.95rem; }

/* ---- Photo grid ---- */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}
.photo-grid img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
}
.photo-grid img:hover { transform: scale(1.03); }

/* ---- YouTube embeds ---- */
.youtube-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--gold-20);
}
.youtube-embed iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: none;
}

/* ---- Payment callout ---- */
.payment-callout {
    background: var(--undertow-60);
    backdrop-filter: blur(12px);
    border: 1px solid var(--gold-20);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-top: 2rem;
}
.payment-callout h4 { margin-bottom: 0.75rem; }
.payment-callout p { color: var(--cream-60); font-size: 0.95rem; }

/* ---- Final CTA gradient ---- */
.final-cta {
    background: linear-gradient(135deg, var(--deep-water) 0%, var(--undertow) 50%, var(--deep-water) 100%);
    border-top: 1px solid var(--gold-20);
    text-align: center;
}
.final-cta h2 { color: var(--cream); margin-bottom: 1rem; }
.final-cta p {
    color: var(--cream-60);
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* ---- Sticky CTA bar ---- */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--abyss);
    border-top: 1px solid var(--gold-20);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    z-index: 999;
    backdrop-filter: blur(10px);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta .cta-text {
    font-size: 0.95rem;
    color: var(--warm-sand);
    font-weight: 500;
}
.sticky-cta .btn-primary { padding: 0.6rem 1.5rem; font-size: 0.9rem; }

/* ---- Full-width image divider ---- */
.image-divider {
    padding: 0;
    height: 550px;
    overflow: hidden;
    position: relative;
}
.image-divider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image-divider::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, var(--abyss) 0%, transparent 20%, transparent 80%, var(--abyss) 100%);
}

/* ---- section-alt overrides for training-specific elements ---- */
.section-alt .split-img { box-shadow: 0 8px 32px rgba(0,0,0,0.1); }

.section-alt .icon-card {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(26, 42, 74, 0.15);
}
.section-alt .icon-card:hover { border-color: rgba(26, 42, 74, 0.3); }
.section-alt .icon-card h4 { color: var(--undertow); }
.section-alt .icon-card p { color: var(--deep-water); }

.section-alt .checklist li::before { color: var(--undertow); }
.section-alt .checklist li strong { color: var(--abyss); }
.section-alt .checklist li span { color: var(--deep-water); }

.section-alt .pricing-card {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(26, 42, 74, 0.15);
}
.section-alt .pricing-card:hover { border-color: rgba(26, 42, 74, 0.3); }
.section-alt .pricing-card--featured { border-color: var(--undertow); box-shadow: 0 0 40px rgba(26, 42, 74, 0.1); }
.section-alt .pricing-card--featured::before { background: var(--undertow); color: var(--cream); }
.section-alt .pricing-card h3 { color: var(--deep-water); }
.section-alt .price-amount { color: var(--undertow); }
.section-alt .price-timeline { color: var(--undertow); }
.section-alt .price-features li { color: var(--deep-water); border-bottom-color: rgba(26, 42, 74, 0.15); }
.section-alt .price-features li::before { color: var(--undertow); }
.section-alt .btn-block.btn-primary { background: var(--undertow); border-color: var(--undertow); color: var(--cream); }
.section-alt .btn-block.btn-primary:hover { background: var(--abyss); border-color: var(--abyss); }
.section-alt .btn-block.btn-ghost { color: var(--undertow); border-color: var(--undertow); }
.section-alt .btn-block.btn-ghost:hover { background: var(--undertow); color: var(--cream); }

.section-alt .payment-callout {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(26, 42, 74, 0.15);
}
.section-alt .payment-callout h4 { color: var(--undertow); }
.section-alt .payment-callout p { color: var(--deep-water); }

.section-alt .instructor-photo { border-color: rgba(26, 42, 74, 0.3); }
.section-alt .instructor-card h3 { color: var(--deep-water); }
.section-alt .instructor-card .role { color: var(--undertow); }
.section-alt .instructor-card p { color: var(--deep-water); }

.section-alt .quote-mark { color: var(--undertow); }
.section-alt .quote-text { color: var(--abyss); }
.section-alt .quote-author { color: var(--undertow); }
.section-alt .quote-role { color: rgba(26, 42, 74, 0.6); }

.section-alt .testimonial-card {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(26, 42, 74, 0.15);
}
.section-alt .testimonial-card .stars { color: var(--gold); }
.section-alt .testimonial-card .tq { color: var(--deep-water); }
.section-alt .testimonial-card .tauthor { color: var(--abyss); }

.section-alt .youtube-embed { border-color: rgba(26, 42, 74, 0.15); }

.section-alt .gold-line { background: var(--undertow); margin-left: auto; margin-right: auto; }

.section-alt .faq-item { border-bottom-color: rgba(26, 42, 74, 0.15); }
.section-alt .faq-toggle { color: var(--undertow); }

.section-alt .final-cta { background: transparent; border-top: none; }
.section-alt .final-cta h2 { color: var(--abyss); }
.section-alt .final-cta p { color: var(--deep-water); }

/* Image divider: sand-to-sand transition when between section-alt sections */
.image-divider--sand::after {
    background: linear-gradient(to bottom, var(--warm-sand) 0%, transparent 20%, transparent 80%, var(--warm-sand) 100%);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .split { grid-template-columns: 1fr; gap: 2rem; }
    .split--reverse { direction: ltr; }
    .photo-grid { grid-template-columns: repeat(3, 1fr); }
    .testimonial-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .pricing-grid, .instructor-grid { grid-template-columns: 1fr; }
    .photo-grid { grid-template-columns: 1fr 1fr; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .split-img img { height: 350px; }
    .image-divider { height: 350px; }
    .hero--training { min-height: 90vh; }
    .sticky-cta .cta-text { display: none; }
}