/* ==================================================================
   No1 Gallery — front-end.
   Zmienne wskazują na tokeny motywu (assets/css/n1.css) z fallbackiem,
   żeby wtyczka wyglądała spójnie, ale działała też bez niego.
   ================================================================== */
.no1gal {
    --no1gal-red:   var(--n1-red, #C42424);
    --no1gal-red-d: var(--n1-red-d, #A81C1C);
    --no1gal-navy:  var(--n1-navy, #161133);
    --no1gal-line:  var(--n1-line, #E1E3EF);
    --no1gal-ink:   var(--n1-ink, #161133);
    --no1gal-soft:  var(--n1-soft, #F3F4FB);
    --no1gal-sans:  var(--n1-sans, 'Mona Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --no1gal-cols: 4;

    font-family: var(--no1gal-sans);
    color: var(--no1gal-ink);
}
.no1gal *, .no1gal *::before, .no1gal *::after { box-sizing: border-box; }

/* ---- filtry ---------------------------------------------------------- */
.no1gal__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}
.no1gal__filter {
    padding: 8px 16px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--no1gal-ink);
    background: #fff;
    border: 1px solid var(--no1gal-line);
    border-radius: 50px;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.no1gal__filter:hover { border-color: var(--no1gal-ink); }
.no1gal__filter[aria-pressed="true"] {
    background: var(--no1gal-navy);
    border-color: var(--no1gal-navy);
    color: #fff;
}

/* ---- siatka ---------------------------------------------------------- */
.no1gal__grid {
    display: grid;
    grid-template-columns: repeat(var(--no1gal-cols), minmax(0, 1fr));
    gap: 14px;
}
.no1gal__grid--mosaic {
    grid-auto-rows: 150px;
    grid-auto-flow: dense;
}

.no1gal__item {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--no1gal-soft);
    aspect-ratio: 4 / 3;
}
/* Kafelek jest <a> tylko przy lightbox="yes"; <div> nie udaje klikalnego. */
a.no1gal__item { cursor: zoom-in; }
/* Bez span-ów: element siatki i tak zajmuje jeden tor w każdej osi, a te
   deklaracje (0,2,0) biły modyfikatory --feature/--tall/--wide (0,1,0),
   przez co layout="mosaic" renderował się jako równa siatka. */
.no1gal__grid--mosaic .no1gal__item { aspect-ratio: auto; }
.no1gal__item--feature { grid-column: span 2; grid-row: span 2; }
.no1gal__item--tall    { grid-row: span 2; }
.no1gal__item--wide    { grid-column: span 2; }

.no1gal__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
a.no1gal__item:hover img { transform: scale(1.05); }
.no1gal__item[hidden] { display: none; }

/* Bez JS nic się nie chowa — [hidden] nakłada dopiero skrypt. */
.no1gal__more {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}
.no1gal__more[hidden] { display: none; }

.no1gal__btn {
    padding: 13px 24px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: var(--no1gal-ink);
    background: #fff;
    border: 1px solid var(--no1gal-line);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}
.no1gal__btn:hover { border-color: var(--no1gal-ink); }

.no1gal__empty {
    padding: 32px 0;
    text-align: center;
    color: var(--n1-muted, #6B7086);
    font-size: 14px;
}

@media (max-width: 991px) {
    .no1gal__grid { grid-template-columns: repeat(min(3, var(--no1gal-cols)), minmax(0, 1fr)); }
    .no1gal__grid--mosaic { grid-auto-rows: 130px; }
}
@media (max-width: 600px) {
    .no1gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .no1gal__grid--mosaic { grid-auto-rows: 110px; }
    .no1gal__item--tall { grid-row: span 1; }
}

/* ---- lightbox --------------------------------------------------------- */
.no1gal-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(22, 17, 51, .94);
    opacity: 0;
    visibility: hidden;
    /* visibility jako krok po wygaszeniu — inaczej focus() tuż po dodaniu
       klasy trafia w element jeszcze niewidoczny i cicho nie działa. */
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.no1gal-lb.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease, visibility 0s;
}
.no1gal-lb__figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.no1gal-lb__img {
    max-width: 92vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
.no1gal-lb__caption {
    font-family: var(--n1-sans, 'Mona Sans', sans-serif);
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
    text-align: center;
}
.no1gal-lb__btn {
    position: absolute;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.no1gal-lb__btn:hover {
    background: var(--n1-red, #C42424);
    border-color: var(--n1-red, #C42424);
}
.no1gal-lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.no1gal-lb__close { top: 20px; right: 20px; }
.no1gal-lb__prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.no1gal-lb__next  { right: 20px; top: 50%; transform: translateY(-50%); }
.no1gal-lb__btn[hidden] { display: none; }

@media (max-width: 600px) {
    .no1gal-lb { padding: 16px; }
    .no1gal-lb__prev { left: 8px; }
    .no1gal-lb__next { right: 8px; }
    .no1gal-lb__close { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .no1gal__item img, .no1gal-lb { transition: none; }
}