/* =========================================================
   Homepage
   ========================================================= */

/* ---- Hero ---- */
/* IMPORTANT: do not set `display` on the bare .carousel-item selector.
   Bootstrap relies on .carousel-item { display: none } to hide inactive
   slides, and only reveals the current one via .active / -next / -prev.
   Overriding display on the bare selector makes every slide visible at
   once (stacked on top of each other). We only add flex layout to the
   same selectors Bootstrap itself uses to show a slide. */
.hero-carousel .carousel-item {
    min-height: 62vh;
    position: relative;
    background-size: cover;
    background-position: center;
}
.hero-carousel .carousel-item.active,
.hero-carousel .carousel-item-next,
.hero-carousel .carousel-item-prev {
    display: flex;
    align-items: center;
}
.hero-carousel .carousel-item::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg, rgba(11,42,40,0.94) 0%, rgba(11,42,40,0.78) 45%, rgba(11,42,40,0.35) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 640px; padding: 4rem 0; }
.hero-content .eyebrow { color: #A9D9D2; }
.hero-content .eyebrow::before { background: var(--c-accent); }
.hero-content h1 {
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    line-height: 1.08;
    margin: 0.5rem 0 1.1rem;
}
.hero-content p { color: #D6E9E5; font-size: 1.12rem; max-width: 480px; margin-bottom: 2rem; }
.hero-carousel .carousel-indicators { margin-bottom: 2rem; }
.hero-carousel .carousel-indicators [data-bs-target] {
    width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.4);
    border: none; opacity: 1;
}
.hero-carousel .carousel-indicators .active { background: var(--c-accent); width: 22px; border-radius: 4px; }

/* ---- Quick actions strip ---- */
.quick-actions {
    background: var(--c-white);
    margin-top: -48px;
    position: relative;
    z-index: 5;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
}
.quick-action-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1rem;
    border-radius: var(--r-md);
    height: 100%;
    transition: background 0.18s ease;
}
.quick-action-item:hover { background: var(--c-primary-light); }
.quick-action-item .icon-wrap {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--c-primary-light);
    color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.quick-action-item strong { display: block; font-size: 0.94rem; color: var(--c-primary-darker); }
.quick-action-item span { font-size: 0.78rem; color: var(--c-slate); }

/* ---- Promo ---- */
.promo-card {
    width: calc((100% - 3rem) / 3); /* 3rem = 2 gap × 1.5rem dari .scroller */
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    cursor: pointer;
    transition: all 0.25s ease;
}
.promo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.promo-card .promo-img { height: 300px; overflow: hidden; }
.promo-card .promo-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.promo-card:hover .promo-img img { transform: scale(1.06); }
.promo-card .promo-caption { padding: 1rem 1.15rem; display: flex; align-items: center; justify-content: space-between; }
.promo-card .promo-caption h6 { margin: 0; font-weight: 700; font-size: 0.95rem; color: var(--c-primary-darker); }
.modal-preview-img { max-height: 70vh; object-fit: contain; width: 100%; border-radius: var(--r-md); }

/* ---- Services ---- */
.service-card {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 2rem 1.75rem;
    height: 100%;
    transition: all 0.25s ease;
}
.service-card:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-6px); }
.service-card .service-icon {
    width: 58px; height: 58px; border-radius: 16px;
    background: var(--c-primary-light);
    color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}
.service-card:hover .service-icon { background: var(--c-primary); color: #fff; }
.service-card h4 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.service-card p { color: var(--c-slate); font-size: 0.92rem; }
.service-card a { font-weight: 700; font-size: 0.85rem; }

/* ---- About ---- */
.about-panel {
    background: var(--c-white);
    border-radius: var(--r-lg);
    padding: 3rem;
    height: 100%;
}
.about-panel p { color: var(--c-slate); line-height: 1.85; text-align: justify; }
.about-media { border-radius: var(--r-lg); overflow: hidden; height: 100%; }
.about-media img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }

.stat-pill {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 1.25rem;
    text-align: center;
}
.stat-pill .num { font-family: var(--f-display); font-size: 2.1rem; color: var(--c-primary); font-weight: 700; line-height: 1; }
.stat-pill .lbl { font-size: 0.82rem; color: var(--c-slate); margin-top: 0.4rem; }

