/* === Wiener Urkundenbuch — Responsive Breakpoints === */
/* ==========================================================================
   Responsive — Canonical Breakpoints
   --------------------------------------------------------------------------
   1200px — Exploration panels: multi-column → single-column (exploration.css)
   1024px — Synopsis: 2-column → stacked; stats collection grid 2-col
    900px — Navigation: hamburger menu
    768px — General mobile layout: KPIs 2-col, stats single-col, stacked footer
    480px — Ultra-narrow: single-col legends, stacked chips
   --------------------------------------------------------------------------
   Co-located breakpoints in exploration.css and startseite.css use these
   same values. Keep all breakpoints aligned to this canonical set.
   ========================================================================== */

@media (max-width: 1024px) {
    /* Synopsis → stacked on tablets */
    .has-facsimile .doc-content {
        grid-template-columns: 1fr;
    }

    .doc-facs-panel {
        height: 70vh;
    }

}

@media (max-width: 900px) {
    /* Collapse nav into hamburger menu */
    .nav-hamburger {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--color-bg-nav);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding: var(--space-sm) 0;
        gap: 0;
        box-shadow: var(--shadow-lg);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links .nav-item {
        padding: var(--space-sm) var(--space-lg);
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    .nav-links .nav-dropdown {
        display: block;
        width: 100%;
    }

    .nav-inner {
        position: relative;
    }

    .nav-badge { display: none; }
}

@media (max-width: 768px) {
    .nav-badge { display: none; }

    .site-main {
        padding: var(--space-lg) var(--space-md);
    }

    .doc-body {
        padding: var(--space-lg) var(--space-md);
    }

    /* Toolbar: not sticky on mobile. Identity ueber Controls gestapelt,
       statt nebeneinander. Layer-Toggles fallen auf 1 Spalte zurueck,
       damit keine Pille abgeschnitten wird. */
    .doc-toolbar {
        position: static;
        margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-md)) 0;
        padding: var(--space-sm) var(--space-md);
    }

    .doc-toolbar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .doc-toolbar-controls {
        align-items: flex-start;
    }

    .doc-toolbar-legend {
        grid-template-columns: 1fr;
    }

    .doc-breadcrumb {
        white-space: normal;
    }

    .legend-grid {
        grid-template-columns: 1fr 1fr;
    }

    .index-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .result-count {
        text-align: center;
    }

    .footer-inner {
        flex-direction: column;
    }

    .footer-col-right { text-align: left; }

    /* Horizontal scroll for table on small screens with scroll indicator */
    .index-table-wrap {
        overflow-x: auto;
        background:
            linear-gradient(to right, var(--color-bg-card) 30%, transparent),
            linear-gradient(to left, var(--color-bg-card) 30%, transparent),
            linear-gradient(to right, rgba(44, 40, 37, 0.15), transparent 20px),
            linear-gradient(to left, rgba(44, 40, 37, 0.15), transparent 20px);
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .index-table {
        min-width: 40rem;
    }

    /* Preview thumb hidden on mobile */
    .preview-thumb {
        display: none;
    }

    .legend-grid-compact {
        grid-template-columns: 1fr 1fr;
    }

    /* WCAG touch targets — minimum 44px on touch devices */
    .explore-chip,
    .alpha-btn {
        min-height: 2.75rem;
        padding: 0.5rem 0.875rem;
    }

    .explore-view-toggle,
    .explore-drilldown-close,
    .toolbar-btn {
        min-height: 2.75rem;
        min-width: 2.75rem;
    }

    .filter-chip button,
    .chip-clear,
    .cite-copy-btn {
        min-height: 2.75rem;
        min-width: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Heatmap and matrix tables: horizontal scroll on mobile */
    .explore-chart-wrap { overflow-x: auto; }

    /* Exploration panels: single column on mobile */
    .explore-panels--roles-top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .legend-grid {
        grid-template-columns: 1fr;
    }

    .collection-chips {
        flex-direction: column;
        align-items: stretch;
    }

    .chip {
        justify-content: center;
    }
}