/* โหลดเฉพาะหน้า Home โดย index.php หลัง app.css และ brand.css */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 640px;
    padding: 28px 0;
    color: #fff;
    background-color: #142e53;
    background-image: url("images/acm-home-panorama.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 62%;
    border-bottom: 4px solid #c0994b;
}

/* เงาสีน้ำเงินช่วยให้อ่านข้อความได้ โดยยังเห็นบ้านและธรรมชาติ */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(13, 34, 65, .82), rgba(13, 34, 65, .54) 48%, rgba(13, 34, 65, .16)),
        linear-gradient(0deg, rgba(13, 34, 65, .30), transparent 60%);
}

.hero > .container { position: relative; }
.hero h1 { color: #fff; text-shadow: 0 3px 22px rgba(0, 0, 0, .30); }
.hero .lead { color: #f4f6fa; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.hero .eyebrow { color: #f0dbb1; }

.hero .search-panel {
    background: rgba(255, 255, 255, .97);
    border-color: rgba(255, 255, 255, .72);
    border-top: 4px solid #c0994b;
    color: #353941;
    box-shadow: 0 22px 65px rgba(10, 25, 48, .28);
}

.hero .search-panel h2 { color: #265498; }

.hero .btn-light {
    --bs-btn-color: #142e53;
    --bs-btn-bg: #c0994b;
    --bs-btn-border-color: #c0994b;
    --bs-btn-hover-color: #142e53;
    --bs-btn-hover-bg: #d5b574;
    --bs-btn-hover-border-color: #d5b574;
    --bs-btn-active-color: #142e53;
    --bs-btn-active-bg: #e0c38c;
    --bs-btn-active-border-color: #e0c38c;
}

@media (max-width: 991.98px) {
    .hero {
        min-height: 0;
        padding: 20px 0 36px;
        background-position: center center;
    }

    .hero::before {
        background: linear-gradient(180deg, rgba(13, 34, 65, .80), rgba(13, 34, 65, .44));
    }

    .hero .search-panel { max-width: 620px; }
}

@media (max-width: 575.98px) {
    .hero { padding: 8px 0 24px; }
    .hero h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
    .hero .lead { font-size: 1.05rem; }
    .hero .search-panel { padding: 22px; }
}