@import '_content/Carecom.Foundation/Carecom.Foundation.h6x84roo70.bundle.scp.css';

/* /Components/Shared/PortfolioGrid.razor.rz.scp.css */
/* Scoped Styles fuer PortfolioGrid — Masonry-Anmutung per CSS-Spalten.
 * Wir nutzen bewusst `columns` statt CSS-Grid Masonry (das ist erst seit
 * sehr kurzem in Chromium drin) — `columns` ist seit Jahren ueberall
 * verfuegbar und liefert das gewuenschte Pinterest-aehnliche Layout.
 * Bilder bleiben unbeschnitten (object-fit greift hier nicht, weil
 * die <img> einfach 100% Spaltenbreite annehmen und ihre Hoehe
 * proportional behalten).
 */

.portfolio-grid[b-w538pg9uao] {
    /* 3 Spalten am Desktop; Breakpoints unten reduzieren auf 2 und 1. */
    columns: 3;
    column-gap: 1rem;
    margin-top: 1.5rem;
}

@media (max-width: 900px) {
    .portfolio-grid[b-w538pg9uao] { columns: 2; }
}
@media (max-width: 540px) {
    .portfolio-grid[b-w538pg9uao] { columns: 1; }
}

.portfolio-grid__item[b-w538pg9uao] {
    /* break-inside ist der entscheidende Hebel: ohne ihn zerlegt der
       Browser ein <figure> ueber die Spaltengrenze und das Bild reisst. */
    break-inside: avoid;
    margin: 0 0 1rem 0;
    position: relative;        /* Anker fuer das Caption-Overlay */
    background: var(--color-bg-alt);
    border-radius: 4px;
    overflow: hidden;          /* clippt den Hover-Zoom + rundet das Bild */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease;
}
.portfolio-grid__item:hover[b-w538pg9uao],
.portfolio-grid__item:focus-within[b-w538pg9uao] {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.portfolio-grid__open-btn[b-w538pg9uao] {
    all: unset;
    display: block;
    cursor: zoom-in;
    width: 100%;
}
.portfolio-grid__open-btn:focus-visible[b-w538pg9uao] {
    outline: 3px solid var(--color-warm);
    outline-offset: -3px;
}
.portfolio-grid__open-btn img[b-w538pg9uao] {
    display: block;
    width: 100%;
    height: auto;          /* original Aspect-Ratio — KEIN Crop */
    transition: transform 0.45s ease;
}
.portfolio-grid__item:hover .portfolio-grid__open-btn img[b-w538pg9uao],
.portfolio-grid__item:focus-within .portfolio-grid__open-btn img[b-w538pg9uao] {
    transform: scale(1.05);
}

/* Caption als Overlay: gleitet beim Hover/Focus von unten ein, mit
   Verlauf fuer Lesbarkeit auf beliebigen Bildern — gibt der Galerie eine
   ruhige Bildwand-Optik statt permanenter Textzeilen. Auf Touch-Geraeten
   (kein Hover) bleibt der Titel dauerhaft sichtbar. pointer-events:none,
   damit der Klick ueberall im Bild zur Lightbox durchgeht. */
.portfolio-grid__caption[b-w538pg9uao] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 1.6rem 0.7rem 0.55rem;
    font-size: 0.85rem;
    line-height: 1.3;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.portfolio-grid__item:hover .portfolio-grid__caption[b-w538pg9uao],
.portfolio-grid__item:focus-within .portfolio-grid__caption[b-w538pg9uao] {
    opacity: 1;
    transform: translateY(0);
}
@media (hover: none) {
    /* Touch: kein Hover → Titel dauerhaft zeigen. */
    .portfolio-grid__caption[b-w538pg9uao] { opacity: 1; transform: none; }
}

.portfolio-grid__empty[b-w538pg9uao] {
    margin: 2rem 0;
    text-align: center;
    color: var(--color-fg-muted, #555);
}

/* ----- Lightbox (natives <dialog>, gesteuert per Vanilla-JS) ------- */

/* <dialog> hat per Browser-Default margin: auto + display: block —
   wir wollen es vollflaechig (100vw/100vh) und mittig zentriert.
   Wenn das Dialog NICHT offen ist, ist es per Browser-Default
   display: none — also keine eigene Hide-Regel noetig. */
.portfolio-lightbox[b-w538pg9uao] {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: clamp(0.5rem, 3vw, 3rem);
    border: none;
    background: rgba(0, 0, 0, 0.92);
    color: #fff;
    outline: none;
}
.portfolio-lightbox[open][b-w538pg9uao] {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: portfolio-lightbox-in-b-w538pg9uao 0.18s ease-out;
}
.portfolio-lightbox[b-w538pg9uao]::backdrop {
    background: rgba(0, 0, 0, 0.92);
}
@keyframes portfolio-lightbox-in-b-w538pg9uao {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.portfolio-lightbox__figure[b-w538pg9uao] {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    max-width: 100%;
    max-height: 100%;
}
.portfolio-lightbox__img[b-w538pg9uao] {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;       /* KEIN Crop in der Lightbox */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.portfolio-lightbox__caption[b-w538pg9uao] {
    color: #fff;
    font-size: 0.95rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.55);
    padding: 0.35rem 0.85rem;
    border-radius: 3px;
}
.portfolio-lightbox__caption:empty[b-w538pg9uao] {
    display: none;
}

.portfolio-lightbox__btn[b-w538pg9uao],
.portfolio-lightbox__close[b-w538pg9uao] {
    position: fixed;
    z-index: 1;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s ease;
}
.portfolio-lightbox__btn svg[b-w538pg9uao],
.portfolio-lightbox__close svg[b-w538pg9uao] { width: 26px; height: 26px; }

.portfolio-lightbox__btn:hover[b-w538pg9uao],
.portfolio-lightbox__close:hover[b-w538pg9uao] { background: rgba(255, 255, 255, 0.25); }

.portfolio-lightbox__btn--prev[b-w538pg9uao] { left:  clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.portfolio-lightbox__btn--next[b-w538pg9uao] { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.portfolio-lightbox__close[b-w538pg9uao]     { top:   clamp(0.5rem, 2vw, 2rem); right: clamp(0.5rem, 2vw, 2rem); }

@media (prefers-reduced-motion: reduce) {
    .portfolio-lightbox[open][b-w538pg9uao] { animation: none !important; }
    .portfolio-lightbox__img[b-w538pg9uao]  { transition: none !important; }
    .portfolio-grid__item[b-w538pg9uao]     { transition: none !important; }
    /* Kein Hover-Zoom, kein Slide-In der Caption — nur die opacity bleibt. */
    .portfolio-grid__open-btn img[b-w538pg9uao] { transition: none !important; transform: none !important; }
    .portfolio-grid__caption[b-w538pg9uao]      { transition: opacity 0.2s ease !important; transform: none !important; }
}