/* ==========================================================================
   Homepage hero (.hero-home) - consolidated from ebook.css + homepage-polish.css.
   Loaded ONLY by partials/home/head.php, right after homepage-polish.css.
   Scope rule: every selector here MUST contain .hero-home (homepage-exclusive);
   shared .hero rules for course/landing heroes stay in ebook.css / index.css.
   The navbar-height compensation rule (.hero.hero-home padding-top) stays in
   css/navbar.css on purpose - it is coupled to the navbar, not the hero.
   ========================================================================== */

/* ============ moved from ebook.css ============ */



/* ───────────────────────────────────────────────────────────────────────────
   Homepage hero —
     • Desktop (>1100px): full-width main headline on top; below it the
       secondary text/features/CTA sit on the LEFT and the image on the RIGHT,
       TOP-aligned next to the text (not pushed to the bottom).
     • Tablet/mobile (≤1100px): single-column hybrid stack.
   Five direct grid children: .hero-head (badge + main headline), .hero-sublines
   (secondary lines + lead), .hero-sub-headlines (features), .hero-actions
   (CTA + social), .hero-image — placed via named grid-areas.
   Scoped to .hero-home so the course-page hero (templates/luxury_tech.php uses
   the same classes/#home) is left exactly as-is.
   ─────────────────────────────────────────────────────────────────────────── */
