/* Final device matrix layer.
   Loaded after all other CSS to normalize layout across phones, tablets, laptops, and wide desktops. */

:root {
    --oe-safe-x: max(10px, env(safe-area-inset-left));
    --oe-safe-right: max(10px, env(safe-area-inset-right));
    --oe-safe-bottom: max(10px, env(safe-area-inset-bottom));
}

.site-shell,
.container,
.site-main,
.main-content,
.sidebar,
.archive-main,
.archive-sidebar,
.page-content,
.contact-section,
.about-page,
.advertise-page,
.admin-section,
.article-full,
.widget,
.archive-section,
.search-result,
.archive-pdf-item,
.archive-article-item {
    min-width: 0;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.dropdown-content,
.archive-search-form,
.archive-search-actions,
.hero-actions,
.paper-preview-actions,
.share-buttons,
.newspaper-share-buttons,
.admin-actions,
.admin-dashboard-top-actions {
    min-width: 0;
}

.premium-pdf-host .ppv-controls {
    scrollbar-width: thin;
}

@media (max-width: 1120px) {
    .site-header,
    .navbar,
    .nav-wrapper,
    .nav-wrapper-home {
        overflow: visible !important;
    }

    .hamburger {
        display: inline-flex !important;
        position: relative;
        z-index: 1310;
        pointer-events: auto;
        touch-action: manipulation;
    }

    .nav-tools {
        position: relative;
        z-index: 1305;
    }

    .nav-menu {
        display: none !important;
        position: fixed !important;
        top: var(--menu-top, 104px) !important;
        left: var(--oe-safe-x) !important;
        right: var(--oe-safe-right) !important;
        bottom: var(--oe-safe-bottom) !important;
        z-index: 1320 !important;
        max-height: calc((var(--app-vh, 1vh) * 100) - var(--menu-top, 104px) - max(12px, env(safe-area-inset-bottom)));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-menu.active,
    body.menu-open .nav-menu {
        display: flex !important;
    }

    body.menu-open .site-shell {
        overflow: visible !important;
    }
}

@media (min-width: 1680px) {
    .site-shell {
        width: min(1460px, calc(100% - 2.4rem));
    }

    .container {
        width: min(1320px, calc(100% - 3rem));
    }

    .content-wrapper,
    .content-wrapper.home-layout {
        grid-template-columns: minmax(0, 1.88fr) minmax(360px, 1fr);
        gap: 1.05rem;
    }

    .archive-wrapper {
        grid-template-columns: minmax(320px, 0.85fr) minmax(0, 2fr);
        gap: 1.05rem;
    }

    .newspaper-pdf-frame-full {
        min-height: 700px;
        height: clamp(700px, 80vh, 1220px);
    }

    .premium-pdf-host .ppv-stage {
        height: min(calc(var(--app-vh, 1vh) * 78), 1120px);
        max-height: min(calc(var(--app-vh, 1vh) * 78), 1120px);
    }
}

@media (min-width: 1281px) and (max-width: 1679px) {
    .site-shell {
        width: min(1360px, calc(100% - 1.8rem));
    }

    .container {
        width: min(1220px, calc(100% - 2.4rem));
    }

    .content-wrapper,
    .content-wrapper.home-layout {
        grid-template-columns: minmax(0, 1.74fr) minmax(320px, 1fr);
    }

    .archive-wrapper {
        grid-template-columns: minmax(285px, 0.92fr) minmax(0, 1.95fr);
    }

    .home-gallery {
        grid-auto-rows: clamp(194px, 16vw, 255px);
    }

    .newspaper-pdf-frame-full {
        min-height: 640px;
        height: clamp(640px, 75vh, 1040px);
    }
}

@media (min-width: 1121px) and (max-width: 1280px) {
    .site-shell {
        width: min(1280px, calc(100% - 1.2rem));
    }

    .container {
        width: min(1140px, calc(100% - 1.5rem));
    }

    .nav-wrapper,
    .nav-wrapper-home {
        row-gap: 0.42rem;
    }

    .logo-image {
        width: clamp(260px, 28vw, 380px) !important;
        max-height: 104px !important;
    }

    .nav-menu {
        gap: 0.28rem;
    }

    .nav-menu a,
    .dropbtn {
        min-height: 50px;
        font-size: 0.82rem;
        padding: 0.5rem 0.64rem;
    }

    .language-switcher select {
        min-width: 5.6rem;
        min-height: 2.55rem;
        font-size: 0.84rem;
    }

    .theme-toggle {
        width: 2.55rem;
        height: 2.55rem;
        min-height: 2.55rem;
    }

    .content-wrapper,
    .content-wrapper.home-layout {
        grid-template-columns: minmax(0, 1.56fr) minmax(300px, 1fr);
        gap: 0.86rem;
    }

    .archive-wrapper {
        grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.8fr);
        gap: 0.86rem;
    }

    .hero-content h2 {
        font-size: clamp(2.15rem, 4.4vw, 3.55rem);
    }

    .hero-actions {
        gap: 0.42rem;
    }

    .home-gallery {
        grid-auto-rows: clamp(178px, 16.8vw, 228px);
    }

    .newspaper-pdf-frame-compact {
        min-height: 430px;
        height: min(calc(var(--app-vh, 1vh) * 64), 710px);
    }

    .newspaper-pdf-frame-full {
        min-height: 590px;
        height: clamp(590px, 73vh, 940px);
    }

    .premium-pdf-host .ppv-stage {
        height: min(calc(var(--app-vh, 1vh) * 72), 900px);
        max-height: min(calc(var(--app-vh, 1vh) * 72), 900px);
    }
}

@media (min-width: 768px) and (max-width: 1120px) {
    .site-shell {
        width: calc(100% - 0.72rem);
        margin: 0.28rem auto 1.06rem;
        border-radius: 17px;
    }

    .container {
        width: calc(100% - 1rem);
    }

    .site-main {
        padding-bottom: calc(1.32rem + env(safe-area-inset-bottom));
    }

    .nav-wrapper,
    .nav-wrapper-home {
        min-height: 86px;
        gap: 0.52rem;
    }

    .logo-image {
        width: clamp(190px, 44vw, 310px) !important;
        max-height: 90px !important;
    }

    .nav-tools {
        gap: 0.48rem;
    }

    .language-switcher select {
        min-width: 5rem;
        min-height: 2.6rem;
        font-size: 0.88rem;
    }

    .theme-toggle {
        width: 2.62rem;
        height: 2.62rem;
        min-height: 2.62rem;
    }

    .nav-menu {
        left: var(--oe-safe-x) !important;
        right: var(--oe-safe-right) !important;
        bottom: var(--oe-safe-bottom) !important;
        border-radius: 16px;
        max-height: calc((var(--app-vh, 1vh) * 100) - var(--menu-top, 104px) - max(12px, env(safe-area-inset-bottom)));
    }

    .nav-menu a,
    .dropbtn {
        min-height: 56px;
        font-size: 0.98rem;
    }

    .search-form {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.44rem;
    }

    .search-form button {
        width: auto;
        min-width: 7.4rem;
        white-space: nowrap;
    }

    .content-wrapper,
    .content-wrapper.home-layout,
    .archive-wrapper {
        grid-template-columns: 1fr;
        gap: 0.74rem;
    }

    .stats-grid,
    .achievements-grid,
    .advertise-grid,
    .admin-action-grid,
    .live-widgets-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero-banner {
        grid-template-columns: 1fr;
        gap: 0.76rem;
    }

    .hero-content h2 {
        font-size: clamp(2rem, 7vw, 3.2rem);
        line-height: 1.05 !important;
    }

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

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        width: 100%;
        text-align: center;
    }

    .home-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 192px;
    }

    .paper-preview-actions,
    .archive-search-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.42rem;
    }

    .share-buttons,
    .newspaper-share-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .newspaper-pdf-frame-compact {
        min-height: 440px;
        height: min(calc(var(--app-vh, 1vh) * 66), 720px);
    }

    .newspaper-pdf-frame-full {
        min-height: 550px;
        height: min(calc(var(--app-vh, 1vh) * 76), 920px);
    }

    .premium-pdf-host .ppv-toolbar {
        grid-template-columns: 1fr;
    }

    .premium-pdf-host .ppv-controls {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
    }

    .premium-pdf-host .ppv-stage {
        height: min(calc(var(--app-vh, 1vh) * 72), 820px);
        max-height: min(calc(var(--app-vh, 1vh) * 72), 820px);
    }

    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.66rem;
    }

    .admin-fab {
        right: var(--oe-safe-right);
        bottom: var(--oe-safe-bottom);
    }
}

