/**
 * assets/css/hero-banner.css — হোমপেজের পাবলিক Hero (typed.js) সেকশনের CSS।
 * PART 4 (typed.js হোমপেজ Hero) এ নতুন তৈরি — প্রজেক্টে আগে থেকে কোনো ডেডিকেটেড
 * hero-banner CSS ফাইল ছিল না (about-us.css/services-section.css/why-choose-us.css/
 * video-section.css/packages.css — প্রতিটা হোম-সেকশনের নিজস্ব স্কোপড CSS ফাইলের
 * একই কনভেনশন অনুসরণ করে এই ফাইলটা বানানো হলো)। শুধু `.typed-cursor`
 * (home-v01.css এ আগে থেকে গ্লোবালি সংজ্ঞায়িত) রিইউজ হচ্ছে, বাকি সব ক্লাস নতুন
 * — home-v01.css এর ১৩,০০০+ লাইন মূলত Elementor বিল্ডারের widget-hash-নির্দিষ্ট
 * CSS (রিইউজযোগ্য না, উদাহরণ: .webbazarbd-theme-786fd06), এই সেকশনের জন্য
 * সাধারণীকৃত কোনো ক্লাস সেখানে পাওয়া যায়নি।
 */

.hero-banner-wrapper {
    --hero-overlay-color: #1A0B5E;
    --hero-text-color: #FFFFFF;
    --hero-accent-color: #5F25D9;
    --hero-whatsapp-bg: #25D366;
    --hero-whatsapp-bg-hover: #1DA851;
    --hero-whatsapp-text: #FFFFFF;
    --hero-demo-border: #FFFFFF;
    --hero-demo-bg-hover: #5F25D9;
    --hero-demo-text-hover: #FFFFFF;
    /* ব্যানার হাইট — অ্যাডমিন প্যানেল (হিরো সেকশন → ব্যানার হাইট) থেকে ডাইনামিক
       সেট হয় (template-home.php ইনলাইন ভ্যারিয়েবল ব্লক দেখুন)। এখানে ফলব্যাক
       500px, ইনলাইন ভ্যারিয়েবল না থাকলে (hero খালি হলে) ব্যবহার হবে। */
    --hero-banner-height: 500px;

    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--hero-banner-height);
    background-color: var(--hero-overlay-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 60px 0;
    overflow: hidden;
}

.hero-banner-wrapper .hero-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--hero-overlay-color) 0%, rgba(0, 0, 0, 0.55) 100%);
    opacity: 0.85;
}

.hero-banner-wrapper .hero-banner-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.hero-banner-wrapper .hero-banner-title {
    color: var(--hero-text-color);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.hero-banner-wrapper .hero-banner-typed {
    color: var(--hero-accent-color);
}

.hero-banner-wrapper .hero-banner-desc {
    color: var(--hero-text-color);
    opacity: 0.9;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 30px;
}

.hero-banner-wrapper .hero-banner-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.hero-banner-wrapper .hero-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.hero-banner-wrapper .hero-banner-btn-whatsapp {
    background-color: var(--hero-whatsapp-bg);
    color: var(--hero-whatsapp-text);
}

.hero-banner-wrapper .hero-banner-btn-whatsapp:hover {
    background-color: var(--hero-whatsapp-bg-hover);
    color: var(--hero-whatsapp-text);
}

.hero-banner-wrapper .hero-banner-btn-demo {
    background: transparent;
    border: 1px solid var(--hero-demo-border);
    color: var(--hero-demo-border);
}

.hero-banner-wrapper .hero-banner-btn-demo:hover {
    background-color: var(--hero-demo-bg-hover);
    border-color: var(--hero-demo-bg-hover);
    color: var(--hero-demo-text-hover);
}

/* ট্যাবলেট/মোবাইল — অ্যাডমিন থেকে সেট করা ডেস্কটপ হাইটের ওপর ভিত্তি করে
   ভিউপোর্ট-প্রপোরশনাল ভাবে অটো-স্কেল হয় (clamp: সর্বনিম্ন ৩২০px, আদর্শ ৭০vw,
   কিন্তু কখনো ডেস্কটপ ভ্যালু ছাড়িয়ে যাবে না)। কনটেন্ট বড় হলে min-height
   হওয়ায় র‍্যাপার নিজে থেকেই বেড়ে যাবে, কোনো কন্টেন্ট ক্রপ হবে না। */
@media (max-width: 768px) {
    .hero-banner-wrapper {
        min-height: clamp(320px, 70vw, var(--hero-banner-height));
        padding: 60px 0;
    }

    .hero-banner-wrapper .hero-banner-title {
        font-size: 28px;
    }

    .hero-banner-wrapper .hero-banner-desc {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .hero-banner-wrapper {
        min-height: clamp(280px, 80vw, var(--hero-banner-height));
        padding: 45px 0;
    }
}