/*
 * =======================================================
 *  ASIBONGE FUNERAL PARLOR — RESPONSIVE DESIGN SYSTEM
 *  Dedicated responsive stylesheet — loaded after style.css
 *
 *  Breakpoint Architecture:
 *    Desktop      → > 1440px    (handled by base styles)
 *    Large Laptop → 1025px–1440px
 *    Tablet       → 769px–1024px
 *    Mobile/Phone → 480px–768px
 *    Small Phone  → < 480px
 * =======================================================
 */

/* ======================================================
   GLOBAL: Prevent ALL horizontal overflow at every size
   ====================================================== */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    min-width: 320px;
}

*, *::before, *::after {
    box-sizing: border-box;
    max-width: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ======================================================
   GLOBAL: Fluid Container
   ====================================================== */
.container {
    width: 92%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ======================================================
   GLOBAL: Fluid Typography Scale
   Applied site-wide so headings breathe at every size
   ====================================================== */
.section-title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    margin-bottom: clamp(2rem, 5vh, 3.5rem);
    line-height: 1.2;
}

h1 { font-size: clamp(1.6rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }

/* ======================================================
   BREAKPOINT 1: LARGE LAPTOP (1025px – 1440px)
   Goal: Tighten spacing, scale the nav, prevent header
   crowding while keeping the desktop two-column layout.
   ====================================================== */
@media screen and (min-width: 1025px) and (max-width: 1440px) {

    /* --- Container --- */
    .container { max-width: 1200px; }

    /* --- Header --- */
    .header-content { gap: 1rem; }
    .logo-container { height: clamp(60px, 6vw, 80px); }

    .nav-links {
        gap: clamp(0.4rem, 0.9vw, 1.2rem);
        flex-wrap: nowrap;
    }

    .nav-link {
        font-size: clamp(0.68rem, 0.8vw, 0.78rem);
        white-space: nowrap;
    }

    .btn-inquiry {
        padding: 0.4rem 0.9rem;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    .header-cta .btn-primary {
        padding: 0.5rem 1rem;
        font-size: 0.78rem;
    }



    /* --- Hero --- */
    .hero {
        padding: 80px 0 4rem;
    }
    .hero-content {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
        gap: clamp(2rem, 4vw, 4rem);
    }

    /* --- Bento Grid --- */
    .bento-grid {
        grid-auto-rows: clamp(220px, 16vw, 280px);
        gap: clamp(0.75rem, 1.2vw, 1.25rem);
    }

    /* --- Plans Grid --- */
    .plans-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
    }

    /* --- Legacy Section --- */
    .legacy-inner {
        gap: clamp(2.5rem, 4vw, 4rem);
    }

    /* --- Shop Feature --- */
    .shop-feature-layout {
        gap: clamp(2rem, 5vw, 5rem);
    }

    /* --- Enroll Section --- */
    .enroll-inner {
        gap: clamp(2.5rem, 4vw, 5rem);
    }

    /* --- Services on Services Page --- */
    .service-block-grid,
    .admin-block-grid,
    .services-intro-inner {
        gap: clamp(3rem, 5vw, 7rem);
    }
}

/* ======================================================
   BREAKPOINT 2: TABLET (769px – 1024px)
   Goal: Two columns where possible, start stacking
   major grids, reduce hero padding.
   ====================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* --- Container --- */
    .container {
        width: 94%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* --- Header: Switch to Mobile Toggle --- */
    .desktop-only { display: none; }
    .mobile-toggle { display: block; }
    .mobile-cta-link { display: block; }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #1A1A1A;
        padding: 1.25rem 1.5rem 1.75rem;
        gap: 1rem;
        border-bottom: 2px solid var(--color-bronze);
        box-shadow: 0 12px 24px rgba(0,0,0,0.3);
        z-index: 999;
    }
    .nav-links.active { display: flex; }

    .nav-link {
        color: #E0D8CC !important;
        font-size: 1rem;
        padding: 0.5rem 0;
    }
    .nav-item { width: 100%; }
    .nav-item .chevron { display: none; }

    /* Flatten dropdowns in the mobile menu */
    .dropdown-menu {
        position: static !important;  /* Override the fixed position */
        transform: none !important;
        top: auto !important;
        left: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: none;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        width: 100%;
        padding: 0.25rem 0 0.5rem 1rem;
        pointer-events: auto !important;
    }
    .dropdown-menu a {
        font-size: 0.9rem !important;
        color: rgba(224, 216, 204, 0.7) !important;
        padding: 0.5rem 0 !important;
    }

    /* --- Top Bar --- */
    .top-bar-content {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
    .top-emergency, .top-socials-email { justify-content: center; }

    /* --- Page Hero (subpages) --- */
    .page-hero { height: auto; min-height: 240px; }
    .page-hero-bg { width: 100%; opacity: 0.2; clip-path: none; }
    .page-hero-ribbon-gold, .page-hero-ribbon-dark { display: none; }
    .page-hero-text {
        align-items: center;
        text-align: center;
        max-width: 100%;
        padding-right: 0;
    }

    /* --- Home Hero --- */
    .hero {
        padding: 80px 0 4rem;
        min-height: 85vh;
    }
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    .hero-right { justify-content: center; }
    .hero-cta-row { justify-content: center; }
    .promise-box { max-width: 90%; text-align: left; margin: 0 auto; }

    /* --- Quick Links --- */
    .link-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .quick-links { padding: 3.5rem 0; }

    /* --- Services Bento --- */
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: clamp(220px, 20vw, 280px);
    }
    .bento-tall { grid-row: auto; }
    .bento-cta { grid-column: 1 / -1; }

    /* --- Plans Grid --- */
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .plan-card.popular { transform: scale(1); }

    /* --- Plans page comparison table --- */
    .comparison-container { overflow-x: auto; }

    /* --- Plan Toggle Container --- */
    .plan-toggle-container { flex-wrap: wrap; }

    /* --- CTA Banner --- */
    .cta-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    .cta-banner-actions { justify-content: center; flex-wrap: wrap; }

    /* --- Why Grid --- */
    .why-grid { grid-template-columns: repeat(2, 1fr); }

    /* --- Contact Grid --- */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* --- Legacy Section --- */
    .legacy-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .legacy-image { height: 320px; }
    .legacy-image::after { display: none; }

    /* --- Enroll Form --- */
    .enroll-inner {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* --- Services Page --- */
    .services-intro-inner,
    .service-block-grid,
    .admin-block-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .service-block-grid.reverse { direction: ltr; }
    .service-features { grid-template-columns: 1fr 1fr; }
    .infra-cards { grid-template-columns: 1fr; }

    /* --- Footer Grid --- */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

    /* --- Shop Feature --- */
    .shop-feature-layout {
        flex-direction: column;
        gap: 3rem;
        text-align: center;
    }
    .featured-specs { align-items: center; }

    /* --- Section Spacing --- */
    .plans-section { padding: 80px 0; }
    .services-bento { padding: 80px 0; }
    .why-us-section { padding: 80px 0; }
    .legacy-section { padding: 80px 0; }
    .contact-section { padding: 80px 0; }
    .cta-banner { padding: 2.5rem 0; }

    /* --- Pay Portal --- */
    .pay-portal-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* --- Plans Inclusive --- */
    .plans-inclusive {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }
    .plans-inclusive .tags { justify-content: center; }
}

/* ======================================================
   BREAKPOINT 3: MOBILE (max-width: 768px)
   Goal: Full single column, larger tap targets,
   readable font sizes.
   ====================================================== */
@media screen and (max-width: 768px) {

    /* --- Container --- */
    .container {
        width: 96%;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* --- Global Section Spacing --- */
    .plans-section,
    .services-bento,
    .why-us-section,
    .legacy-section,
    .contact-section,
    .quick-links,
    .shop-feature-section,
    .comparison-section,
    .enroll-section-v2 {
        padding: 3rem 0;
    }
    .cta-banner { padding: 2rem 0; }

    /* --- Global Typography --- */
    .section-title { font-size: clamp(1.35rem, 5vw, 1.7rem); }
    h1 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
    h2 { font-size: clamp(1.2rem, 4.5vw, 1.65rem); }
    h3 { font-size: clamp(1rem, 3.5vw, 1.2rem); }

    /* --- Header --- */
    .desktop-only { display: none; }
    .mobile-toggle { display: block; }
    .mobile-cta-link { display: block; }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #1A1A1A;
        padding: 1.25rem 1.5rem 1.75rem;
        gap: 1rem;
        border-bottom: 2px solid var(--color-bronze);
        box-shadow: 0 12px 24px rgba(0,0,0,0.3);
        z-index: 999;
    }
    .nav-links.active { display: flex; }

    .nav-link {
        color: #E0D8CC !important;
        font-size: 1.05rem;
        padding: 0.6rem 0;
    }
    .nav-item { width: 100%; }
    .nav-item .chevron { display: none; }

    /* Flatten dropdowns */
    .dropdown-menu {
        position: static !important;  /* Override the fixed position */
        transform: none !important;
        top: auto !important;
        left: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: none;
        backdrop-filter: none;
        border: none;
        box-shadow: none;
        width: 100%;
        padding: 0.25rem 0 0.5rem 1rem;
        pointer-events: auto !important;
    }
    .dropdown-menu a {
        font-size: 0.95rem !important;
        color: rgba(224, 216, 204, 0.7) !important;
        padding: 0.6rem 0 !important;
    }

    /* --- Top Bar --- */
    .top-bar-content {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
    .top-emergency, .top-socials-email { justify-content: center; }

    /* --- Page Hero (subpages) --- */
    .page-hero {
        height: auto;
        min-height: 200px;
        margin-top: 60px;
    }
    .page-hero-bg { width: 100%; opacity: 0.15; clip-path: none; }
    .page-hero-ribbon-gold, .page-hero-ribbon-dark { display: none; }
    .page-hero-content { justify-content: center; }
    .page-hero-text {
        align-items: center;
        text-align: center;
        max-width: 100%;
        padding-right: 0;
        padding: 2rem 1rem;
    }

    /* --- Home Hero --- */
    .hero {
        padding: 5rem 0 3.5rem;
        min-height: auto;
    }
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    .hero-left { order: 1; }
    .hero-right { order: 2; justify-content: center; }
    .hero-cta-row { justify-content: center; flex-wrap: wrap; gap: 0.75rem; }
    .promise-box { max-width: 100%; text-align: left; }

    /* --- Quick Links --- */
    .link-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .quick-links { padding: 2.5rem 0; }

    /* --- Services Bento --- */
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
        gap: 0.75rem;
    }
    .bento-tall { grid-row: auto; }
    .bento-cta { grid-column: 1 / -1; }

    /* --- Plans Grid --- */
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    .plan-card.popular { transform: scale(1); }

    /* --- CTA Banner --- */
    .cta-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }
    .cta-banner-text h2 { font-size: 1.25rem; }
    .cta-banner-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    /* --- Why Grid --- */
    .why-grid { grid-template-columns: 1fr; }

    /* --- Contact Grid --- */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* --- Legacy Section --- */
    .legacy-inner { grid-template-columns: 1fr; gap: 2rem; }
    .legacy-image { height: 240px; }
    .legacy-image::after { display: none; }

    /* --- Footer --- */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

    /* --- Shop Feature --- */
    .shop-feature-layout {
        flex-direction: column;
        gap: 2.5rem;
        text-align: center;
    }
    .featured-title { font-size: clamp(1.4rem, 5vw, 2rem); }
    .featured-desc { font-size: 0.95rem; }
    .featured-specs { align-items: center; }

    /* --- Enroll Section --- */
    .enroll-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .enroll-left h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); }
    .enroll-form-body { padding: 2rem 1.5rem; }
    .enroll-form-top,
    .step-indicator,
    .enroll-form-foot { padding-left: 1.5rem; padding-right: 1.5rem; }
    .ef-row { grid-template-columns: 1fr; gap: 1rem; }

    /* --- Advanced Form --- */
    .form-grid { grid-template-columns: 1fr; }
    .advanced-form { padding: 1.5rem; }
    .enroll-card { padding: 2.5rem 1.5rem; }

    /* --- Services Page --- */
    .services-intro-inner,
    .service-block-grid,
    .admin-block-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .service-block-grid.reverse { direction: ltr; }
    .service-features { grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
    .infra-cards { grid-template-columns: 1fr; }
    .service-block { padding: 3.5rem 0; }
    .admin-block { padding: 3.5rem 0; }

    /* --- Plans Inclusive --- */
    .plans-inclusive {
        flex-direction: column;
        text-align: center;
        gap: 1.25rem;
    }
    .plans-inclusive .tags {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* --- Comp Table --- */
    .comparison-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* --- Pay Portal --- */
    .pay-portal-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* --- Obit Grid --- */
    .obit-grid { grid-template-columns: 1fr; gap: 2rem; }

    /* --- Plans page: comp header --- */
    .comp-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ======================================================
   BREAKPOINT 4: SMALL PHONE (max-width: 480px)
   Goal: Full single column with generous spacing,
   stacked CTAs, readable text.
   ====================================================== */
@media screen and (max-width: 480px) {

    /* --- Container --- */
    .container {
        width: 100%;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* --- Typography --- */
    .section-title { font-size: 1.35rem; line-height: 1.25; }
    .hero-title { font-size: clamp(1.35rem, 7vw, 1.7rem); }

    /* --- Hero --- */
    .hero { padding: 4.5rem 0 3rem; }
    .hero-cta-row { flex-direction: column; width: 100%; }
    .hero-cta-row .btn { width: 100%; text-align: center; }

    /* --- Quick Links: single col --- */
    .link-grid { grid-template-columns: 1fr; gap: 1rem; }
    .link-card { padding: 1.5rem 1.25rem; }

    /* --- Bento: single col --- */
    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
        gap: 0.75rem;
    }
    .bento-cta { grid-column: 1; padding: 1.75rem 1.25rem; }
    .bento-text { padding: 1.5rem; }

    /* --- Plans Grid: single col --- */
    .plans-grid { grid-template-columns: 1fr; gap: 140px; }

    /* --- CTA Banner --- */
    .cta-banner-actions {
        flex-direction: column;
        width: 100%;
    }
    .cta-banner-actions .btn {
        width: 100%;
        text-align: center;
    }
    .cta-banner-text h2 { font-size: 1.15rem; }

    /* --- Footer: single col --- */
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

    /* --- Plans Inclusive: single col --- */
    .plans-inclusive { flex-direction: column; align-items: flex-start; }
    .plans-inclusive .tags { flex-direction: column; align-items: flex-start; }

    /* --- Plans Page Toggle --- */
    .pricing-selector { width: 100%; justify-content: center; }

    /* --- Why Grid: single col --- */
    .why-grid { grid-template-columns: 1fr; }

    /* --- Service Features in single col --- */
    .service-features { grid-template-columns: 1fr; }

    /* --- Form rows single col --- */
    .ef-row, .form-grid { grid-template-columns: 1fr; gap: 1rem; }
    .enroll-form-body { padding: 1.5rem 1rem; }
    .enroll-form-foot { flex-direction: column; gap: 1rem; }
    .enroll-card { padding: 2rem 1rem; }
    .advanced-form { padding: 1.25rem; }

    /* --- Shop Feature --- */
    .featured-title { font-size: 1.4rem; }
    .shop-cta-wrap { display: flex; flex-direction: column; gap: 0.75rem; }

    /* --- Obit Grid --- */
    .obit-grid { grid-template-columns: 1fr; }

    /* --- Comp Header --- */
    .comp-header { gap: 0.75rem; }

    /* --- Section spacing --- */
    .plans-section,
    .services-bento,
    .why-us-section,
    .legacy-section,
    .contact-section { padding: 2.5rem 0; }

    .quick-links { padding: 2rem 0; }
    .shop-feature-section { padding: 3rem 0; }
    .comparison-section { padding: 3rem 0; }
}