@media (min-width: 600px) and (max-width: 767px) {
    .container {
        width: calc(100% - 0.86rem);
    }

    .logo-image {
        width: clamp(172px, 47vw, 255px) !important;
        max-height: 78px !important;
    }

    .language-switcher select {
        min-width: 4.5rem;
        min-height: 2.42rem;
        font-size: 0.84rem;
    }

    .theme-toggle {
        width: 2.42rem;
        height: 2.42rem;
        min-height: 2.42rem;
    }

    .search-form {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .search-form button {
        min-width: 6.4rem;
        width: auto;
    }

    .hero-content h2 {
        font-size: clamp(1.92rem, 8.4vw, 2.74rem);
        line-height: 1.08 !important;
    }

    .hero-actions {
        grid-template-columns: 1fr;
    }

    .home-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 162px;
    }

    .live-widgets-grid,
    .stats-grid,
    .achievements-grid,
    .advertise-grid,
    .admin-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .newspaper-pdf-frame-compact,
    .newspaper-pdf-frame-full {
        min-height: 405px;
    }
}

@media (max-width: 767px) {
    .footer {
        padding: 0.95rem 0 calc(0.95rem + env(safe-area-inset-bottom));
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 0.72rem;
    }

    .footer-section {
        border-radius: 14px;
        padding: 0.82rem 0.76rem;
    }

    .footer-section h3 {
        margin-bottom: 0.48rem;
        font-size: 1.02rem;
        line-height: 1.22;
    }

    .footer-section p,
    .footer-section li,
    .footer-section a {
        font-size: 0.9rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .footer-section--quick-links ul,
    .footer-section--categories ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.38rem 0.64rem;
    }

    .footer-section--quick-links li,
    .footer-section--categories li {
        margin: 0;
    }

    .footer-section--contact p {
        margin-bottom: 0.46rem;
    }

    .footer-section--contact p:last-child {
        margin-bottom: 0;
    }

    .footer-bottom {
        margin-top: 0.72rem;
        padding: 0.6rem 0.66rem;
    }
}

