/* =========================================================
   Best Ever Medical — Homepage-Only Styles
   Loads ONLY on the front page (enqueued conditionally via
   functions.php using is_front_page()).
   Covers: Hero section + stacked product cards.
   ========================================================= */

/* --- Asymmetrical Editorial Hero --- */
.hero-section {
    background-color: var(--primary-dark);
    min-height: 110vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?q=80&w=2000&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    opacity: 0.12;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}
.hero-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
}
.hero-content {
    text-align: left;
    color: var(--ivory);
    max-width: 650px;
    z-index: 10;
    position: relative;
}

.hero-eyebrow {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 15px;
}

.hero-content h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(50px, 7vw, 100px);
    line-height: 1.0;
    margin: 0 0 25px 0;
    font-weight: 300;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero-content p {
    font-size: clamp(16px, 2vw, 18px);
    max-width: 500px;
    margin: 0 0 45px 0;
    line-height: 1.6;
    opacity: 0.8;
    color: var(--white);
    font-weight: 300;
}

.cta-group { display: flex; gap: 15px; justify-content: flex-start; flex-wrap: wrap; }
.btn-primary {
    background: var(--white); color: var(--primary-dark); padding: 16px 36px; border-radius: 4px;
    text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: inline-block; position: relative; overflow: hidden; border: 1px solid var(--white);
}
.btn-primary:hover,
.btn-primary:visited,
.btn-primary:focus { color: var(--primary-dark); }
.btn-primary:hover { background: var(--card-gold); color: var(--white); border-color: var(--card-gold); box-shadow: 0 15px 25px rgba(230, 176, 34, 0.2); transform: translateY(-2px); }
.btn-secondary {
    background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.4); padding: 16px 36px;
    border-radius: 4px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; display: inline-block;
}
.btn-secondary:hover,
.btn-secondary:visited,
.btn-secondary:focus { color: var(--white) !important; }
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }

/* --- Dynamic Stacked Product Cards --- */
.cards-container {
    position: relative; height: 600px; width: 45%; perspective: 1200px; z-index: 5;
    display: flex; align-items: center; justify-content: center;
}
.stack-card {
    position: absolute; width: 300px; height: 420px; border-radius: 16px; box-sizing: border-box;
    box-shadow: 0 30px 60px rgba(0,0,0,0.5); transform: translateY(200px) rotate(0deg); opacity: 0;
    will-change: transform, opacity; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
}
/* !important on sizing/position: Elementor's global `.elementor img`
   reset (border:none, box-shadow:none, height:auto, max-width:100%)
   was beating this rule — same reset-vs-plain-<img> collision hit
   repeatedly elsewhere in this build (About's brand logos, Products
   catalogue images, Horizontal Gallery, Featured Articles), just via
   Elementor's own kit rule instead of theme reset.css this time.
   height:auto specifically broke object-fit:cover, since cover needs
   BOTH dimensions explicitly constrained to crop-fill correctly —
   with height left auto, the image rendered at its natural aspect
   ratio inside the fixed-height card instead of filling it, which is
   what caused the "washed out / not fully covering" look. */
.card-media { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; z-index: 1; transition: transform 0.7s ease; }
.stack-card:hover .card-media { transform: scale(1.05); }
.card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }

.card-content-wrapper { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 30px; box-sizing: border-box; color: var(--white); }
.card-num { font-size: 48px; font-weight: 400; font-family: 'Cormorant Garamond', serif; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.3); color: var(--card-gold); }
.card-title { font-size: 28px; font-family: 'Cormorant Garamond', serif; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.card-list { font-size: 13px; line-height: 1.8; font-weight: 500; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 5px rgba(0,0,0,0.8); }

.card-1 { z-index: 1; }
.card-1 .card-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%); }
.card-2 { z-index: 2; }
.card-2 .card-overlay { background: linear-gradient(180deg, rgba(40,30,0,0.1) 0%, rgba(12,77,41,0.9) 100%); }
.card-3 { z-index: 3; width: 320px; }
.card-3 .card-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(20,20,20,0.9) 100%); }

/* --- Trust / Client Logo Marquee ---
   .marquee-container / .marquee-track / @keyframes bem-scroll-marquee
   live in custom.css, shared with About's brand-logo marquee — only
   this section's wrapper, subtitle, logo sizing, and scroll speed are
   homepage-specific. Rendered via [bem_trust_marquee] (functions.php). */