.hero-home .hero-container {
    /* Image column a touch wider than the text column so the slide can breathe
       (extends further left) without feeling cramped. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-areas:
        "head head"
        "body image";
    column-gap: 60px;
    row-gap: 0;
    align-items: start;
}


.hero-home .hero-head { grid-area: head; margin-bottom: 6px; }


/* Left body fills the slide's height and distributes its blocks (sublines,
   features, CTA) top-to-bottom — so a full-width 5:4 slide has no empty gap
   beside it. On mobile this becomes display:contents (see ≤1100 below). */
.hero-home .hero-body {
    grid-area: body;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}


.hero-home .hero-sublines      { grid-area: sublines; }


.hero-home .hero-sub-headlines { grid-area: subheads; }


.hero-home .hero-actions       { grid-area: actions; }


.hero-home .hero-image         { grid-area: image; align-self: start; }



/* Main orange headline — allow it to wrap (override base `.line-1` nowrap). */
.hero-home .hero-head h1 { margin-bottom: 0; }


.hero-home .hero-head h1 .line-1 { white-space: normal; }



/* Secondary lines (2 & 3) + lead — smaller, in the left column under the head. */
.hero-home .hero-sublines .hero-subline {
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    line-height: 1.55;
    margin: 0 0 8px;
    /* width:100% — on mobile .hero-sublines is a flex column (align-items:center),
       which would otherwise shrink-wrap each <p> to its max-content (full line
       width) and overflow. white-space:normal + overflow-wrap:anywhere let the
       box shrink below the longest unbreakable Thai run and wrap it. */
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}


.hero-home .hero-sublines .hero-lead-line { margin-top: 14px; }

@media (min-width: 1101px) {

    .hero-home .hero-head h1 .line-1 {
        white-space: nowrap;
        font-size: clamp(1.4rem, 2.45vw, 2.2rem);
        line-height: 1.2;
    }

    /* Each secondary line stays on a single line on desktop (no wrap).
       Font scales with viewport so the longest line keeps fitting the left
       column down to ~1280px without spilling onto the image. */
    .hero-home .hero-sublines .hero-subline {
        white-space: nowrap;
        font-size: clamp(0.95rem, 1.5vw, 1.3rem);
    }

    /* Social-proof trust line on one line too. Avatars are slightly smaller and
       the text scales with viewport so the avatars+text row fits the column. */
    .hero-home .social-proof p {
        white-space: nowrap;
        font-size: clamp(0.72rem, 0.92vw, 0.95rem);
    }

    .hero-home .social-proof .avatars img {
        width: 34px;
        height: 34px;
    }
}

@media (max-width: 1100px) {

    .hero-home .hero-container {
        /* minmax(0,1fr), NOT 1fr (=minmax(auto,1fr)) — otherwise the single
           column grows to the widest item's max-content (an unwrapped Thai run)
           and overflows the viewport, getting clipped by .hero overflow:hidden. */
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "head"
            "sublines"
            "actions"
            "image"
            "subheads";
        justify-items: center;
        text-align: center;
        row-gap: 0;
    }

    /* Unwrap .hero-body so its children become direct grid items again and stack
       in the hybrid order (head → sublines → CTA → image → features). */
    .hero-home .hero-body { display: contents; }

    .hero-home .hero-head,
    .hero-home .hero-sublines {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* width:100% so justify-items:center doesn't shrink-wrap these to the
           longest unbreakable Thai run and overflow the cell. */
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
    }

    .hero-home .hero-head h1 { width: 100%; }

    .hero-home .hero-sublines .hero-subline { text-align: center; }

    /* Lead line: drop the left bar, use centered top/bottom rules */
    .hero-home .hero-lead-line {
        text-align: center;
        padding-left: 0;
        border-left: none;
        padding-top: 8px;
        padding-bottom: 8px;
        border-top: 1px solid rgba(252, 211, 77, 0.30);
        border-bottom: 1px solid rgba(252, 211, 77, 0.30);
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-home .hero-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        margin-top: 28px;
    }

    .hero-home .hero-buttons { justify-content: center; margin-bottom: 0; }

    /* Stack avatars above the trust line (both centered) so the text gets the
       full width and sits on one tidy line instead of wrapping beside avatars. */
    .hero-home .social-proof {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        text-align: center;
    }

    .hero-home .social-proof p { font-size: 0.9rem; }

    .hero-home .hero-image {
        width: 100%;
        max-width: 600px;
        margin: 28px auto 0;
    }

    /* Features: clean vertical stack with thin dividers + readable font, instead
       of the cramped, gap-less flex-wrap the global ≤1024 rule produces. */
    .hero-home .hero-sub-headlines {
        width: 100%;
        max-width: 600px;
        margin: 30px auto 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-home .hero-sub-headlines .sub-headline {
        font-size: clamp(0.95rem, 3.1vw, 1.05rem);
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.82);
        text-align: center;
        padding: 15px 6px;
        border-top: 1px solid rgba(56, 189, 248, 0.22);
    }

    /* First block: no divider above, and override the base :first-child left-align. */
    .hero-home .hero-sub-headlines .sub-headline:first-child {
        text-align: center;
        border-top: none;
        padding-top: 0;
    }
}



/* Homepage hero slide box = 5:4 to match the uploaded slide images (admin
   recommends 800×640 = 5:4). Scoped to .hero-home so course-page heroes keep
   their 16:10 box. min-height:0 lets aspect-ratio fully govern at every width —
   the 400px fallback would force a taller box on narrow screens and re-crop. */
.hero-home .slider-container {
    aspect-ratio: 5 / 4;
    min-height: 0;
}

/* ============ moved from homepage-polish.css ============ */



/* ----------------------------------------------------------
 * 13. HERO SLIDER DOTS — "Pill + Progress" (premium)
 *     แก้ปัญหา dot เดิม (rgba(15,23,42,.1)) ที่จมไปกับรูปสไลด์
 *     • แถบแก้ว frosted รองจุด → เห็นชัดทุกพื้นหลัง
 *     • จุด active ยืดเป็นแคปซูลทอง + แถบ progress วิ่งครบ 4s
 *       พอดีกับ autoplay (js/script.js: slideIntervalTime = 4000)
 *     SCOPE: .hero-home เท่านั้น — ไม่กระทบ dot หน้าคอร์ส / #craft-dots
 *     CSS-only: progress รีสตาร์ทเองทุกครั้งที่ .dot ได้ class .active
 * ---------------------------------------------------------- */
.hero-home .slider-dots {
    bottom: 16px;
    gap: 9px;
    align-items: center;
    padding: 8px 13px;
    background: rgba(9, 14, 28, 0.18);
    -webkit-backdrop-filter: blur(11px) saturate(150%);
            backdrop-filter: blur(11px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 100px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    /* transform คง translateX(-50%) จาก .slider-dots เดิม — ใส่ transition ให้เฟดนุ่ม */
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.4s ease;
}



/* hover บนสไลด์ = autoplay หยุด → ซ่อนแถบจุด (เฟดลง) เพื่อโชว์เนื้อสไลด์เต็มแผ่น
   แต่ "ยังกดได้": ไม่ใช้ visibility/pointer-events:none แล้ว — พอเลื่อนเมาส์ลงมาที่
   แถบจุด (หรือโซนล่าง) จุดจะกลับมาเต็มทันทีให้คลิกย้อนดูภาพได้ */
.hero-home .hero-image:hover .slider-dots {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
}


/* โซนรับเมาส์ที่มองไม่เห็น — ขยายพื้นที่ hover รอบแถบจุดให้เรียกจุดกลับมาง่าย */
.hero-home .slider-dots::before {
    content: '';
    position: absolute;
    left: -50px;
    right: -50px;
    top: -16px;
    bottom: -24px;
    z-index: -1;
}


/* เลื่อนเมาส์มาถึงแถบจุด (หรือโซนล่าง) → จุดกลับมาเต็ม คลิกได้ */
.hero-home .hero-image:hover .slider-dots:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}



.hero-home .slider-dots .dot {
    width: 9px;
    height: 9px;
    border: none !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    background: rgba(255, 255, 255, 0.42);
    position: relative;
    overflow: hidden;
    transition: width 0.45s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s ease;
}



.hero-home .slider-dots .dot:not(.active):hover {
    background: rgba(255, 255, 255, 0.75);
}



.hero-home .slider-dots .dot.active {
    width: 36px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.26) !important;
    border-color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}



