/* ============================================================
   KBK Photo Gallery — Frontend Styles
   Brand: #B91818 (red accent) / #000 (black)
   ============================================================ */

   :root {
    --kbk-red:    #B91818;
    --kbk-black:  #000;
    --kbk-white:  #fff;
    --kbk-grey:   #f4f4f4;
    --kbk-border: #e0e0e0;
    --kbk-text:   #222;
    --kbk-muted:  #666;
    --kbk-radius: 4px;
    --kbk-speed:  0.22s;
    --kbk-shadow: 0 2px 12px rgba(0,0,0,.12);
}

/* ── Wrap ── */
.kbk-gallery-wrap {
    font-family: inherit;
    color: var(--kbk-text);
    width: 100%;
}

/* ── Filters ── */
.kbk-filters {
    background: var(--kbk-black);
    border-radius: var(--kbk-radius);
    padding: 20px 24px;
    margin-bottom: 28px;
}

.kbk-filters-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}

.kbk-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 200px;
}

.kbk-filter-label {
    color: #aaa;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.kbk-select-wrap {
    position: relative;
}

.kbk-filter-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: #111;
    border: 1px solid #333;
    color: var(--kbk-white);
    padding: 10px 38px 10px 14px;
    font-size: 14px;
    border-radius: var(--kbk-radius);
    cursor: pointer;
    transition: border-color var(--kbk-speed);
    outline: none;
}

.kbk-filter-select:focus,
.kbk-filter-select:hover {
    border-color: var(--kbk-red);
}

.kbk-filter-select option {
    background: #111;
    color: var(--kbk-white);
}

.kbk-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #888;
    pointer-events: none;
}

.kbk-filter-reset {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #444;
    color: #aaa;
    padding: 10px 16px;
    font-size: 13px;
    border-radius: var(--kbk-radius);
    cursor: pointer;
    transition: all var(--kbk-speed);
    white-space: nowrap;
    align-self: flex-end;
}

.kbk-filter-reset svg {
    width: 14px;
    height: 14px;
}

.kbk-filter-reset:hover {
    border-color: var(--kbk-red);
    color: var(--kbk-red);
}

.kbk-filter-count {
    color: #666;
    font-size: 13px;
    align-self: flex-end;
    padding-bottom: 10px;
    white-space: nowrap;
    margin-left: auto;
}

/* ── Gallery cards (overview) ── */
.kbk-gallery-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}
.kbk-gallery-cards[hidden] {
    display: none !important;
}

.kbk-gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--kbk-radius);
    background: #111;
    cursor: pointer;
    aspect-ratio: 4/3;
    outline: none;
}

.kbk-gallery-card:focus-visible {
    outline: 2px solid var(--kbk-red);
    outline-offset: 2px;
}

.kbk-gallery-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, opacity 0.3s ease;
    opacity: 0;
}

.kbk-gallery-card img.kbk-loaded {
    opacity: 1;
}

.kbk-gallery-card img.kbk-no-image {
    opacity: 0.3;
    background: #222;
}

.kbk-gallery-card:hover img {
    transform: scale(1.05);
}

.kbk-gallery-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--kbk-speed);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.kbk-gallery-card:hover .kbk-gallery-card-overlay,
.kbk-gallery-card:focus-visible .kbk-gallery-card-overlay {
    opacity: 1;
}

.kbk-gallery-card-title {
    color: var(--kbk-white) !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    margin: 0 0 4px;
    line-height: 1.2 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.5) !important;
}

.kbk-gallery-card-count {
    color: rgba(255,255,255,.8) !important;
    font-size: 13px !important;
}

.kbk-gallery-card-photographer {
    display: block;
    font-size: 12px !important;
    color: rgba(255,255,255,.75) !important;
    margin-top: 4px;
}

.kbk-gallery-card-photographer a {
    color: inherit !important;
    text-decoration: underline !important;
}

.kbk-gallery-card-photographer a:hover {
	color: rgba(255,255,255,1) !important;
}

/* ── Grid ── */
.kbk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.kbk-gallery-wrap[data-columns="2"] .kbk-grid { grid-template-columns: repeat(2, 1fr); }
.kbk-gallery-wrap[data-columns="4"] .kbk-grid { grid-template-columns: repeat(4, 1fr); }

/* ── Grid Item ── */
.kbk-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--kbk-radius);
    background: #111;
    cursor: pointer;
    aspect-ratio: 4/3;
    outline: none;
}

.kbk-item:focus-visible {
    outline: 2px solid var(--kbk-red);
    outline-offset: 2px;
}

.kbk-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease, opacity 0.3s ease;
    opacity: 0;
}

.kbk-item img.kbk-loaded {
    opacity: 1;
}

.kbk-item:hover img {
    transform: scale(1.05);
}

/* Overlay on hover */
.kbk-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--kbk-speed);
    display: flex;
    align-items: flex-end;
    padding: 14px;
}

.kbk-item:hover .kbk-item-overlay,
.kbk-item:focus-visible .kbk-item-overlay {
    opacity: 1;
}

.kbk-item-caption {
    color: var(--kbk-white);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.kbk-item-photographer {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,.7);
    margin-top: 2px;
}

