/* themes/presse21/assets/css/presse21.css
   Theme-level additions to the client template:
   - Self-hosted fonts (no Google Fonts dependency in deploy)
   - @font-face overrides that point to the canonical _dist paths
     (front/fonts/ and front/css/fonts/opensans/), so the browser's
     last-declaration wins over app.all.css's stale relative paths.
*/

/* Days One — cliente brand font (replaces Google Fonts external load) */
@font-face {
    font-family: 'Days One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../front/fonts/DaysOne-Regular.ttf') format('truetype');
}

/* Apply Days One only to the box headers (WAS, WER, WIE, WO).
   The inner h2 of expanded panels (e.g. "Check Out a Few Recent Projects")
   keeps the body font — Days One is a display face and would render that
   title too large. Matches the live presse21.de aesthetic. */
.bl-box > h2 {
    font-family: 'Days One', sans-serif;
}

/* a11y helper — visually-hidden but accessible to screen readers (used by
   the language switcher label). Equivalent to Tailwind's sr-only. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Language switcher — pinned to the bottom of the side menu, custom-styled
   to look like select2 without pulling the lib. */
.sp-menu .language-form {
    position: absolute;
    bottom: 1.5em;
    left: 0;
    right: 0;
    margin: 0 1em;
    padding: 0;
}

.sp-menu .language-form select {
    width: 100%;
    padding: 0.55em 2.4em 0.55em 0.9em;
    font-size: 0.9em;
    line-height: 1.4;
    color: #333;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='%23888'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85em center;
    background-size: 0.65em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sp-menu .language-form select:hover {
    border-color: #888;
}

.sp-menu .language-form select:focus {
    outline: none;
    border-color: #555;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────
   Slide-push menu — defensive overrides ensuring the off-canvas vertical
   menu is properly hidden by default and slides in only when the
   .sp-menu-container has .sp-menu-open. Some upstream CSS combinations
   leave the menu partially visible because the cascade order varies.
   ───────────────────────────────────────────────────────────────────── */

.sp-menu-container .sp-menu-vertical.sp-menu-left {
    left: -240px;
    transition: left 0.3s ease;
}

.sp-menu-container.sp-menu-open .sp-menu-vertical.sp-menu-left {
    left: 0;
}

/* Side menu hover — app.all.css globally sets a:hover { background:#eee }
   and slidepushmenu/main.css sets .sp-menu a:hover { background:#fafafa }.
   On some upstream cascades the link colour also flips to white, leaving
   the text invisible on the light hover background. Lock both colour and
   background to a readable combination. */
.sp-menu a,
.sp-menu li a {
    color: #1a1a1a !important;
    background: transparent !important;
    text-decoration: none !important;
    border-radius: 0 !important;
}

.sp-menu a:hover,
.sp-menu a:focus,
.sp-menu li a:hover,
.sp-menu li a:focus {
    color: #1a1a1a !important;
    background: #f0f0f0 !important;
    text-decoration: none !important;
}

.sp-menu a:active,
.sp-menu li a:active {
    color: #1a1a1a !important;
    background: #e5e5e5 !important;
}

/* When a box section is expanded (.bl-main.bl-expand-item), the legacy
   bp-fullscreen rule scales down siblings to 0.5. The aside menu is a
   direct child of <main> and can be caught by inherited transform-origin
   propagation in some browsers. Keep the side menu container and its
   contents at their natural size — the menu is an overlay, not part of
   the box-layout grid that is being scaled. */
.bl-main.bl-expand-item .sp-menu-container,
.bl-main.bl-expand-item .sp-menu,
.bl-main.bl-expand-item .sp-menu-trigger,
.bl-main.bl-expand-item .sp-menu li,
.bl-main.bl-expand-item .sp-menu a,
.bl-main.bl-expand-item .pg-logo {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    font-size: inherit !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Filterable grid — replaces Isotope masonry with native CSS Grid.
   `grid-auto-flow: dense` packs items into available cells, so when JS
   hides items via .grid__item--hidden { display: none } the remaining
   ones reflow contiguously (no gaps).

   The legacy bp-filterable-product-grid.css and custom.css define
   `.grid__item { float: left; width: 20%/33.33%; padding: .75em;
   display: inline-block }` — those rules collide with the grid layout
   (items shrink to a vertical bar inside each cell). We neutralise them
   explicitly with !important, scoped to #bl-work-items so the override
   doesn't leak elsewhere.
   ───────────────────────────────────────────────────────────────────── */

#bl-work-items.grid,
#bl-work-items {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: 240px;
    grid-auto-flow: dense;
    gap: 14px;
    list-style: none;
    padding: 1.5em 1em 4em !important;
    margin: 0 auto;
    max-width: 1100px;
    text-align: left;
    overflow: visible !important;
}

#bl-work-items > .grid__sizer {
    display: none !important;
}

#bl-work-items > .grid__item {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    animation: gridItemEnter 0.35s ease both;
}

