/* ================================================================
   KDCR PARTNERS — MOBILE CSS
   Overrides to existing styles are inside @media (max-width: 767px).
   New elements (hamburger, mobile menu) have base rules outside
   the query since they don't exist in any desktop stylesheet.
================================================================ */

/* ── Hamburger button: hidden on desktop, shown via media query ── */
.kdcr-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-direction: column;
    gap: 5px;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.kdcr-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #0f1e33;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 1px;
}
.kdcr-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kdcr-menu-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.kdcr-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav menu: hidden by default, shown when .is-open ── */
.kdcr-mobile-menu {
    display: none;
    background: #ffffff;
    border-top: 1px solid #cdd8e6;
}
.kdcr-mobile-menu.is-open {
    display: block;
}
.kdcr-mobile-menu a {
    display: block;
    padding: 0.875rem 1.5rem;
    color: #5a7a9e !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none !important;
    border-bottom: 1px solid #cdd8e6;
    font-family: "minion-pro", Georgia, serif !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
}
.kdcr-mobile-menu a:last-child { border-bottom: none; }
.kdcr-mobile-menu a:active { color: #2e4e78 !important; background: #edf2f7; }


/* ================================================================
   MOBILE-ONLY OVERRIDES  max-width: 767px
================================================================ */

@media (max-width: 767px) {

    /* ── Global ── */
    body { overflow-x: hidden; }

    /* Minimum 1rem horizontal padding on all content wrappers */
    section > .max-w-\[1600px\],
    footer > .max-w-\[1600px\],
    nav > .max-w-\[1600px\] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ── 1. Nav: show hamburger, hide desktop-only elements ── */
    .kdcr-menu-toggle {
        display: flex !important;
    }
    /* Hide always-visible desktop nav link groups (about/advocacy/resources pages) */
    .kdcr-nav-links-desktop {
        display: none !important;
    }
    /* Hide stray always-visible links on team/bio pages */
    .kdcr-nav-stray {
        display: none !important;
    }

    /* ── 2. Stats rows: force 2-column grid, centered ── */
    .kdcr-stats-col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.5rem !important;
    }
    .kdcr-stats-col .stat-block {
        border-left: none !important;
        border-top: 2px solid #c2304a !important;
        padding-left: 0 !important;
        padding-top: 0.75rem !important;
        text-align: center !important;
    }

    /* ── 4. Culture photo bento grid: single column ── */
    .kdcr-culture-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 0.5rem !important;
    }
    .kdcr-culture-grid > div {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: 4/3 !important;
        height: auto !important;
    }
    .kdcr-culture-grid > div img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ── 5. Client logo marquee: no horizontal bleed ── */
    .kdcr-marquee-outer {
        overflow-x: hidden !important;
    }

    /* ── 6. Hero headline: cap at 2rem ── */
    .kdcr-hero-headline {
        font-size: 2rem !important;
        line-height: 1.05 !important;
    }
    .kdcr-hero-headline span {
        font-size: 2rem !important;
    }

    /* ── 7. Principals headshot strip: 2 columns ── */
    .kdcr-headshot-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── 9. CTA button pairs: stack vertically, full width ── */
    .kdcr-cta-buttons {
        flex-direction: column !important;
    }
    .kdcr-cta-buttons > a,
    .kdcr-cta-buttons > button {
        width: 100% !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* ── 10. Team page: touch device fixes ── */
    /* Disable hover-only image swap (touch can't hover) */
    .team-card [class*="group-hover:opacity-0"] {
        opacity: 1 !important;
    }
    .team-card [class*="group-hover:opacity-100"] {
        opacity: 0 !important;
    }
    /* Show overlay subtly so cards look tappable */
    .team-card .card-overlay {
        opacity: 0.3 !important;
    }

    /* ── 11. Bio pages: reorder sections on mobile ── */
    /*
     * display:contents flattens the col wrappers so their children
     * participate directly in the outer flex container's order.
     * This is only applied on mobile; desktop is unaffected.
     */
    .bio-layout {
        display: flex !important;
        flex-direction: column !important;
    }
    .bio-layout .bio-left-col,
    .bio-layout .bio-right-col,
    .bio-layout .bio-right-col .photo-sticky {
        display: contents !important;
    }
    /* Order: 1=photo, 2=credentials, 3=bio text, 4=DL headshot, 5=action links */
    .bio-layout .bio-photo-wrap {
        order: 1;
        max-width: 280px;
        width: 100%;
        margin: 0 auto 1.25rem;
    }
    .bio-layout .bio-creds {
        order: 2;
    }
    .bio-layout .bio-text {
        order: 3;
    }
    .bio-layout .bio-dl-headshot {
        order: 4;
        min-height: 44px;
        display: flex !important;
        align-items: center !important;
        margin-top: 1rem;
    }
    .bio-layout .bio-actions {
        order: 5;
        flex-direction: column !important;
    }
    .bio-layout .bio-actions a {
        min-height: 44px;
        display: flex !important;
        align-items: center !important;
    }

    /* Bio credentials grid: single column (standard: parent has bio-creds; v2: div IS the grid) */
    .bio-creds > .grid,
    .bio-creds.grid {
        grid-template-columns: 1fr !important;
    }

    /* ── 12. Resources grid: single column ── */
    .kdcr-resources-grid {
        grid-template-columns: 1fr !important;
    }
    .kdcr-resources-grid .kdcr-dl-link {
        min-height: 44px;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* ── About hero: ensure text block + stats don't overflow ── */
    .kdcr-hero-body {
        flex-direction: column !important;
    }
    .kdcr-hero-body > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── 13. Practice area flip-cards: static mini card on mobile ── */
    /* The inline <style> in index.html already sets position:static on
       both faces so they stack. We reshape them into a clean icon+info card. */
    .flip-card {
        height: auto !important;
    }
    .flip-card-inner {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        position: static !important;
    }
    /* Front: compact horizontal row — small icon left, title right */
    .flip-card-front {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.875rem !important;
        padding: 0.875rem 1rem 0.625rem !important;
    }
    .flip-card-front img {
        width: 2rem !important;
        height: 2rem !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
    }
    /* The inner div that holds the divider + title */
    .flip-card-front > div:last-child {
        align-items: flex-start !important;
        margin-top: 0 !important;
        width: auto !important;
    }
    /* Hide decorative crimson divider line */
    .flip-card-front > div:last-child > div {
        display: none !important;
    }
    .flip-card-front h3 {
        font-size: 0.9375rem !important;
        text-align: left !important;
        margin-bottom: 0 !important;
    }
    /* Back: description + explore, connected below the front */
    .flip-card-back {
        padding: 0.375rem 1rem 1rem !important;
        border-top: none !important;
    }
    /* Hide the duplicate title in the back */
    .flip-card-back > div > h3 {
        display: none !important;
    }
    .flip-card-back > div > p {
        font-size: 0.8125rem !important;
        margin-bottom: 0.625rem !important;
    }

}