/* Skeleton loader for items */
.kbk-item.kbk-skeleton {
    background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: kbk-shimmer 1.4s infinite;
    cursor: default;
}

@keyframes kbk-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── States ── */
.kbk-state[hidden] {
    display: none;
}

.kbk-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    text-align: center;
    color: var(--kbk-muted);
}

.kbk-state--empty svg {
    width: 56px;
    height: 56px;
    color: #ccc;
}

.kbk-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(185,24,24,.2);
    border-top-color: var(--kbk-red);
    border-radius: 50%;
    animation: kbk-spin .7s linear infinite;
}

@keyframes kbk-spin {
    to { transform: rotate(360deg); }
}

/* ── Load More ── */
.kbk-loadmore-wrap {
    text-align: center;
    padding: 36px 0 12px;
}

.kbk-loadmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--kbk-red);
    color: var(--kbk-white);
    border: none;
    padding: 14px 40px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .03em;
    border-radius: var(--kbk-radius);
    cursor: pointer;
    transition: background var(--kbk-speed), transform var(--kbk-speed);
}

.kbk-loadmore-btn:hover {
    background: #9a1414;
    transform: translateY(-1px);
}

.kbk-loadmore-btn:active {
    transform: translateY(0);
}

.kbk-loadmore-btn.kbk-loading .kbk-loadmore-text { display: none; }
.kbk-loadmore-btn:not(.kbk-loading) .kbk-loadmore-spinner { display: none; }

.kbk-loadmore-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: kbk-spin .7s linear infinite;
}

/* ── Lightbox ── */
.kbk-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kbk-lightbox[hidden] { display: none; }

.kbk-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.93);
}

.kbk-lightbox-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: min(90vw, 1200px);
    max-height: 95vh;
    width: 100%;
}

/* Buttons */
.kbk-lb-btn {
    position: absolute;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--kbk-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--kbk-speed), transform var(--kbk-speed);
    z-index: 10;
}

.kbk-lb-btn:hover {
    background: var(--kbk-red);
    border-color: var(--kbk-red);
}

.kbk-lb-btn svg {
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.kbk-lb-close {
    top: -16px;
    right: -16px;
    width: 44px;
    height: 44px;
}

.kbk-lb-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
}

.kbk-lb-prev { left: -26px; }
.kbk-lb-next { right: -26px; }

.kbk-lb-nav:hover { transform: translateY(-50%) scale(1.08); }

/* Image area */
.kbk-lb-image-wrap {
    position: relative;
    background: #0a0a0a;
    border-radius: var(--kbk-radius) var(--kbk-radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    max-height: calc(95vh - 120px);
    overflow: hidden;
}

.kbk-lb-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a0a0a;
    transition: opacity .3s;
}

.kbk-lb-loader.kbk-hidden { opacity: 0; pointer-events: none; }

.kbk-lb-img {
    display: block;
    max-width: 100%;
    max-height: calc(95vh - 120px);
    object-fit: contain;
    opacity: 0;
    transition: opacity .3s ease;
}

.kbk-lb-img.kbk-loaded { opacity: 1; }

/* Info bar */
.kbk-lb-info {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.kbk-lb-meta { flex: 1; min-width: 0; }

.kbk-lb-caption {
    color: var(--kbk-white) !important;
    font-size: 15px!important;
    font-weight: 600!important;
    margin: 0 0 2px;
    white-space: nowrap!important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kbk-lb-description {
    color: #aaa!important;
    font-size: 13px!important;
    margin: 0 0 2px;
}

.kbk-lb-credit {
    color: #666!important;
    font-size: 12px!important;
    margin: 0;
}

.kbk-lb-credit a {
    color: #888!important;
    text-decoration: underline!important;
}

.kbk-lb-credit a:hover {
    color: var(--kbk-white);
}

.kbk-lb-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.kbk-lb-counter {
    color: #666;
    font-size: 13px;
    white-space: nowrap;
}

.kbk-lb-download {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--kbk-white) !important;
    background: var(--kbk-red);
    text-decoration: none;
    padding: 7px 14px;
    border-radius: var(--kbk-radius);
    font-size: 13px;
    font-weight: 500;
    transition: background var(--kbk-speed);
    white-space: nowrap;
}

.kbk-lb-download svg {
    width: 14px;
    height: 14px;
}

.kbk-lb-download:hover {
    background: #9a1414;
    color: var(--kbk-white) !important;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .kbk-gallery-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .kbk-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
    }

    .kbk-filters-inner {
        flex-direction: column;
        gap: 12px;
    }

    .kbk-filter-group { min-width: 100%; }

    .kbk-filter-reset { width: 100%; justify-content: center; }

    .kbk-filter-count { margin-left: 0; }

    .kbk-lb-prev { left: -10px; }
    .kbk-lb-next { right: -10px; }

    .kbk-lb-close { top: -10px; right: -10px; }

    .kbk-lb-info {
        flex-direction: column;
        align-items: flex-start;
    }
}

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

    .kbk-grid {
        grid-template-columns: 1fr !important;
    }
}