#bl-work-items > .grid__item > a {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none !important;
}

#bl-work-items > .grid__item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform 0.4s ease;
    cursor: pointer;
    display: block;
    border: 0;
}

#bl-work-items > .grid__item:hover img {
    transform: scale(1.06);
}

#bl-work-items > .grid__item.grid__item--hidden {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   Project detail panels — vertical hero + centered text layout.
   Replaces "image-left + text-right" asymmetric layout with a
   magazine-style flow:
       [hero image full-width 16:9]
                  [title + body, centered, max-width 65ch]
       [footer: ← BACK   ·   counter   ·   NEXT →   ·   X]
   ───────────────────────────────────────────────────────────────────── */

/* Panel container does NOT scroll. Its translate transitions
   (translateY(-100%) for show, etc.) conflict with overflow scrolling
   on the same element. Instead the inner .bl-panel-content scrolls. */
#bl-panel-work-items > div[data-panel] {
    overflow: hidden !important;
}

/* The actual scroll container — bounded to viewport height minus the
   64px fixed nav so the last line of text never sits behind it. */
#bl-panel-work-items > div[data-panel] > .bl-panel-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: calc(100vh - 64px);
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
}

/* Inner wrapper centers the content and applies the typography spacing
   (this avoids putting padding on the scroll container itself, which
   would create awkward edges when the scrollbar appears). */
#bl-panel-work-items > div[data-panel] > .bl-panel-content::before {
    content: '';
    display: block;
    height: 4em;
}

#bl-panel-work-items > div[data-panel] > .bl-panel-content > .bl-panel-hero,
#bl-panel-work-items > div[data-panel] > .bl-panel-content > .bl-panel-text {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2em;
    padding-right: 2em;
    box-sizing: border-box;
}

#bl-panel-work-items > div[data-panel] > .bl-panel-content > .bl-panel-text {
    padding-bottom: 4em;
}

.bl-panel-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0 0 2.5em;
    background: #f5f5f5;
    border-radius: 4px;
}

.bl-panel-hero img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0;
}

.bl-panel-text {
    text-align: center;
    max-width: 65ch;
    margin: 0 auto;
}

.bl-panel-text h3 {
    font-family: 'Days One', sans-serif;
    font-size: 2em;
    line-height: 1.2;
    margin: 0 0 0.5em;
    color: #1a1a1a;
}

.bl-panel-text p {
    font-size: 1.05em;
    line-height: 1.7;
    color: #444;
    margin: 0;
}

/* Three-zone footer nav — BACK left | counter center | NEXT right + X tucked.
   Pinned to the viewport bottom; visible while the panel content scrolls
   behind it. Width/margin-left set by JS (initWorkPanels::sizeNav) → spans
   the full viewport (left:50% + JS margin-left:-w/2).
   The legacy bp-fullscreen sets `position: absolute; top: -70px; opacity: 0`
   on this nav and `top: -70px` when shown — overriding all of that. */
.bl-panel-items > nav,
.bl-panel-items nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 2em !important;
    box-sizing: border-box;
    background: #1a1a1a;
    color: #fff;
    height: 64px;
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    z-index: 9999 !important;

    /* Hidden by default — only visible while a project panel is open
       (class .bl-panel-items-show on the parent). Without this guard
       the bar would show on the home page. */
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
}