/* ---- Team ---- */
.doctor-mini-card {
    width: 250px;
    border-radius: var(--r-md);
    overflow: hidden;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    transition: all 0.25s ease;
}
.doctor-mini-card:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); }
.doctor-mini-card .doc-photo { height: 300px; overflow: hidden; background: var(--c-primary-light); position: relative; }
.doctor-mini-card .doc-photo img { width: 100%; height: 100%; object-fit: cover; }
.doctor-mini-card .doc-social {
    position: absolute; bottom: 10px; right: 10px;
    display: flex; flex-direction: column; gap: 6px;
    opacity: 0; transform: translateX(8px);
    transition: all 0.2s ease;
}
.doctor-mini-card:hover .doc-social { opacity: 1; transform: none; }
.doctor-mini-card .doc-social a {
    width: 32px; height: 32px; border-radius: 50%;
    background: #fff; color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; box-shadow: var(--shadow-sm);
}
.doctor-mini-card .doc-info { padding: 1.1rem; text-align: center; }
.doctor-mini-card .doc-info h5 { font-size: 0.96rem; margin: 0 0 0.25rem; color: var(--c-primary-darker); }
.doctor-mini-card .doc-info p { font-size: 0.8rem; color: var(--c-slate); margin: 0; }

/* ---- Testimonials ---- */
.testimonial-card {
    width: 380px;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 1.75rem;
}
.testimonial-card .stars { color: var(--c-accent); font-size: 0.85rem; margin-bottom: 0.75rem; }
.testimonial-card p.review { color: var(--c-ink); font-size: 0.94rem; line-height: 1.7; text-align: justify; min-height: 130px; }
.testimonial-card .person { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--c-border); }
.testimonial-card .person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial-card .person strong { display: block; font-size: 0.88rem; color: var(--c-primary-darker); }
.testimonial-card .person span { font-size: 0.76rem; color: var(--c-slate-light); }

/* ---- Popup banner ---- */
.popup-overlay {
    position: fixed; inset: 0;
    background: rgba(11,42,40,0.68);
    display: flex; justify-content: center; align-items: center;
    z-index: 1080;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.popup-overlay.show { opacity: 1; visibility: visible; }
.popup-content { position: relative; max-width: 90%; width: 480px; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.popup-image { width: 100%; height: auto; display: block; }
.popup-close-btn {
    position: absolute; top: 12px; right: 12px;
    background: rgba(11,42,40,0.6); color: #fff; border: none;
    width: 34px; height: 34px; border-radius: 50%; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
}
.popup-close-btn:hover { background: rgba(11,42,40,0.9); }

/* ---- Budget modal ---- */
.budget-row {
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    background: var(--c-primary-lighter);
}

/* The label side and the 3-pill stats side sit side-by-side from the `sm`
   breakpoint up (matching .flex-sm-row on the row itself), and stack full
   width below it — otherwise the stats pills get squeezed and their text
   overflows/overlaps. */
.budget-col-label,
.budget-col-stats { width: 100%; }
@media (min-width: 576px) {
    .budget-col-label,
    .budget-col-stats { width: 50%; }
}

/* Bootstrap's .col-4 is a flex item with min-width:auto by default, which
   ignores the flex-basis and lets long numbers overflow past the column
   instead of shrinking/wrapping. min-width:0 fixes that. */
.budget-col-stats .col-4 { min-width: 0; }
.budget-col-stats .col-4 > span { white-space: normal; word-break: break-word; line-height: 1.3; }

@media (max-width: 575.98px) {
    .budget-col-stats .col-4 > span { font-size: 9.5px !important; padding-left: 3px; padding-right: 3px; }
}

/* ---- Mobile adjustments ---- */
@media (max-width: 767.98px) {
    .hero-carousel .carousel-item { min-height: 52vh; }
    .hero-content { padding: 2.75rem 0; }
    .hero-content h1 { font-size: clamp(2rem, 7vw, 2.6rem); }
    .doctor-mini-card .doc-photo { height: 500px; } /* ganti angkanya sesuai selera */
    .doctor-mini-card .doc-info h5 { font-size: 1.2rem; margin: 0 0 0.25rem; color: var(--c-primary-darker); }
    .doctor-mini-card .doc-info p { font-size: 1rem; color: var(--c-slate); margin: 0; }
}