@media (min-width: 420px) and (max-width: 599px) {
    .site-shell {
        width: calc(100% - 0.5rem);
        border-radius: 14px;
    }

    .container {
        width: calc(100% - 0.72rem);
    }

    .nav-wrapper,
    .nav-wrapper-home {
        min-height: 72px;
    }

    .logo-image {
        width: clamp(150px, 56vw, 220px) !important;
        max-height: 72px !important;
    }

    .hamburger {
        min-width: 50px;
        min-height: 50px;
    }

    .language-switcher select {
        min-width: 4.4rem;
        min-height: 2.34rem;
        font-size: 0.8rem;
    }

    .theme-toggle {
        width: 2.34rem;
        height: 2.34rem;
        min-height: 2.34rem;
        font-size: 0.88rem;
    }

    .nav-menu {
        left: var(--oe-safe-x) !important;
        right: var(--oe-safe-right) !important;
        border-radius: 14px;
    }

    .search-form {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.4rem;
    }

    .search-form button {
        width: auto;
        min-width: 6rem;
    }

    .content-wrapper,
    .content-wrapper.home-layout,
    .archive-wrapper,
    .stats-grid,
    .achievements-grid,
    .advertise-grid,
    .admin-action-grid,
    .live-widgets-grid,
    .footer-content {
        grid-template-columns: 1fr;
    }

    .hero-content h2 {
        font-size: clamp(1.78rem, 9.8vw, 2.45rem);
        line-height: 1.08 !important;
    }

    .home-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 170px;
    }

    .paper-preview-actions,
    .archive-search-actions,
    .share-buttons,
    .newspaper-share-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.38rem;
    }

    .newspaper-pdf-frame-compact,
    .newspaper-pdf-frame-full {
        min-height: 388px;
        height: min(calc(var(--app-vh, 1vh) * 68), 620px);
    }

    .premium-pdf-host .ppv-stage {
        height: min(calc(var(--app-vh, 1vh) * 68), 660px);
        max-height: min(calc(var(--app-vh, 1vh) * 68), 660px);
    }

    .footer-section {
        padding: 0.75rem 0.68rem;
        border-radius: 12px;
    }

    .footer-section h3 {
        font-size: 0.95rem;
    }

    .footer-section p,
    .footer-section li,
    .footer-section a {
        font-size: 0.84rem;
        line-height: 1.4;
    }

    .footer-section--quick-links ul,
    .footer-section--categories ul {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
}