.bl-panel-items.bl-panel-items-show > nav,
.bl-panel-items.bl-panel-items-show nav {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.bl-panel-back,
.bl-next-work {
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.75em;
    transition: color 0.2s ease;
    user-select: none;
    background: transparent;
    border: 0;
    margin: 0 !important;
}

.bl-panel-back:hover,
.bl-next-work:hover {
    color: #ccc;
}

.bl-panel-back:hover .bl-panel-back__arrow {
    transform: translateX(-3px);
}

.bl-next-work:hover .bl-next-work__arrow {
    transform: translateX(3px);
}

.bl-panel-back__arrow,
.bl-next-work__arrow {
    font-size: 1.2em;
    transition: transform 0.2s ease;
    display: inline-block;
}

.bl-panel-counter {
    color: #999;
    font-size: 0.8em;
    font-weight: 500;
    letter-spacing: 0.1em;
    user-select: none;
    flex: 0 0 auto;
}

.bl-panel-items nav .bl-icon-close {
    cursor: pointer;
    color: #fff;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    margin-left: 0.5em;
    /* Override custom.css's absolute positioning for this in-nav close */
    position: static !important;
    right: auto !important;
}

.bl-panel-items nav .bl-icon-close:hover {
    opacity: 1;
}

/* Responsive (≤600px):
   - BACK / NEXT collapse to icon-only (text hidden, aria-label preserved
     for screen readers, touch targets ≥44px per WCAG 2.5.5)
   - Filter buttons: cancel the legacy "hide text → show icon" pattern
     from bp-filterable-product-grid.css, since our HTML doesn't carry
     icomoon glyphs in those buttons. Keep the labels readable on mobile. */
@media (max-width: 600px) {
    .bl-panel-back__text,
    .bl-next-work__text {
        display: none;
    }
    .bl-panel-back,
    .bl-next-work {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5em 0.75em;
        justify-content: center;
    }
    .bl-panel-back__arrow,
    .bl-next-work__arrow {
        font-size: 1.5em;
    }
    .bl-panel-items nav {
        padding: 0 1em !important;
    }
    #bl-panel-work-items > div[data-panel] > .bl-panel-content > .bl-panel-hero,
    #bl-panel-work-items > div[data-panel] > .bl-panel-content > .bl-panel-text {
        padding-left: 1.25em;
        padding-right: 1.25em;
    }
    .bl-panel-text h3 {
        font-size: 1.5em;
    }

    /* Override the legacy filter "hide text" rule so labels stay visible. */
    .filter__label,
    .action__text {
        display: inline-block !important;
    }
    .filter__item .icon {
        display: none !important;
    }
    .filter {
        flex-wrap: wrap;
        gap: 0.4em;
    }
    .filter__item {
        font-size: 0.8em;
        padding: 0.4em 0.6em;
    }

    /* Grid in mobile: smaller min cell, less gap. */
    #bl-work-items {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        grid-auto-rows: 140px !important;
        gap: 6px !important;
        padding: 1em 0.5em 3em !important;
    }
}

/* Visible entrance when items reflow after a filter change.
   Stagger via :nth-child so cards arrive in a wave instead of all at once. */
@keyframes gridItemEnter {
    from { opacity: 0; transform: scale(0.85) translateY(15px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

#bl-work-items > .grid__item {
    animation-duration: 0.55s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

#bl-work-items > .grid__item:nth-child(1)  { animation-delay: 0ms; }
#bl-work-items > .grid__item:nth-child(2)  { animation-delay: 40ms; }
#bl-work-items > .grid__item:nth-child(3)  { animation-delay: 80ms; }
#bl-work-items > .grid__item:nth-child(4)  { animation-delay: 120ms; }
#bl-work-items > .grid__item:nth-child(5)  { animation-delay: 160ms; }
#bl-work-items > .grid__item:nth-child(6)  { animation-delay: 200ms; }
#bl-work-items > .grid__item:nth-child(7)  { animation-delay: 240ms; }
#bl-work-items > .grid__item:nth-child(8)  { animation-delay: 280ms; }
#bl-work-items > .grid__item:nth-child(9)  { animation-delay: 320ms; }
#bl-work-items > .grid__item:nth-child(10) { animation-delay: 360ms; }

/* Open Sans — overrides app.all.css declarations (which resolve relative to
   /css/, not the actual location at /front/css/fonts/opensans/). */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local('Open Sans Light'), local('OpenSans-Light'),
         url('../front/css/fonts/opensans/opensans-light.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans'), local('OpenSans'),
         url('../front/css/fonts/opensans/opensans.woff') format('woff');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
         url('../front/css/fonts/opensans/opensans-bold.woff') format('woff');
}