.trust-section { background-color: var(--bg-cream); padding: 40px 0 60px 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.trust-subtitle { font-size: 13px; text-transform: uppercase; letter-spacing: 3px; color: #64748b; font-weight: 600; margin-bottom: 40px; text-align: center; padding: 0 20px; }
.trust-section .marquee-track { animation-duration: 35s; }

/* !important on sizing: same reset-vs-plain-<img> collision hit
   repeatedly elsewhere in this build (About's brand logos, FAQ toggle,
   catalogue preview images) — the static reference didn't need this,
   but everything rendered inside the Elementor shortcode widget does. */
.clinic-logo {
    height: 60px !important; width: auto !important; margin: 0 40px;
    opacity: 0.9; mix-blend-mode: multiply; transition: all 0.3s ease; cursor: pointer;
}
.clinic-logo:hover { opacity: 1; mix-blend-mode: normal; transform: scale(1.05); }

/* --- About Teaser Section ---
   .section-eyebrow lives in custom.css, shared with About's "Our
   Story" section. The word-by-word scroll reveal (.highlight-text
   .word) is wired up in home.js — see the "ABOUT TEASER" block there. */
.about-section { background-color: var(--bg-cream); padding: 120px 5vw; position: relative; overflow: hidden; }
.about-container { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.about-content { width: 100%; }
/* Matches the static reference (bestevermeds.com) exactly — that
   heading uses an inline-style override on top of the shared
   .highlight-text class (different color/weight/size/margin than the
   class rule elsewhere in the static site's own <style> block), and
   that override IS the correct, intended design for this section —
   not a bug to be "fixed" away. Values confirmed directly against the
   live static page rather than assumed from the class rule alone. */
.highlight-text { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(36px, 5vw, 54px) !important; line-height: 1.2 !important; font-weight: 300 !important; color: var(--primary-dark) !important; margin: 0 !important; }
.highlight-text .word { opacity: 0.15; transition: opacity 0.1s; }
.btn-outline-dark {
    display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border: 1px solid var(--text-dark);
    color: var(--text-dark); text-decoration: none; font-weight: 600; transition: all 0.4s ease; border-radius: 4px;
    font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 40px;
}
.btn-outline-dark:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); }

@media (max-width: 1024px) {
    /* Matches the static reference's own breakpoint exactly (was
       previously at 768px here — confirmed wrong against
       bestevermeds.com during the Horizontal Gallery build). The
       static reference also resets .about-container to display:block
       and .about-content to width:100% at this breakpoint, but those
       compensate for a two-column desktop layout (content beside
       .about-images) that doesn't apply here — .about-images is
       confirmed dead code with no matching markup (see the note on
       bem_about_page_shortcode() in functions.php), so this section
       was already deliberately built as a single-column centered
       layout at every width, not just on mobile. */
    .about-section { padding: 80px 5vw; }
    /* No separate mobile font-size override — on the static reference,
       the inline style always wins regardless of viewport width (inline
       beats any external rule, media-queried or not), so there's no
       distinct mobile size to match. The clamp()'s own 5vw component
       already scales down naturally at narrow widths. */
}

/* --- Horizontal Scroll Gallery ---
   Desktop (≥1025px): GSAP pins this section and horizontally scrolls
   .scroll-track as the user scrolls down (see the "HORIZONTAL SCROLL
   GALLERY" block in home.js). Tablet/mobile (≤1024px): falls back to
   a plain vertical stack — no pinning, no horizontal motion — matching
   the static reference's own responsive strategy exactly rather than
   trying to force the pin-scroll effect onto touch devices.
   Background hardcoded to #0c4d29 rather than var(--primary-dark): the
   static reference itself hardcodes this section's background this
   way (not a var() reference), so matched as-is rather than "improved"
   into a custom property. */
.horizontal-section { background-color: #0c4d29; overflow: hidden; position: relative; height: 100vh; display: flex; align-items: center; z-index: 95; }
.scroll-track { display: flex; width: max-content; gap: 6vw; padding: 0 10vw; height: 100%; align-items: center; position: relative; z-index: 1; }
.hs-title { display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; }
.hs-title .hs-num { font-size: 14px; font-weight: 600; color: var(--card-gold); letter-spacing: 2px; margin-bottom: 16px; }
.hs-title h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(60px, 10vw, 140px); line-height: 0.9; margin: 0; font-weight: 300; color: var(--white); letter-spacing: -0.02em; }
.hs-title h2 em { font-style: italic; color: rgba(255, 255, 255, 0.6); }
.hs-image { width: 32vw; min-width: 320px; height: 55vh; border-radius: 16px; overflow: hidden; flex-shrink: 0; position: relative; background: #0c4d29; box-shadow: none; }
/* !important on sizing only (not transform) — same reset-vs-plain-<img>
   collision hit repeatedly elsewhere in this build (About's brand
   logos, Products catalogue preview images). transform stays
   unprotected since GSAP writes its own inline transform for the
   parallax effect (home.js) and needs to be free to do so. */
.hs-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: scale(1.15); }
.hs-desc { width: 26vw; min-width: 300px; color: var(--white); flex-shrink: 0; }
.hs-desc .category { color: var(--card-gold); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.hs-desc .category svg { width: 16px; height: 16px; stroke: currentColor; }
.hs-desc p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); margin-bottom: 24px; }
.feature-list { list-style: none; padding: 0; margin: 0 0 32px 0; }
.feature-list li { position: relative; padding-left: 20px; margin-bottom: 12px; font-size: 15px; color: rgba(255, 255, 255, 0.85); font-weight: 400; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background-color: var(--card-gold); border-radius: 50%; }
.btn-outline-light { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border: 1px solid rgba(255, 255, 255, 0.25); color: var(--white); text-decoration: none; font-weight: 500; transition: all 0.4s ease; border-radius: 4px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; align-self: flex-start; }
.btn-outline-light:hover { background-color: var(--white); color: #0c4d29; }

@media (max-width: 1024px) {
    .horizontal-section { height: auto; padding: 80px 0; }
    .scroll-track { flex-direction: column; width: 100%; gap: 60px; padding: 0 5vw; align-items: flex-start; }
    .hs-title, .hs-image, .hs-desc { width: 100%; margin-left: 0 !important; transform: translateY(0) !important; }
    .hs-image { height: 350px; min-width: auto; }
    .hs-desc { min-width: auto; }
}

/* --- Featured Articles (News & Masterclasses) --- */
.news-section { background-color: var(--bg-cream); padding: 100px 5vw; position: relative; }
.news-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; max-width: 1300px; margin-left: auto; margin-right: auto; }
.news-header-text h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 5vw, 64px); font-weight: 400; color: var(--text-dark); margin: 10px 0 0 0; letter-spacing: -0.02em; line-height: 1.1; }
.news-header-text p { color: #64748b; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; margin: 0; }
.btn-view-all { padding: 14px 32px; border: 1px solid #e2e8f0; border-radius: 4px; color: var(--text-dark); text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.3s ease; display: inline-block; }
.btn-view-all:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; max-width: 1300px; margin: 0 auto; }
.news-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.news-image-wrapper { width: 100%; height: 450px; border-radius: 40px; overflow: hidden; margin-bottom: 30px; position: relative; transition: border-radius 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
/* !important on sizing only — same reset-vs-plain-<img> collision hit
   repeatedly elsewhere in this build. */
.news-image { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.news-card:hover .news-image-wrapper { border-radius: 16px; }
.news-card:hover .news-image { transform: scale(1.05); }
.news-meta { display: flex; gap: 15px; font-size: 14px; color: #64748b; font-weight: 500; margin-bottom: 12px; padding: 0 10px; }
.news-meta .tag { color: var(--primary); font-weight: 600; }
.news-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(24px, 3vw, 34px); font-weight: 500; line-height: 1.2; margin: 0; color: var(--text-dark); padding: 0 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.news-title-text { flex: 1; transition: color 0.3s ease; }
.news-title-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-cream); border: 1px solid rgba(0,0,0,0.08); color: var(--text-dark); flex-shrink: 0; transform: translateX(-15px); opacity: 0; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.news-title-arrow svg { width: 20px; height: 20px; stroke: currentColor; }
.news-card:hover .news-title-text { color: var(--primary); }
.news-card:hover .news-title-arrow { transform: translateX(0); opacity: 1; background: var(--primary); color: var(--white); border-color: var(--primary); }
/* Video-type article play-icon overlay — a plain CSS class here
   instead of the static reference's inline style, since content is
   now dynamic (only some articles get the overlay, via the
   article_video_overlay ACF checkbox). Values matched exactly. */
.news-play-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px;
    background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.4); z-index: 5;
}
.news-play-overlay svg { width: 24px; height: 24px; fill: var(--white); margin-left: 4px; }

/* --- FAQ ---
   Literal rgba(0,0,0,0.08) instead of var(--border-color): confirmed
   on staging that this custom property silently fails to resolve
   inside Elementor's shortcode widget DOM subtree — the same failure
   already hit repeatedly elsewhere in this build (About's cert-hub,
   Products catalogue filter pills). Symptom here was invisible
   .faq-item divider lines and no circle around the .faq-toggle "+".
   Reuses the same .faq-item/.faq-question/.faq-toggle/.faq-answer-*
   class names as the Product template's own FAQ (product.css), but
   intentionally NOT promoted to a shared component: the two layouts
   are structurally different (this one has the sticky .faq-left
   heading + .faq-right list two-column layout; Product's is a single
   centered column), and the Product template is already deployed and
   extensively debugged — not worth the regression risk to touch it
   for a marginal DRY gain. The class names never collide in practice
   since product.css and home.css are never enqueued on the same page. */
.faq-section { background-color: var(--bg-cream); color: var(--text-dark); padding: 120px 5vw; position: relative; }
.faq-container { max-width: 1300px; margin: 0 auto; display: flex; gap: 8vw; align-items: flex-start; }
.faq-left { flex: 0 0 35%; position: sticky; top: 120px; }
.faq-left h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(60px, 12vw, 180px); line-height: 0.85; margin: 0; letter-spacing: -0.02em; font-weight: 300; color: var(--primary-dark); }
.faq-right { flex: 1; display: flex; flex-direction: column; }

.faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); transition: border-color 0.4s ease; }
.faq-item:first-child { border-top: 1px solid rgba(0,0,0,0.08); }
.faq-item:hover { border-color: rgba(12, 77, 41, 0.3); }

/* !important on background/border/color: .faq-question is a real
   <button> — same reset.css-vs-bare-<button> collision hit repeatedly
   elsewhere in this build (submit buttons, filter pills). */
.faq-question { width: 100%; background: transparent !important; border: none !important; color: var(--text-dark) !important; display: flex; justify-content: space-between; align-items: center; padding: 40px 0; text-align: left; font-family: 'Cormorant Garamond', serif; font-size: clamp(24px, 3vw, 32px); font-weight: 400; transition: color 0.4s ease; cursor: pointer; letter-spacing: -0.01em; }
.faq-question:hover { color: var(--primary-dark) !important; }
.faq-item.active .faq-question { color: var(--primary-dark) !important; font-style: italic; }

.faq-toggle { width: 44px; height: 44px; border-radius: 50%; background: transparent; color: var(--text-dark); border: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: 20px; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s, color 0.4s, border-color 0.4s; }
.faq-item.active .faq-toggle { transform: rotate(45deg); background: var(--primary-dark); color: var(--white); border-color: var(--primary-dark); }
.faq-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; }

.faq-answer-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.faq-item.active .faq-answer-wrapper { grid-template-rows: 1fr; }
.faq-answer-inner { overflow: hidden; }
.faq-answer-inner p { margin: 0 0 40px 0; font-size: 17px; line-height: 1.6; color: #475569; max-width: 90%; font-weight: 300; }

@media (max-width: 1024px) {
    .why-bem-section, .news-section, .faq-section, .certification-section { padding: 80px 5vw; }
    .news-header { flex-direction: column; align-items: flex-start; gap: 20px; }
    .news-grid { grid-template-columns: 1fr; gap: 50px; }
    .news-image-wrapper { height: 300px; border-radius: 30px; }
    .faq-container { flex-direction: column; gap: 40px; }
    .faq-left { position: relative; top: 0; }
}

/* --- Mobile Responsive Hero --- */
@media (max-width: 1024px) {
    .hero-section { padding-top: 120px; }
    .hero-container { flex-direction: column; justify-content: center; text-align: center; }
    .hero-content { max-width: 100%; text-align: center; }
    .hero-eyebrow { justify-content: center; }
    .cta-group { justify-content: center; }
    .stack-card { width: 240px; height: 340px; }
    .clinic-logo { height: 40px !important; margin: 0 25px; }
}