/* ============================================
   Public Layout Styles - Extracted from inline CSS
   Performance Optimization: Cacheable external file
   ============================================ */

/* Inline override für Sidebar-Positionierung - bypasses cache */
/* Basiert auf typischen Bildschirmauflösungen minus Browser-Chrome und Footer */

/* Sticky Footer Layout - Force with highest specificity */
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.public-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.public-main {
    flex: 1 0 auto;
    padding-bottom: 0;
    min-height: 0;
}

.image-detail {
    padding-bottom: 0;
}

.public-footer {
    flex-shrink: 0;
    margin-top: auto;
}

.gallery-sidebar {
    position: fixed;
    top: 70px;
    left: 0;
    width: 380px;
    padding: 1rem;
    height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: #f1f5f9;
    z-index: 50;
}

.sidebar-content {
    height: 100%;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.category-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Platz für fixed sidebar */
.gallery-main {
    margin-left: 400px;
}

.gallery-page {
    display: block;
}

/* Tablet: Sidebar schmaler */
@media (min-width: 769px) and (max-width: 1200px) {
    .gallery-sidebar {
        width: 280px;
    }
    .gallery-main {
        margin-left: 300px;
    }
}

/* ============================================
   DETAILSEITE: Fixiertes Layout
   Header oben, Footer unten, Navigation über Footer
   Content scrollt dazwischen
   ============================================ */

/* Wenn body die Klasse "page-detail" hat (wird in show.php gesetzt) */
body.page-detail {
    overflow: hidden;
    height: 100vh;
}

body.page-detail .public-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

body.page-detail .public-main {
    position: fixed;
    top: 60px; /* Header height */
    bottom: 100px; /* Navigation + Footer height */
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

body.page-detail .media-navigation-fixed {
    position: fixed;
    bottom: 48px; /* Footer height */
    left: 0;
    right: 0;
    z-index: 999;
    background: white;
    border-top: 1px solid #e5e7eb;
    height: 52px;
}

body.page-detail .public-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    height: 48px;
}

body.page-detail .image-detail {
    padding-bottom: 1rem;
    min-height: auto;
}

/* Ensure navigation is visible */
.media-navigation-fixed {
    display: block;
    visibility: visible;
}

.media-navigation {
    display: flex;
    visibility: visible;
}

/* Force orange buttons */
.btn-primary,
.btn-download {
    background: linear-gradient(135deg, #FF9900 0%, #E68A00 100%);
    color: white;
}

.btn-primary:hover,
.btn-download:hover {
    background: linear-gradient(135deg, #E68A00 0%, #CC7A00 100%);
}

/* Orange checkboxes */
input[type="checkbox"] {
    accent-color: #FF9900;
}

/* ============================================
   Tablet & Mobile Anpassungen (Inline)
   ============================================ */

/* Tablet (769px - 1366px) - Erweitert für iPad Pro */
@media (min-width: 769px) and (max-width: 1366px) {

    /* Sticky Footer Layout für Tablet */
    body.public-layout {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    .public-main {
        flex: 1 0 auto;
        padding-bottom: 0;
        min-height: 0;
    }

    .image-detail {
        padding-bottom: 0;
    }

    /* Gallery Sidebar breiter für Kategoriebeschreibung (von 240px auf 300px) */
    .gallery-sidebar {
        width: 300px;
    }

    .gallery-main {
        margin-left: 320px;
    }

    /* Wenn Sidebar versteckt, Content nutzt vollen Bereich */
    .gallery-sidebar.hidden {
        display: none;
    }

    .gallery-main.sidebar-hidden {
        margin-left: 0;
    }

    /* Startseite-Link im Header - dezenter Textlink zwischen Logo und Suche */
    .public-nav-link-home {
        position: static;
        transform: none;
        left: auto;
        top: auto;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 400;
        font-size: 0.8rem;
        text-decoration: none;
        margin-left: 1rem;
        margin-right: auto;
        white-space: nowrap;
    }

    .public-nav-link-home:hover {
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
    }

    /* Header-Suchleiste ECHT zentriert auf Seitenbreite */
    .public-header-inner {
        position: relative;
        justify-content: space-between;
    }

    .public-search {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        max-width: 300px;
        margin: 0;
    }

    /* Gallery-Header und Abstände reduzieren */
    .gallery-main {
        padding-top: 0.5rem;
    }

    .gallery-header {
        margin-top: 0;
        margin-bottom: 0.5rem;
        padding: 0.5rem 0;
        padding-bottom: 0.5rem;
    }

    .gallery-search-bar {
        gap: 0.75rem;
    }

    .gallery-info {
        margin-bottom: 0.5rem;
    }

    /* Buttons kompakt - KEIN Umbruch */
    .btn {
        white-space: nowrap;
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }

    .btn-sm {
        font-size: 0.75rem;
        padding: 0.375rem 0.625rem;
    }

    /* Footer sticky am Bildschirmende */
    .public-footer {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        width: 100%;
        visibility: visible;
        background: #1e293b;
    }

    .public-footer-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .public-footer-links {
        display: flex;
        gap: 1.5rem;
    }

    .public-footer-links a {
        display: inline-block;
        visibility: visible;
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        font-size: 0.875rem;
    }

    .public-footer-links a:hover {
        color: white;
        text-decoration: underline;
    }

    /* Lupe/Tastatur verstecken */
    #keyboardNavToggleWrapper,
    .magnifier-row,
    .btn-magnifier {
        display: none;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {

    /* Startseite-Link ausblenden auf Mobile */
    .public-nav-link-home {
        display: none;
    }

    /* Gallery-Page als normaler Block-Flow (kein Flex) */
    .gallery-page {
        display: block;
        min-height: auto;
        overflow: visible;
    }

    /* Sidebar als normaler Teil des Flows (nicht separat scrollbar) */
    .gallery-sidebar {
        position: relative;
        top: auto;
        width: 100%;
        max-height: none;
        height: auto;
        overflow: visible;
        margin-bottom: 1rem;
    }

    /* Sidebar versteckt - Content nutzt vollen Bereich */
    .gallery-sidebar.hidden {
        display: none;
    }

    /* Content unter Sidebar */
    .gallery-main {
        margin-left: 0;
        overflow: visible;
        padding-bottom: 60px; /* Platz für Footer */
    }

    /* WICHTIG: Wenn Sidebar versteckt, braucht gallery-main padding-top für fixed header */
    .gallery-main.sidebar-hidden {
        margin-left: 0;
        padding-top: 0.5rem;
    }

    /* Public-Main braucht padding-top für den fixed Header auf Mobile */
    .public-main {
        padding-top: 120px; /* Header + Search-Bar Höhe */
    }

    /* Gallery-Header/Filter-Bar - responsive Layout */
    .gallery-header {
        position: relative;
        z-index: 10;
        background: #f1f5f9;
        padding: 0.5rem;
    }

    .gallery-search-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
        width: 100%;
        overflow: visible;
    }

    /* Filter-Button kompakt */
    .filter-toggle-btn {
        flex: 0 0 auto;
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
        white-space: nowrap;
    }

    .filter-toggle-btn svg {
        width: 14px;
        height: 14px;
    }

    /* Sortierung kompakt */
    .gallery-sort-group {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .sort-label {
        display: none; /* Label ausblenden auf Mobile */
    }

    .gallery-sort-select {
        font-size: 0.75rem;
        padding: 0.3rem 0.4rem;
        min-width: 80px;
    }

    /* Pagination kompakt */
    .pagination.pagination-inline {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .pagination-btn {
        font-size: 0.7rem;
        padding: 0.3rem 0.4rem;
        white-space: nowrap;
    }

    .pagination-select {
        font-size: 0.7rem;
        padding: 0.2rem;
        min-width: 60px;
    }

    /* Suchfeld auf neue Zeile */
    .gallery-search-wrapper {
        flex: 1 1 100%;
        margin-top: 0.5rem;
        order: 10;
    }

    .gallery-search-input-small {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }

    /* Public-Main normal */
    .public-main {
        overflow: visible;
        padding-bottom: 0;
        min-height: 0;
    }

    .image-detail {
        padding-bottom: 0;
    }

    /* Navigation FIXED über Footer - ALL overrides */
    .media-navigation-fixed {
        position: fixed;
        bottom: calc(44px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        z-index: 101;
        height: 48px;
        padding: 0.5rem 1rem;
        margin: 0;
        background: white;
        border-top: 1px solid #e5e7eb;
        border-bottom: none;
    }

    /* Navigation buttons left/right */
    .media-navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0;
        min-height: auto;
    }

    .media-navigation-center {
        display: none;
    }

    .nav-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 0.75rem;
        font-size: 0.875rem;
    }

    .nav-btn span {
        display: none; /* Hide text on mobile */
    }

    /* Buttons kompakt */
    .btn {
        white-space: nowrap;
        font-size: 0.875rem;
        padding: 0.4rem 0.75rem;
    }

    /* Header anpassen */
    .public-header-inner {
        flex-wrap: wrap;
    }

    .public-search {
        flex: 1 1 100%;
        order: 3;
    }

    .public-header-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Footer NICHT fixed - am Ende des Inhalts (Safari-Bar Problem) */
    .public-footer {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
        visibility: visible;
        z-index: 100;
        min-height: 44px;
        height: auto;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #1e293b;
    }

    .image-detail {
        padding-bottom: 60px;
    }

    /* Footer inner - Override ALL external CSS rules */
    .public-footer .container {
        padding: 0;
        max-width: none;
    }

    .public-footer-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 1rem;
        font-size: 0.7rem;
        min-height: 44px;
        flex-wrap: nowrap;
        margin: 0;
    }

    .public-footer-links {
        display: flex;
        gap: 0.5rem;
        margin: 0;
        flex-shrink: 1;
    }

    .public-footer-links a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        padding: 0;
        font-size: 0.65rem;
        white-space: nowrap;
    }

    .public-footer-inner > div:last-child {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.65rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Gallery Bilder nicht croppen */
    .gallery-item-image img {
        object-fit: contain;
    }

    .gallery-item {
        height: auto;
        min-height: 150px;
    }
}