/* =============================================
   pages/home.css — Hero + sticky-stack services
   ============================================= */

/* ── HERO ─────────────────────────────────── */
.hero {
    padding: var(--s-12) 0 var(--s-16);
    background: linear-gradient(to bottom, var(--bg), var(--bg2));
    transition: background var(--t);
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10);
    align-items: center;
}

.hero-panel--text {
    display: flex;
    flex-direction: column;
}

.hero-panel--carousel {
    display: flex;
    align-items: stretch;
}

.hero-panel--carousel .dual-carousel {
    width: 100%;
}

/* Hero text */
.hero-text h1 {
    font-size: 40px;
    margin-bottom: var(--s-3);
}

.highlight { color: var(--orange); }

.hero-subtitle {
    font-size: 15px;
    margin-bottom: var(--s-5);
    line-height: 1.7;
    max-width: 460px;
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-6);
}

.hero-buttons {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
}

/* ── HOME SERVICES — sticky stacking ──────── */
.home-services {
    padding-top: var(--s-12);
    background: var(--bg);
    transition: background var(--t);
}

.home-services .section-header {
    padding-top: var(--s-4);
    padding-bottom: var(--s-10);
    margin-bottom: 0;
}

.home-services .services-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: unset;
}

/* Sticky-stack cards */
.home-services .service-detail-card {
    position: sticky;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border);
    margin-bottom: var(--s-5);
    display: flex;
    flex-direction: row;
    height: 220px;
    cursor: pointer;
    transition: box-shadow var(--t), background var(--t);
}

.home-services .service-detail-card:hover { box-shadow: var(--shadow-lg); }

.home-services .service-detail-card:nth-child(1) { top: 100px; z-index: 10; }
.home-services .service-detail-card:nth-child(2) { top: 116px; z-index: 20; }
.home-services .service-detail-card:nth-child(3) { top: 132px; z-index: 30; }
.home-services .service-detail-card:nth-child(4) { top: 148px; z-index: 40; }

.home-services .sdc-img-wrap {
    width: 280px;
    height: 100%;
    flex-shrink: 0;
}

.home-services .sdc-body {
    padding: var(--s-6) var(--s-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-services .sdc-body h3 { font-size: 19px; margin-bottom: var(--s-2); }
.home-services .sdc-body p  { font-size: 14px; margin-bottom: var(--s-3); }

.services-stack-spacer { height: 30vh; }

/* ── TABLET ───────────────────────────────── */
@media (max-width: 1000px) {
    .hero-content { gap: var(--s-8); }
    .hero-text h1 { font-size: 32px; }

    .home-services .sdc-img-wrap { width: 220px; }
    .home-services .sdc-body     { padding: var(--s-5) var(--s-6); }
    .home-services .service-detail-card { height: 200px; }
}

/* ── MOBILE ───────────────────────────────── */
@media (max-width: 768px) {
    .hero { padding: var(--s-8) 0 var(--s-10); }

    .hero-content { grid-template-columns: 1fr; gap: var(--s-8); }
    .hero-text h1 { font-size: 26px; }

    .hero-buttons { flex-direction: column; }
    .hero-subtitle { max-width: 100%; }

    /* Mobile carousel: 2 stacked horizontal rows */
    .hero-panel--carousel {
        display: block; /* Change from flex to block to prevent flex-stretching */
        width: 100%;
        overflow: hidden; /* This clips any track overflow */
    }

    .hero-panel--carousel .dual-carousel {
        display: grid;
        grid-template-columns: 100%; /* Explicitly lock width to 100% of parent */
        grid-template-rows: auto auto; /* Two distinct rows for the two carousels */
        gap: var(--s-2);
        width: 100%;
        height: auto !important;
        min-height: unset !important;
    }

    .hero-panel--carousel .vertical-carousel {
        overflow: hidden !important;
        border-radius: var(--r-md);
        height: 120px !important;
        width: 100%; /* Force width to stay inside the grid cell */
        position: relative;
    }

    .hero-panel--carousel .vertical-carousel::before,
    .hero-panel--carousel .vertical-carousel::after { display: none !important; }

    .hero-panel--carousel .carousel-track {
        display: flex; /* Ensure it's flex for the row layout */
        flex-direction: row !important;
        gap: var(--s-2) !important;
        width: max-content !important; /* This is fine as long as the parent has overflow: hidden */
    }

    .hero-panel--carousel .scroll-up   { animation: scrollLeft  35s linear infinite !important; }
    .hero-panel--carousel .scroll-down { animation: scrollRight 35s linear infinite !important; }

    .hero-panel--carousel .service-card {
        width: 140px !important;
        height: 110px !important;
        flex-shrink: 0 !important;
    }

    /* Service cards: undo sticky */
    .home-services .service-detail-card {
        position: relative !important;
        top: auto !important;
        flex-direction: column;
        height: auto;
        margin-bottom: var(--s-4);
    }

    .home-services .sdc-img-wrap { width: 100%; height: 160px; }
    .services-stack-spacer { display: none; }
}

@keyframes scrollLeft  { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0);    } }