/*
Theme Name: Vlado Anjel - Portfólio
Author: Vlado Anjel
Author URI: https://vladoanjel.sk
Description: Svetlá fotografická galéria s výberom tvorby a automatickým načítaním pôvodných fotografií z uploads/dobrefotky.
Version: 1.1.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: dobrefotky-portfolio
*/

:root{--dfp-paper:#fdfdfb;--dfp-ink:#1d1d1b;--dfp-muted:#66665f;--dfp-rule:#d9d9d2;--dfp-accent:#715536;--dfp-gap:clamp(20px,2.6vw,32px)}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--dfp-paper);color:var(--dfp-ink);scrollbar-gutter:stable}
body{margin:0;font-family:Manrope,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.55;background:var(--dfp-paper);color:var(--dfp-ink);-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default;opacity:.35}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:5px}
img{display:block;max-width:100%;height:auto}
figure,h1,h2,p{margin:0}
[hidden]{display:none!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-100px;left:20px;padding:12px 18px;background:var(--dfp-ink);color:white;z-index:1000}
.skip-link:focus{top:12px}
.site-shell{width:100%;max-width:1248px;margin:0 auto;padding:0 clamp(20px,4.2vw,52px)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:44px 0 34px;border-bottom:1px solid var(--dfp-rule)}
.site-brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:9px;line-height:1.15}
.brand-name{font-size:clamp(30px,3.6vw,44px);font-weight:500;letter-spacing:-.045em}
.brand-role{font-size:.75rem;letter-spacing:.25em;text-transform:uppercase}
.business-link{text-align:right;line-height:1.7;flex-shrink:0}
.business-link>span{display:block;color:var(--dfp-muted);font-size:.8125rem}
.business-link strong{font-size:.9375rem;font-weight:500;color:var(--dfp-accent)}
.business-link strong>span{margin-left:3px}
.business-link:hover strong{text-decoration:underline;text-underline-offset:4px}
.gallery-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 22px;padding-top:34px}
.gallery-heading h1{font-size:1.375rem;font-weight:500;line-height:1.4;letter-spacing:-.025em}
.gallery-heading>span{font-size:.8125rem;color:var(--dfp-muted)}
.gallery-filters{display:flex;align-items:center;flex-wrap:wrap;gap:4px 26px;padding:16px 0 26px}
.gallery-filters a{font-size:.875rem;color:var(--dfp-muted);padding:9px 0 7px;min-height:40px;border-bottom:1px solid transparent}
.gallery-filters a[aria-current=page]{color:var(--dfp-ink);border-bottom-color:var(--dfp-ink)}
.gallery-filters a:hover{color:var(--dfp-ink)}
.portfolio-grid{padding:8px 0 12px}
.portfolio-spread{display:grid;grid-template-columns:1fr 1.23fr 1fr;align-items:center;gap:var(--dfp-gap);margin:0 0 60px}
.portfolio-middle{display:grid;gap:var(--dfp-gap);min-width:0}
.photo-card{min-width:0;break-inside:avoid}
.photo-link{display:block;cursor:zoom-in}
.photo-link img{width:auto;height:auto;max-width:100%;border:0;border-radius:0;box-shadow:none;object-fit:contain;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
.photo-card figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:10px;font-size:.8125rem;line-height:1.5;color:var(--dfp-muted)}
.photo-number{font-variant-numeric:tabular-nums;font-size:.75rem}
.category-grid{column-count:3;column-gap:var(--dfp-gap)}
.category-grid .photo-card{margin:0 0 32px;display:inline-block;width:100%;vertical-align:top}
.gallery-empty{padding:40px 0 90px;color:var(--dfp-muted)}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px 30px;border-top:1px solid var(--dfp-rule);padding:26px 0 35px;margin-top:6px}
.footer-mail{font-size:.9375rem;font-weight:500;overflow-wrap:anywhere}
.footer-mail>span{margin-left:5px}
.footer-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px 22px;font-size:.8125rem;color:var(--dfp-muted)}
.footer-business{color:var(--dfp-accent);font-weight:500}
.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.not-found{padding:75px 0 120px}
.not-found>p{font-size:.875rem;color:var(--dfp-muted);margin-bottom:14px}
.not-found h1{font-size:clamp(26px,4vw,40px);font-weight:500;line-height:1.3;margin-bottom:28px}
.not-found>a{border-bottom:1px solid var(--dfp-ink);padding-bottom:5px}

