/**
 * The Portfolio - frontend styles. All sizing/colour reads from per-gallery
 * CSS custom properties set in PHP, plus a global --tpf-accent. Everything is
 * scoped under .tpf-gallery so it never leaks into the theme.
 */
:root { --tpf-accent: #2563eb; }

.tpf-gallery {
    --tpf-cols: 3;
    --tpf-cols-tablet: 2;
    --tpf-cols-mobile: 1;
    --tpf-gutter: 12px;
    --tpf-row-h: 240px;
    --tpf-ratio: 4/3;
    --tpf-overlay: 0, 0, 0;
    --tpf-overlay-op: 0.45;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 1.5rem;
}
.tpf-gallery *, .tpf-gallery *::before, .tpf-gallery *::after { box-sizing: border-box; }

.tpf-gallery .tpf-item {
    margin: 0; padding: 0; overflow: hidden; position: relative;
    border-radius: 6px; background: #f1f1f1;
}
.tpf-link, .tpf-item > .tpf-link {
    display: block; position: relative; width: 100%; height: 100%;
    text-decoration: none; color: #fff;
}
.tpf-media { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.tpf-img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s ease, opacity 0.4s ease;
}

/* Overlay */
.tpf-overlay {
    position: absolute; inset: 0; margin: 0; display: flex; align-items: flex-end;
    padding: 1rem; background: rgba(var(--tpf-overlay), var(--tpf-overlay-op));
    opacity: 0; transition: opacity 0.35s ease; pointer-events: none;
}
.tpf-overlay-inner { transform: translateY(8px); transition: transform 0.35s ease; }
.tpf-title { display: block; font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.tpf-caption { display: block; margin-top: 0.25rem; font-size: 0.85rem; opacity: 0.85; }
.tpf-item:hover .tpf-overlay, .tpf-link:focus-visible .tpf-overlay { opacity: 1; }
.tpf-item:hover .tpf-overlay-inner { transform: translateY(0); }

/* Video play badge */
.tpf-play {
    position: absolute; top: 50%; left: 50%; width: 64px; height: 64px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: rgba(0, 0, 0, 0.55); transition: background 0.3s ease, transform 0.3s ease;
}
.tpf-play::after {
    content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
    border-style: solid; border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}
.tpf-item--video:hover .tpf-play { background: var(--tpf-accent); transform: translate(-50%, -50%) scale(1.08); }

/* ===== Layouts ===== */
.tpf-layout-grid .tpf-grid { display: grid; grid-template-columns: repeat(var(--tpf-cols), 1fr); gap: var(--tpf-gutter); }
.tpf-layout-grid .tpf-item { aspect-ratio: var(--tpf-ratio); }

.tpf-layout-tiles .tpf-grid { display: grid; grid-template-columns: repeat(var(--tpf-cols), 1fr); grid-auto-rows: 1fr; gap: var(--tpf-gutter); }
.tpf-layout-tiles .tpf-item { aspect-ratio: var(--tpf-ratio); }
.tpf-layout-tiles .tpf-item:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

.tpf-layout-masonry .tpf-grid { position: relative; }
.tpf-layout-masonry .tpf-item { position: absolute; top: 0; left: 0; }
.tpf-layout-masonry.tpf-no-js .tpf-grid { column-gap: var(--tpf-gutter); column-count: var(--tpf-cols); }
.tpf-layout-masonry.tpf-no-js .tpf-item { position: static; width: 100%; margin-bottom: var(--tpf-gutter); break-inside: avoid; }

.tpf-layout-justified .tpf-grid { display: flex; flex-wrap: wrap; gap: var(--tpf-gutter); }
.tpf-layout-justified .tpf-item { height: var(--tpf-row-h); flex-grow: 0; }

.tpf-layout-slider .tpf-grid {
    display: flex; gap: var(--tpf-gutter); overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.tpf-layout-slider .tpf-grid::-webkit-scrollbar { display: none; }
.tpf-layout-slider .tpf-item {
    flex: 0 0 calc((100% - (var(--tpf-cols) - 1) * var(--tpf-gutter)) / var(--tpf-cols));
    aspect-ratio: var(--tpf-ratio); scroll-snap-align: start;
}
.tpf-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: #fff; color: #111; font-size: 26px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); transition: background 0.2s ease, color 0.2s ease;
}
.tpf-nav:hover { background: var(--tpf-accent); color: #fff; }
.tpf-prev { left: 8px; }
.tpf-next { right: 8px; }

/* ===== Skins ===== */
.tpf-skin-fade .tpf-overlay { opacity: 0; }
.tpf-skin-zoom .tpf-item:hover .tpf-img { transform: scale(1.08); }
.tpf-skin-slide-up .tpf-overlay { align-items: flex-end; background: linear-gradient(to top, rgba(var(--tpf-overlay), var(--tpf-overlay-op)) 0%, transparent 70%); opacity: 1; }
.tpf-skin-slide-up .tpf-overlay-inner { transform: translateY(110%); }
.tpf-skin-slide-up .tpf-item:hover .tpf-overlay-inner { transform: translateY(0); }
.tpf-skin-frame .tpf-media::after { content: ""; position: absolute; inset: 12px; border: 2px solid #fff; opacity: 0; transform: scale(1.05); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; z-index: 2; }
.tpf-skin-frame .tpf-item:hover .tpf-media::after { opacity: 1; transform: scale(1); }
.tpf-skin-minimal .tpf-img { filter: grayscale(100%); }
.tpf-skin-minimal .tpf-item:hover .tpf-img { filter: grayscale(0); }
.tpf-skin-minimal .tpf-overlay { background: transparent; }
.tpf-skin-classic .tpf-overlay { opacity: 1; background: linear-gradient(to top, rgba(var(--tpf-overlay), var(--tpf-overlay-op)), transparent 60%); }

/* ===== Filter ===== */
.tpf-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tpf-filter-btn { border: 1px solid rgba(0, 0, 0, 0.15); background: transparent; border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.85rem; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.tpf-filter-btn.is-active, .tpf-filter-btn:hover { background: var(--tpf-accent); border-color: var(--tpf-accent); color: #fff; }
.tpf-empty { padding: 1rem; border: 1px dashed rgba(0, 0, 0, 0.25); border-radius: 6px; color: #666; font-size: 0.9rem; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .tpf-layout-grid .tpf-grid, .tpf-layout-tiles .tpf-grid { grid-template-columns: repeat(var(--tpf-cols-tablet), 1fr); }
    .tpf-layout-slider .tpf-item { flex-basis: calc((100% - (var(--tpf-cols-tablet) - 1) * var(--tpf-gutter)) / var(--tpf-cols-tablet)); }
}
@media (max-width: 600px) {
    .tpf-layout-grid .tpf-grid, .tpf-layout-tiles .tpf-grid { grid-template-columns: repeat(var(--tpf-cols-mobile), 1fr); }
    .tpf-layout-tiles .tpf-item:nth-child(7n + 1) { grid-column: span 1; grid-row: span 1; aspect-ratio: var(--tpf-ratio); }
    .tpf-layout-slider .tpf-item { flex-basis: calc((100% - (var(--tpf-cols-mobile) - 1) * var(--tpf-gutter)) / var(--tpf-cols-mobile)); }
}

/* ===== Lightbox ===== */
.tpf-lb {
    position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center;
    background: rgba(10, 10, 12, 0.92); opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.tpf-lb.tpf-lb--light { background: rgba(245, 245, 247, 0.96); }
.tpf-lb.is-open { opacity: 1; visibility: visible; }
.tpf-lb__stage { position: relative; max-width: 90vw; max-height: 86vh; display: flex; align-items: center; justify-content: center; }
.tpf-lb__img { max-width: 90vw; max-height: 80vh; display: block; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); }
.tpf-lb__video { position: relative; width: min(90vw, 1280px); aspect-ratio: 16 / 9; background: #000; }
.tpf-lb__video iframe, .tpf-lb__video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tpf-lb__caption { position: absolute; left: 0; right: 0; bottom: -2.4rem; text-align: center; color: #fff; font-size: 0.9rem; }
.tpf-lb--light .tpf-lb__caption { color: #222; }
.tpf-lb__btn { position: absolute; z-index: 2; border: 0; background: rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; line-height: 1; transition: background 0.2s ease; }
.tpf-lb__btn:hover { background: var(--tpf-accent); }
.tpf-lb--light .tpf-lb__btn { background: rgba(0, 0, 0, 0.55); }
.tpf-lb__close { top: 18px; right: 18px; }
.tpf-lb__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.tpf-lb__next { right: 18px; top: 50%; transform: translateY(-50%); }
.tpf-lb__counter { position: absolute; top: 26px; left: 24px; color: #fff; font-size: 0.85rem; opacity: 0.75; }
.tpf-lb--light .tpf-lb__counter { color: #222; }
@media (max-width: 600px) {
    .tpf-lb__prev { left: 6px; }
    .tpf-lb__next { right: 6px; }
    .tpf-lb__btn { width: 40px; height: 40px; font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .tpf-img, .tpf-overlay, .tpf-overlay-inner, .tpf-lb { transition: none; }
}