/* แถบทอง progress วิ่งซ้าย→ขวา ครบพอดี 4s แล้วสไลด์เปลี่ยน */
.hero-home .slider-dots .dot.active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background: linear-gradient(90deg, #F4C46B, #C8962E);
    box-shadow: 0 0 12px rgba(200, 150, 46, 0.65);
    transform-origin: left;
    /* duration ตามเวลาแสดงจริงของสไลด์ (engine ตั้ง --hero-dot-dur ให้ตรงกับ
       ความเร็วรวม/เวลารายสไลด์); fallback 5s = ความเร็วปกติใหม่ */
    animation: heroDotFill var(--hero-dot-dur, 5s) linear forwards;
}



/* hover บนสไลด์ = autoplay หยุด (sliderPaused) → หยุดแถบ progress ให้ตรงกัน */
.hero-home .hero-image:hover .slider-dots .dot.active::after {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

    .hero-home .slider-dots .dot.active::after {
        animation: none !important;
        transform: scaleX(1); /* แสดงเต็มแคปซูลแบบนิ่ง */
    }
}



/* ==========================================================
   Hero TEXT entrance animation (admin: hero_text_anim / speed)
   Active ONLY when .hero-home has [data-text-anim] — so the
   default ('none') keeps the current static behaviour.
   Speed comes from inline --hta-dur / --hta-gap on the section.
   Uses animation-fill-mode:both (no separate opacity:0 base) so
   text stays visible if CSS animations are unsupported/JS-off.
   opacity + transform only → no layout shift (good CLS/SEO).
   ========================================================== */
.hero-home[data-text-anim]{ --hta-fx:0; --hta-fy:0; }


.hero-home[data-text-anim="up"]    { --hta-fx:0;     --hta-fy:30px; }


.hero-home[data-text-anim="down"]  { --hta-fx:0;     --hta-fy:-30px; }


.hero-home[data-text-anim="left"]  { --hta-fx:-46px; --hta-fy:0; }


.hero-home[data-text-anim="right"] { --hta-fx:46px;  --hta-fy:0; }


.hero-home[data-text-anim="fade"]  { --hta-fx:0;     --hta-fy:0; }


.hero-home[data-text-anim="shine"] { --hta-fx:0;     --hta-fy:24px; }



.hero-home[data-text-anim] .hta{ animation:htaIn var(--hta-dur,.6s) cubic-bezier(.22,1,.36,1) both; }


.hero-home[data-text-anim="blur"] .hta{ animation-name:htaBlur; animation-timing-function:ease; animation-duration:calc(var(--hta-dur,.6s)*1.25); }



.hero-home[data-text-anim] .hta-1{ animation-delay:calc(var(--hta-gap,.13s) * 0); }


.hero-home[data-text-anim] .hta-2{ animation-delay:calc(var(--hta-gap,.13s) * 1.2); }


.hero-home[data-text-anim] .hta-3{ animation-delay:calc(var(--hta-gap,.13s) * 2.4); }


.hero-home[data-text-anim] .hta-4{ animation-delay:calc(var(--hta-gap,.13s) * 3.6); }


.hero-home[data-text-anim] .hta-5{ animation-delay:calc(var(--hta-gap,.13s) * 4.8); }



/* Shimmer: a single light sweep across the headline after it enters */
.hero-home[data-text-anim="shine"] h1{ position:relative; overflow:hidden; }


.hero-home[data-text-anim="shine"] h1::after{
    content:''; position:absolute; top:0; bottom:0; left:0; width:60%; pointer-events:none; opacity:0;
    background:linear-gradient(110deg,transparent,rgba(255,255,255,.6),transparent);
    animation:htaShine calc(var(--hta-dur,.6s) * 1.8) ease-out calc(var(--hta-gap,.13s) * 3.2) both;
}

@media (prefers-reduced-motion: reduce) {

    .hero-home[data-text-anim] .hta{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }

    .hero-home[data-text-anim="shine"] h1::after{ animation:none !important; opacity:0 !important; }
}