@media (max-width: 419px) {
    .site-shell {
        width: calc(100% - 0.34rem);
        margin-top: 0.12rem;
        border-radius: 12px;
    }

    .container {
        width: calc(100% - 0.52rem);
    }

    .site-main {
        padding-top: 0.72rem;
        padding-bottom: calc(1.02rem + env(safe-area-inset-bottom));
    }

    .nav-wrapper,
    .nav-wrapper-home {
        min-height: 66px;
        gap: 0.34rem;
    }

    .logo-image {
        width: clamp(136px, 56vw, 194px) !important;
        max-height: 62px !important;
    }

    .hamburger {
        min-width: 46px;
        min-height: 46px;
        border-radius: 12px;
    }

    .language-switcher select {
        min-width: 4.15rem;
        min-height: 2.2rem;
        font-size: 0.76rem;
        padding-left: 0.42rem;
        padding-right: 1.1rem;
    }

    .theme-toggle {
        width: 2.2rem;
        height: 2.2rem;
        min-height: 2.2rem;
        font-size: 0.82rem;
    }

    .nav-menu {
        left: max(6px, env(safe-area-inset-left)) !important;
        right: max(6px, env(safe-area-inset-right)) !important;
        padding: 0.56rem;
        border-radius: 12px;
    }

    .nav-menu a,
    .dropbtn {
        min-height: 50px;
        font-size: 0.92rem;
        padding: 0.56rem 0.62rem;
    }

    .search-form {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .search-form button {
        width: 100%;
        min-width: 0;
    }

    .article-card,
    .widget,
    .archive-section,
    .search-result,
    .pdf-card,
    .stat-box,
    .stat-card,
    .archive-pdf-item,
    .archive-article-item,
    .contact-form,
    .article-form,
    .category-form,
    .admin-form,
    .date-picker-box,
    .newspaper-card,
    .about-section,
    .values-grid .value-item {
        padding: 0.68rem;
    }

    .hero-content h2 {
        font-size: clamp(1.62rem, 11.2vw, 2.2rem);
        line-height: 1.1 !important;
    }

    .hero-lead {
        font-size: 0.95rem;
    }

    .hero-actions {
        grid-template-columns: 1fr;
    }

    .home-gallery {
        grid-template-columns: 1fr;
        grid-auto-rows: 150px;
    }

    .paper-preview-actions,
    .archive-search-actions,
    .share-buttons,
    .newspaper-share-buttons,
    .admin-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.34rem;
    }

    .newspaper-pdf-frame-compact,
    .newspaper-pdf-frame-full {
        min-height: 360px;
        height: min(calc(var(--app-vh, 1vh) * 66), 560px);
    }

    .premium-pdf-host .ppv-stage {
        height: min(calc(var(--app-vh, 1vh) * 66), 580px);
        max-height: min(calc(var(--app-vh, 1vh) * 66), 580px);
    }

    .footer {
        padding: 0.82rem 0 calc(0.88rem + env(safe-area-inset-bottom));
    }

    .footer-content {
        gap: 0.58rem;
    }

    .footer-section {
        padding: 0.68rem 0.62rem;
        border-radius: 10px;
    }

    .footer-section h3 {
        font-size: 0.9rem;
        margin-bottom: 0.42rem;
    }

    .footer-section p,
    .footer-section li,
    .footer-section a {
        font-size: 0.8rem;
        line-height: 1.34;
    }

    .footer-section--quick-links ul,
    .footer-section--categories ul {
        grid-template-columns: 1fr;
        gap: 0.28rem;
    }

    .footer-bottom {
        margin-top: 0.58rem;
        padding: 0.5rem 0.54rem;
    }

    .admin-fab {
        right: max(8px, env(safe-area-inset-right));
        bottom: max(8px, env(safe-area-inset-bottom));
        transform: scale(0.95);
        transform-origin: bottom right;
    }
}

@media (max-width: 359px) {
    .logo-image {
        width: clamp(128px, 54vw, 172px) !important;
        max-height: 58px !important;
    }

    .language-switcher select {
        min-width: 3.95rem;
        font-size: 0.72rem;
    }

    .hero-content h2 {
        font-size: clamp(1.48rem, 11.6vw, 1.95rem);
    }

    .home-gallery {
        grid-auto-rows: 136px;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .nav-menu {
        max-height: calc((var(--app-vh, 1vh) * 100) - var(--menu-top, 96px) - max(8px, env(safe-area-inset-bottom))) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }

    .newspaper-pdf-frame-compact,
    .newspaper-pdf-frame-full {
        height: min(calc(var(--app-vh, 1vh) * 84), 520px);
        min-height: 320px;
    }

    .premium-pdf-host .ppv-stage {
        height: min(calc(var(--app-vh, 1vh) * 82), 520px);
        max-height: min(calc(var(--app-vh, 1vh) * 82), 520px);
    }
}