/* Mobile navigation and shared layout. Desktop rules remain in their own stylesheets. */
.mobile-quick-nav, .mobile-menu-backdrop, .navbar-toggle-label { display: none; }
.home-project-title { color: inherit; text-decoration: none; }
.home-project-title:hover { color: #ff94a3; }

@media (max-width: 1199px) {
    .site-header .navbar-toggler { display: flex; align-items: center; gap: 9px; min-height: 44px; border-radius: 10px; }
    .navbar-toggle-label { display: inline; font-size: 13px; }
    .site-header .navbar-collapse {
        position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
        max-height: calc(100dvh - 100px); padding: 12px;
        background: #080808; border: 1px solid #ffffff24; border-radius: 16px;
        box-shadow: 0 20px 60px #000b; overscroll-behavior: contain;
    }
    .site-header .navbar-collapse:not(.show):not(.collapsing) { padding: 0; border: 0; }
    .site-header .nav-link { min-height: 48px; font-size: 16px; border-radius: 9px; }
    .site-header .nav-link.active { background: #e9425912; }
    .site-header .nav-link:not(.social-link)::before { display: none; }
    .site-header .dropdown-menu { padding: 4px 8px; border: 0; border-left: 1px solid #ffffff24; border-radius: 0; background: transparent; }
    .site-header .dropdown-item { min-height: 46px; display: flex; align-items: center; font-size: 14px; line-height: 1.5; }
    .site-header .social-nav { justify-content: space-around; gap: 4px; }
    .site-header .social-link { width: 44px; height: 44px; min-height: 44px; padding: 10px !important; }
    .site-header .social-link svg { width: 21px; height: 21px; }
    .site-header .navbar-toggler-icon { width: 20px; height: 18px; position: relative; background: linear-gradient(#ddd,#ddd) center / 100% 2px no-repeat; }
    .site-header .navbar-toggler-icon::before, .site-header .navbar-toggler-icon::after { content: ''; position: absolute; width: 100%; height: 2px; left: 0; background: #ddd; transition: transform .2s, top .2s; }
    .site-header .navbar-toggler-icon::before { top: 1px; }
    .site-header .navbar-toggler-icon::after { top: 15px; }
    .site-header .navbar-toggler[aria-expanded=true] .navbar-toggler-icon { background: none; }
    .site-header .navbar-toggler[aria-expanded=true] .navbar-toggler-icon::before { top: 8px; transform: rotate(45deg); }
    .site-header .navbar-toggler[aria-expanded=true] .navbar-toggler-icon::after { top: 8px; transform: rotate(-45deg); }
    html.mobile-navigation-lock { overflow: hidden; }
    body.mobile-nav-open { position: fixed; top: var(--navigation-scroll-top, 0px); width: 100%; }
    .mobile-nav-open .site-header { position: fixed; top: 0; width: 100%; --header-morph: 0; }
    .mobile-nav-open .mobile-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 1029; border: 0; background: #000a; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
}

@media (max-width: 767px) {
    html { scroll-padding-top: 88px; scrollbar-gutter: auto; }
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    .site-header { height: calc(65px + env(safe-area-inset-top, 0px)); --header-full-height: calc(64px + env(safe-area-inset-top, 0px)); --header-island-height: calc(56px + env(safe-area-inset-top, 0px)); --header-full-inset: 16px; --header-island-inset: 14px; --header-full-logo: 88px; }
    .site-header .navbar { padding-top: calc(7px - 4px * var(--header-morph) + env(safe-area-inset-top, 0px)); padding-bottom: calc(7px - 4px * var(--header-morph)); }
    .site-header .navbar-brand { margin-right: 12px; min-height: 44px; display: flex; align-items: center; }
    .site-header .navbar-collapse { max-height: calc(100dvh - 155px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); padding: 10px; }
    .site-header .nav-link { animation: none; }
    .mobile-quick-nav {
        display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); position: fixed;
        bottom: 0; left: 0; right: 0; z-index: 1031;
        padding: 7px max(10px, env(safe-area-inset-right, 0px)) calc(7px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
        border-top: 1px solid #ffffff24; background: #080808f2;
        -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
        box-shadow: 0 -8px 28px #0006;
    }
    .mobile-quick-nav :is(a,button) { min-width: 0; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 5px 2px; border: 0; border-radius: 10px; background: transparent; color: #bbb; font: inherit; font-size: 11px; line-height: 1.3; text-decoration: none; }
    .mobile-quick-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .mobile-quick-nav :is([aria-current=page],[aria-expanded=true]) { color: #ff94a3; background: #e9425915; }
    .mobile-quick-nav :is(a,button):focus-visible { outline: 2px solid #ff94a3; outline-offset: -2px; }
    .page-container, .home-projects .container-xxl, footer .container-xxl { padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
    .section-page { padding-block: 30px 48px; }
    .page-heading { margin-bottom: 26px; }
    .section-page h1 { font-size: clamp(28px, 7.5vw, 38px); line-height: 1.2; margin-block: 8px 14px; }
    .section-page .page-lead { font-size: 16px; line-height: 1.65; }
    .section-page .eyebrow { font-size: 10px; line-height: 1.6; letter-spacing: .1em; }
    .section-page .content-block { border-radius: 14px; padding: 18px; }
    .site-main .link-button { min-height: 46px; font-size: 14px; }
    .site-main :is(input:not([type=checkbox]):not([type=radio]),textarea,select) { font-size: 16px; }
    .mgn-select-button { min-height: 46px; font-size: 14px; }
    .mgn-select-menu { font-size: 14px; }
    .mgn-select-option { min-height: 46px; }
    .site-main .main-welcome { min-height: min(600px, calc(100svh - 137px)); }
    .main-welcome .hero-inner { min-height: inherit; padding: 48px 24px; }
    .main-welcome .hero-copy h1 { white-space: normal; font-size: clamp(30px, 7.6vw, 46px); line-height: 1.18; text-wrap: balance; margin-bottom: 22px; }
    .main-welcome .hero-description { font-size: 18px; line-height: 1.55; text-wrap: balance; margin-bottom: 30px; }
    .main-welcome .hero-actions { top: 0; margin-top: 40px; }
    .main-welcome .hero-button { max-width: 340px; min-height: 52px; padding: 16px 20px; font-size: 14px; border-radius: 10px; }
    .main-welcome::before { inset: -10% -38%; background-position: 55% center; -webkit-mask-image: linear-gradient(#000 60%, transparent 92%); mask-image: linear-gradient(#000 60%, transparent 92%); }
    .site-main .main-welcome > .welcome { background: linear-gradient(#0004 0%, #0009 70%, transparent); }
    .home-projects > .darkening { padding-block: 34px 48px !important; }
    .section-title { font-size: 30px; line-height: 1.25; margin-bottom: 26px; }
    .home-projects .section-eyebrow { font-size: 10px; }
    .home-projects .d-flex:has(> .card-main) { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 10px; align-items: start; }
    .home-projects .card-main { width: 100%; min-width: 0; margin: 0; }
    .home-projects .card h4 { font-size: 13px; line-height: 1.5; margin: 10px 0 0; -webkit-line-clamp: 4; overflow-wrap: anywhere; }
    .home-projects .home-project-title { display: flex; align-items: center; min-height: 44px; }
    .home-projects .card-image-container { border-radius: 12px; }
    .home-projects .project-cover > .project-card-stats { bottom: 5px; right: 4px; left: 4px; max-width: none; justify-content: center; gap: 3px; padding: 5px 3px; }
    .home-projects .project-cover :is(.project-voters,.project-views) { font-size: 10px; gap: 3px; }
    .home-projects .project-cover :is(.project-voters,.project-views) svg { width: 12px; height: 12px; }
    .home-projects .project-cover .project-rating-badge { gap: 3px; }
    .home-projects .project-cover .project-rating-badge strong { font-size: 10px; }
    .home-projects .project-cover .project-rating-badge strong small { display: none; }
    .home-projects .project-cover .project-rating-badge > span:first-child { font-size: 12px; }
    .home-projects .link.mt-1 { margin-top: 28px !important; }
    .home-projects .row { margin-top: 48px !important; row-gap: 18px; }
    .home-projects .row > .col-lg-4 { order: 0; }
    .home-projects .row > .col-lg-8 { order: 1; }
    .home-projects .row h1 { font-size: 26px; line-height: 1.3; margin-bottom: 18px; }
    .home-projects .content-block { padding: 18px; }
    .home-projects .content-block p { font-size: 16px; line-height: 1.65; }
    .home-projects .content-block .link { margin-top: 22px; }
    .home-projects .content-block .link-button { width: 100%; }
    .site-main .carousel-control-prev, .site-main .carousel-control-next { min-width: 44px; min-height: 44px; }
    .site-main .carousel-indicators [data-bs-target] { position: relative; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: transparent; }
    .site-main .carousel-indicators [data-bs-target]::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; border-radius: 5px; background: #aaa; transform: translate(-50%, -50%); }
    .site-main .carousel-indicators .active::after { width: 18px; background: #ff8a9a; }
    .home-projects .content-block.project-cover { display: flex; flex-direction: column; }
    .home-projects .content-block.project-cover > .carousel { order: 0; width: 100%; }
    .home-projects .content-block.project-cover > .project-card-stats { position: static; order: 1; width: fit-content; max-width: 100%; align-self: flex-end; margin-top: 10px; padding: 7px 9px; }
    .image-modal .modal-dialog { margin-inline: 8px; }
    .image-modal .modal-content { padding: 6px; }
    .image-modal-close { width: 46px; height: 46px; }
    footer { padding-block: 30px 24px; }
    footer .d-inline-flex { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 4px 12px; }
    footer a { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1.5; margin: 0 !important; }
    .reveal-ready.reveal-running .page-reveal { --reveal-y: 12px; --reveal-scale: 1; --reveal-duration: 420ms; transition-delay: 0ms; }
    .site-main img.image-fade.image-loaded { transition-duration: 400ms; }
}

@media (max-width: 359px) {
    .main-welcome .hero-inner { padding-inline: 18px; }
    .home-projects .d-flex:has(> .card-main) { gap: 16px 8px; }
    .home-projects .card h4 { font-size: 12px; }
}

@media (max-width: 767px) and (max-height: 520px) and (orientation: landscape) {
    .site-main .main-welcome { min-height: 420px; }
    .site-header .navbar-collapse { max-height: calc(100dvh - 150px); }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .navbar-toggler-icon::before, .site-header .navbar-toggler-icon::after { transition: none; }
}