/* The lightbox uses intrinsic image dimensions: it can scale down, never up. */
body.photo-viewer-open{overflow:hidden}
.photo-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#111214;color:#f4f4ef;overflow:hidden}
.photo-viewer::backdrop{background:#111214}
.photo-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.viewer-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px max(24px,env(safe-area-inset-right)) 14px max(24px,env(safe-area-inset-left));min-height:68px}
.viewer-heading h2{font-size:.9375rem;font-weight:400;line-height:1.45;color:#deded8}
.viewer-close{flex-shrink:0;display:grid;place-items:center;background:transparent;color:inherit;border:1px solid #45474a;width:44px;height:44px;font-size:30px;line-height:1;padding:0}
.viewer-close:hover,.viewer-arrow:hover,.viewer-mobile-nav button:hover{background:#292c30}
.viewer-stage{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 80px;touch-action:pan-y pinch-zoom}
#viewer-image{display:block;flex:0 1 auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;-webkit-user-drag:none}
.viewer-message{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px 75px;color:#c7c8c4;font-size:.9375rem;pointer-events:none}
.viewer-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:62px;padding:0;background:transparent;color:inherit;border:1px solid #45474a;font-size:40px;line-height:1}
.viewer-prev{left:20px}.viewer-next{right:20px}
.viewer-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px max(24px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));font-size:.8125rem;color:#c7c8c4;min-height:58px}
#viewer-counter{font-variant-numeric:tabular-nums}
.viewer-mobile-nav{display:none;gap:10px}
.viewer-mobile-nav button{width:44px;height:44px;padding:0;border:1px solid #45474a;background:transparent;color:#f4f4ef;font-size:23px;line-height:1}
@media(max-width:900px){
    .site-header{padding-top:34px;padding-bottom:28px}
    .gallery-filters{gap:3px 21px}
    .portfolio-spread{gap:22px;margin-bottom:46px}
    .portfolio-middle{gap:22px}
    .category-grid{column-count:2}
    .site-footer{align-items:flex-start;flex-wrap:wrap}
}
@media(max-width:620px){
    .site-header{align-items:flex-start;padding:27px 0;gap:22px}
    .brand-name{font-size:1.9375rem}
    .brand-role{font-size:.75rem;letter-spacing:.22em}
    .business-link>span{font-size:.75rem}
    .business-link strong{font-size:.875rem}
    .gallery-heading{padding-top:26px}
    .gallery-heading h1{font-size:1.25rem}
    .gallery-filters{gap:2px 20px;padding:13px 0 20px}
    .gallery-filters a{min-height:44px}
    .portfolio-spread{display:block;margin-bottom:0}
    .portfolio-middle{display:contents}
    .portfolio-spread .photo-card{margin-bottom:32px}
    .category-grid{column-count:1}
    .site-footer{padding-top:24px;margin-top:10px;gap:22px}
    .footer-links{justify-content:flex-start;gap:12px 19px}
    .viewer-heading{padding:12px 14px;min-height:66px}
    .viewer-stage{padding:0 12px}
    .viewer-arrow{display:none}
    .viewer-footer{padding:15px 14px max(15px,env(safe-area-inset-bottom));gap:12px}
    .viewer-credit{display:none}
    .viewer-mobile-nav{display:flex}
}
@media(max-width:380px){
    .site-header{flex-wrap:wrap;gap:18px}
    .business-link{text-align:left}
    .gallery-heading>span{width:100%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dynamics — additive only. Classes below are added purely by main.js;
   without JS or with reduced motion requested, photos render exactly as before. */
@media(prefers-reduced-motion:no-preference){
    .photo-link img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
    .photo-link:hover img,.photo-link:focus-visible img{transform:scale(1.018)}
    .photo-card.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
    .photo-card.reveal.is-visible{opacity:1;transform:none}
    .portfolio-grid{transition:opacity .22s ease}
    .portfolio-grid.is-switching{opacity:0}
}