/*
 * Mobile-first layout layer for the law-firm theme.
 * Loaded after page-level styles so desktop markup can be meaningfully
 * rearranged on small screens without changing the desktop presentation.
 */

@media (max-width: 768px) {
    :root {
        --mobile-gutter: 16px;
        --mobile-section-space: 52px;
    }

    html { scroll-padding-top: 70px; }

    body {
        overflow-x: clip;
        padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }

    img { max-width: 100%; }

    /* Navigation: a compact header and an operable, scrollable menu. */
    .navbar-modern .navbar-container,
    .navbar .container {
        height: 64px;
        padding: 0 var(--mobile-gutter);
    }

    .brand-icon,
    .logo-seal { width: 36px; height: 36px; }

    .brand-text img,
    .logo-text { height: 23px; max-width: 210px; object-fit: contain; }

    .navbar-menu,
    .nav-links {
        top: 64px;
        left: 10px;
        right: 10px;
        max-height: calc(100vh - 82px);
        overflow-y: auto;
        padding: 10px;
        gap: 2px;
        border: 1px solid rgba(15, 23, 42, .08);
        border-radius: 14px;
    }

    .nav-item,
    .nav-links a {
        min-height: 46px;
        padding: 12px 14px;
        text-align: left;
        border-radius: 10px;
    }

    /* Shared page rhythm. */
    .hero-new,
    .about-new,
    .services-new,
    .team-new,
    .cases-new,
    .knowledge-new,
    .services-page,
    .team-page,
    .about-page-new,
    .cases-showcase,
    .knowledge-showcase,
    .contact-showcase,
    .case-detail-showcase,
    .knowledge-detail-page {
        padding-top: var(--mobile-section-space) !important;
        padding-bottom: var(--mobile-section-space) !important;
    }

    .hero-container,
    .about-container,
    .services-container,
    .team-container,
    .cases-container,
    .knowledge-container,
    .services-page-container,
    .team-page-container,
    .cases-showcase-container,
    .knowledge-showcase-container,
    .case-detail-container,
    .contact-showcase-container,
    .contact-map-container {
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    .section-title-new,
    .services-title,
    .team-page-title,
    .about-title,
    .cases-page-title,
    .knowledge-page-title,
    .contact-title {
        font-size: 28px !important;
        line-height: 1.3;
        letter-spacing: -.02em;
    }

    .section-description,
    .services-desc,
    .team-subtitle,
    .about-subtitle,
    .cases-page-desc,
    .knowledge-page-desc,
    .contact-subtitle {
        font-size: 15px !important;
        line-height: 1.75;
    }

    /* Home: words and action come first; decorative desktop composition does not. */
    .hero-new {
        min-height: 0 !important;
        padding-top: 82px !important;
        padding-bottom: 44px !important;
    }

    .hero-container {
        display: flex !important;
        flex-direction: column;
        gap: 0 !important;
    }

    .hero-content-new { order: 1; text-align: left; }
    .hero-visual { display: none !important; }

    .hero-badge { margin-bottom: 14px; }
    .hero-title { margin-bottom: 14px; font-size: 32px !important; line-height: 1.25; }
    .hero-description { font-size: 15px; line-height: 1.8; }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin: 24px 0;
    }

    .hero-stats .stat-item {
        min-width: 0;
        padding: 10px 6px;
        border: 1px solid rgba(75, 91, 211, .1);
        border-radius: 10px;
        background: rgba(255, 255, 255, .7);
        text-align: center;
    }

    .hero-stats .stat-number { display: block; font-size: 20px !important; line-height: 1.1; }
    .hero-stats .stat-label { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; }
    .hero-stats .stat-divider { display: none !important; }

    .hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hero-btn { width: auto !important; min-height: 48px; padding: 0 12px; font-size: 14px; }

    .about-container { display: flex !important; flex-direction: column; gap: 26px !important; }
    .about-content-section { order: 1; }
    .about-image-section { order: 2 !important; }
    .about-image-wrapper { border-radius: 16px; }
    .about-slider { aspect-ratio: 16 / 10; }
    .about-slide img { height: 100%; object-fit: cover; }
    .about-content-card { padding: 22px !important; border-radius: 16px; }
    .about-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .highlight-divider { display: none !important; }

    /* About page: the current page uses about-top/about-image-card markup. */
    .about-page-new { padding-top: 96px !important; }

    .about-page-new > .container {
        padding-left: var(--mobile-gutter) !important;
        padding-right: var(--mobile-gutter) !important;
    }

    .about-top {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 24px !important;
        margin-bottom: 28px !important;
    }

    .about-top-left { gap: 14px; }
    .about-top-right { order: 2; }
    .about-top-left { order: 1; }

    .about-motto {
        padding: 8px 13px;
        font-size: 13px;
    }

    .about-highlights {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        padding: 14px 8px;
        border: 1px solid rgba(75, 91, 211, .1);
        border-radius: 14px;
        background: rgba(255, 255, 255, .8);
    }

    .highlight-item {
        min-width: 0;
        align-items: center;
        text-align: center;
        gap: 3px;
    }

    .highlight-number { font-size: 20px; line-height: 1.15; }
    .highlight-label { font-size: 10px; line-height: 1.35; }

    .about-image-card { padding: 8px; border-radius: 16px; }
    .about-image-card img { border-radius: 10px; }

    .about-content-card {
        padding: 20px !important;
        margin-bottom: 24px !important;
        font-size: 15px;
        line-height: 1.85;
    }

    .about-feature-grid { gap: 12px; }
    .about-feature-card {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        padding: 16px;
        border-radius: 16px;
    }
    .about-feature-icon {
        grid-row: span 2;
        width: 46px;
        height: 46px;
        margin: 0;
        border-radius: 13px;
    }
    .about-feature-icon svg { width: 22px; height: 22px; }
    .about-feature-card h4 { margin: 0 0 3px; font-size: 16px; }
    .about-feature-card p { font-size: 13px; line-height: 1.55; }

    /* Home service cards become compact information rows. */
    .services-grid-new { gap: 12px !important; }

    .service-card-new {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "icon summary"
            "icon action";
        align-items: start;
        gap: 6px 14px;
        min-height: 0 !important;
        padding: 18px !important;
        border-radius: 14px;
    }

    .service-card-new .service-icon-new { grid-area: icon; width: 46px; height: 46px; margin: 0; }
    .service-card-new h3 { grid-area: title; margin: 2px 0 0; font-size: 17px; line-height: 1.45; }
    .service-card-new p {
        grid-area: summary;
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 13px;
        line-height: 1.65;
    }
    .service-card-new .service-link { grid-area: action; margin-top: 2px; font-size: 13px; }

    /* Homepage team and cases use horizontal cards instead of tall desktop cards. */
    .team-grid-new,
    .cases-grid-new,
    .knowledge-grid-new { gap: 12px !important; }

    .team-card-new {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        padding: 14px !important;
        text-align: left;
        border-radius: 14px;
    }
    .team-image-wrapper { width: 78px; height: 78px; margin: 0; border-width: 2px; }
    .team-info-new { align-items: flex-start; gap: 4px; }
    .team-info-new h3 { font-size: 17px; }
    .team-call-btn { min-height: 36px; margin-top: 2px; padding: 7px 12px; }

    .case-card-new {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 144px;
        border-radius: 14px;
    }
    .case-image-new {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        min-height: 144px;
        aspect-ratio: auto;
        background: #fff;
    }
    .case-image-new img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
    .case-date-badge { top: 8px; right: 8px; padding: 4px 7px; font-size: 10px; }
    .case-content-new { gap: 7px; padding: 14px; }
    .case-category-tag { padding: 3px 7px; font-size: 10px; }
    .case-content-new h3 { font-size: 16px; line-height: 1.45; }
    .case-content-new p {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12px;
        line-height: 1.6;
    }
    .case-link { margin-top: 0; font-size: 13px; }

    .knowledge-card-new {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 8px 13px;
        padding: 18px !important;
        border-radius: 14px;
    }
    .knowledge-icon { grid-row: span 3; width: 42px; height: 42px; border-radius: 11px; }
    .knowledge-icon svg { width: 20px; height: 20px; }
    .knowledge-card-new h3 { font-size: 16px; line-height: 1.45; }
    .knowledge-card-new p {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 13px;
        line-height: 1.65;
    }
    .knowledge-link { margin-top: 0; font-size: 13px; }
    .team-view-all { margin-top: 24px; }
    .view-all-btn { width: 100%; justify-content: center; min-height: 48px; }

    /* Service list and service detail: one clear action per row, no desktop-height cards. */
    .services-intro { gap: 20px !important; }
    .services-intro-text { padding: 22px !important; border-radius: 16px; }
    .services-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .metric-item { min-width: 0; padding: 10px; }
    .services-grid-modern { gap: 12px !important; }
    .service-card-modern { min-height: 0 !important; padding: 17px !important; }
    .service-card-modern .service-meta { gap: 6px; }
    .services-bottom-cta { gap: 10px; padding: 20px; }

    .service-hero-v2 { padding-top: 80px !important; padding-bottom: 28px !important; }
    .service-v2-container { width: min(100% - 32px, 1280px) !important; }
    .service-hero-copy-v2 { padding: 22px 18px !important; border-radius: 16px; }
    .service-hero-copy-v2 h1 { font-size: 29px !important; }
    .service-trust-row-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .service-trust-row-v2 div { padding: 9px; border-radius: 10px; background: #f7f6fd; }
    .service-sidebar-v2 { gap: 10px; }
    .service-sidebar-v2 .service-sidebar-card-v2:not(.service-sidebar-contact-v2) { display: none; }
    .service-final-actions-v2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .service-final-actions-v2 a { min-width: 0; }

    /* Dedicated team page: make each person a readable identity row. */
    .team-page-new { padding-top: 40px !important; }
    .team-header { margin-bottom: 30px; }
    .team-subtitle { margin-bottom: 22px; }
    .team-notice { width: 100%; justify-content: flex-start; text-align: left; line-height: 1.55; }
    .team-grid { grid-template-columns: 1fr !important; gap: 12px; }
    .member-card {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 14px;
        padding: 15px !important;
        text-align: left;
        border-radius: 14px;
    }
    .member-avatar-wrap { grid-row: 1 / span 2; margin: 0; }
    .member-avatar-circle,
    .member-photo { width: 72px !important; height: 72px !important; }
    .member-initials { font-size: 30px; }
    .member-name { margin: 0; font-size: 17px; }
    .member-role { font-size: 13px; line-height: 1.55; }
    .team-cta { margin-top: 26px; }
    .cta-inner { align-items: stretch; gap: 18px; padding: 22px 18px; text-align: left; }
    .cta-right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cta-btn { justify-content: center; padding: 11px 8px; }

    /* Case and knowledge indexes: scan vertically with a stable thumbnail. */
    .cases-page-header,
    .knowledge-header { margin-bottom: 28px !important; }
    .cases-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .stat-box { width: auto !important; min-width: 0; padding: 10px 6px; }
    .stat-box .stat-icon { display: none; }
    .stat-box .stat-num { font-size: 18px; }
    .stat-box .stat-text { font-size: 11px; }
    .cases-grid-showcase,
    .knowledge-grid-showcase { gap: 12px !important; }
    .case-card-showcase {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        min-height: 160px;
        border-radius: 14px;
    }
    .case-image-container { min-height: 160px; height: 100%; aspect-ratio: auto; }
    .case-overlay { display: none; }
    .case-info { gap: 8px; padding: 14px; }
    .case-header { display: block; }
    .case-date { margin-top: 4px; font-size: 11px; }
    .case-title { font-size: 16px; line-height: 1.45; }
    .case-desc {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 12px;
        line-height: 1.6;
    }
    .case-footer { margin-top: auto; }
    .case-tag { font-size: 10px; }
    .case-link-arrow { width: 34px; height: 34px; }
    .knowledge-card-showcase { padding: 18px; border-radius: 14px; }
    .knowledge-card-showcase .card-header { margin-bottom: 10px; }
    .knowledge-card-showcase .card-icon { width: 38px; height: 38px; }
    .knowledge-card-showcase .card-icon svg { width: 19px; height: 19px; }
    .knowledge-card-showcase .card-title { font-size: 17px; line-height: 1.45; }
    .knowledge-card-showcase .card-content {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 13px;
        line-height: 1.65;
    }
    .knowledge-card-showcase .card-action { width: 100%; justify-content: space-between; }
    .pagination-bar { margin-top: 24px; }

    /* Reading pages: article is primary; the repeated recommendation sidebars are secondary. */
    .case-detail-showcase,
    .knowledge-detail-page { padding-top: 28px !important; }
    .case-detail-container,
    .knowledge-detail-container { padding-left: var(--mobile-gutter) !important; padding-right: var(--mobile-gutter) !important; }
    .case-content-area,
    .knowledge-detail-main { padding: 20px 17px !important; border-radius: 14px; }
    .case-detail-title,
    .knowledge-detail-header h1 { font-size: 25px !important; line-height: 1.45; }
    .case-detail-meta,
    .knowledge-detail-meta { gap: 8px 14px; flex-wrap: wrap; font-size: 12px; }
    .case-detail-content,
    .knowledge-detail-content { font-size: 16px !important; line-height: 1.85; }
    .case-navigation,
    .knowledge-detail-nav { margin-top: 24px; }
    .case-sidebar { gap: 12px; }
    .case-sidebar .sidebar-hot { display: none; }
    .knowledge-detail-side { position: static; gap: 12px; }
    .knowledge-detail-side .side-card:last-child { display: none; }
    .side-card,
    .sidebar-card { padding: 18px; border-radius: 14px; }

    /* Contact: put the two intent actions ahead of long explanatory blocks. */
    .contact-intro { margin-bottom: 24px; text-align: left; }
    .contact-chips { justify-content: flex-start; gap: 7px; }
    .contact-chips .chip { padding: 6px 9px; font-size: 11px; }
    .contact-cards { grid-template-columns: 1fr !important; gap: 10px; }
    .contact-card { padding: 16px !important; border-radius: 14px; }
    .contact-main-grid { gap: 16px; }
    .contact-form-panel,
    .contact-info-panel { padding: 20px 17px !important; border-radius: 14px; }
    .form-row { gap: 12px; }
    .form-group input,
    .form-group textarea { font-size: 16px; }
    .info-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .action-btn { justify-content: center; padding: 12px 8px; }
    .contact-map-section { padding-top: 0; }
    .map-card { border-radius: 14px; }
    .map-shell { min-height: 240px; }

    /* Footer and the fixed contact bar are part of the layout, not an overlay accident. */
    footer.footer,
    .footer-modern { padding-top: 42px; padding-bottom: 24px; }
    .footer-content { padding-left: var(--mobile-gutter); padding-right: var(--mobile-gutter); }
    .footer-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .footer-stat-item { min-width: 0; }
    .footer-stat-item strong { font-size: 17px; }
    .footer-stat-item span { font-size: 11px; }
    .floating-contact-bar {
        gap: 7px;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
    }
    .floating-btn { height: 50px; border-radius: 12px; }
    .floating-btn span { font-size: 12px; }
    .scroll-top-btn { right: 14px !important; bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width: 380px) {
    .hero-stats { gap: 5px; }
    .hero-stats .stat-item { padding: 8px 3px; }
    .hero-stats .stat-number { font-size: 18px !important; }
    .hero-stats .stat-label { font-size: 10px; }
    .hero-actions { grid-template-columns: 1fr; }
    .case-card-new,
    .case-card-showcase { grid-template-columns: 96px minmax(0, 1fr); }
    .case-image-new { min-height: 144px; }
    .case-image-container { min-height: 160px; }
    .cta-right,
    .info-actions { grid-template-columns: 1fr; }
}

/* The dedicated case archive needs a full-width visual first.  The compact
   horizontal treatment above belongs to the homepage cards only. */
@media (max-width: 768px) {
    /* The site navigation is fixed on small screens; leave clear space for
       the archive heading instead of allowing it to sit beneath the header. */
    .cases-showcase { padding-top: 92px !important; }

    .cases-grid-showcase {
        grid-template-columns: 1fr;
        gap: 16px !important;
    }
    .case-card-showcase {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        min-height: 0;
        border-radius: 16px;
    }
    .case-image-container {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }
    .case-image-container img { object-fit: cover; }
    .case-info { padding: 18px; gap: 11px; }
    .case-header { display: flex; flex-direction: column; gap: 8px; }
    .case-title { font-size: 18px; line-height: 1.5; }
    .case-date { align-self: flex-start; margin: 0; }
    .case-desc { -webkit-line-clamp: 3; font-size: 14px; }
}

/* Keep every primary archive landing page aligned beneath the fixed mobile
   navigation. Page-level desktop CSS must not decide the mobile start point. */
@media (max-width: 768px) {
    .about-page-new,
    .services-page,
    .team-page-new,
    .cases-showcase,
    .knowledge-showcase,
    .contact-showcase {
        padding-top: 92px !important;
    }
}

/* Shared breadcrumb: every primary landing page starts with the same left
   aligned path, independent of its heading alignment. */
@media (max-width: 768px) {
    .page-breadcrumb {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        margin: 0 0 16px;
        color: #64748b;
        font-size: 14px;
        line-height: 1.4;
        text-align: left;
    }
    .page-breadcrumb a {
        color: #3656d9;
        font-weight: 700;
        text-decoration: none;
    }
    .page-breadcrumb-divider { color: #a8b1c4; }
    .cases-page-header .page-breadcrumb,
    .knowledge-header .page-breadcrumb,
    .contact-intro .page-breadcrumb { text-align: left; }
}