/* HSE Photography — fonts, design tokens, gallery and lightbox.
   Page layout (sidebar, text pages) lives in Breakdance and uses these tokens. */

/* Fonts: self-hosted (no Google requests). Own family names, so Breakdance
   never mistakes them for Google Fonts and loads those. */
@font-face{font-family:"HSE Mono";src:url("fonts/inconsolata-latin-var.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"HSE Sans";src:url("fonts/roboto-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"HSE Sans";src:url("fonts/roboto-latin-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#ffffff;--surface-sunken:#f4f4f4;--placeholder:#e4e4e4;
  --line:#e6e6e6;--line-strong:#8a8a8a;--muted:#6b6b6b;
  --ink:#111111;--on-ink:#ffffff;--scrim:rgba(255,255,255,.98);
  --font-mono:"HSE Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-sans:"HSE Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
  --space-6:32px;--space-7:48px;--space-8:72px;--space-9:120px;
  --radius-none:0;--radius-sm:2px;
  --sidebar-width:200px;--page-margin:32px;--grid-gap:35px;--content-max:1680px;--text-measure:560px;
  --opacity-hover:.85;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0b0b0b;--surface-sunken:#161616;--placeholder:#242424;
    --line:#262626;--line-strong:#6e6e6e;--muted:#9b9b9b;
    --ink:#f2f2f2;--on-ink:#0b0b0b;--scrim:rgba(11,11,11,.98);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0b0b0b;--surface-sunken:#161616;--placeholder:#242424;
  --line:#262626;--line-strong:#6e6e6e;--muted:#9b9b9b;
  --ink:#f2f2f2;--on-ink:#0b0b0b;--scrim:rgba(11,11,11,.98);
  color-scheme:dark;
}
@media (max-width:559px){:root{--page-margin:16px;--grid-gap:20px}}

/* Breakdance base styles read these variables; html:root outranks its :root. */
html:root{--bde-body-font-family:var(--font-sans);--bde-heading-font-family:var(--font-mono);--bde-links-color:var(--ink);--bde-links-color-hover:var(--ink)}
body{line-height:26px;-webkit-font-smoothing:antialiased}

/* ---------- Gallery ---------- */
.hse-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--grid-gap);align-items:start}
.hse-gallery.is-ready{display:flex;align-items:flex-start}
.hse-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--grid-gap)}
.hse-item{display:block;width:100%;background:var(--placeholder);border-radius:0;overflow:hidden;color:var(--ink);cursor:zoom-in}
.hse-item:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hse-img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.hse-js .hse-img{opacity:0}
.hse-js .hse-img.is-loaded{opacity:1}
.hse-item:hover .hse-img.is-loaded{opacity:var(--opacity-hover);transition-duration:.2s}
.hse-gallery-empty{color:var(--muted);font:400 16px/26px var(--font-sans);margin:0}

/* ---------- Category tiles ([hse_categories]) ---------- */
/* As many columns of at least --hse-tile-min as fit (setting "Mindestbreite einer Kachel"). */
.hse-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--hse-tile-min,320px),100%),1fr));gap:var(--grid-gap)}
.hse-tile{position:relative;display:block;color:var(--ink);text-decoration:none}
.hse-tile:hover{color:var(--ink)}
.hse-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hse-tile-media{position:relative;display:block;aspect-ratio:var(--hse-tile-ratio,4 / 5);overflow:hidden;background:var(--placeholder)}
.hse-tile-img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.hse-js .hse-tile-img{opacity:0}
.hse-js .hse-tile-img.is-loaded{opacity:1}
/* Touch screens: the name sits below the image. */
.hse-tile-label{display:block;margin-top:var(--space-2);font:400 12px/18px var(--font-mono);letter-spacing:.08em}
/* Mouse: a quiet overlay with the name appears on hover or keyboard focus. */
@media (hover:hover) and (pointer:fine){
  .hse-tile-media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--hse-tile-scrim,.45));opacity:0;transition:opacity .2s}
  .hse-tile-label{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:var(--space-4);
    color:#fff;font:600 20px/28px var(--font-mono);letter-spacing:.02em;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}
  .hse-tile:hover .hse-tile-media::after,.hse-tile:focus-visible .hse-tile-media::after,
  .hse-tile:hover .hse-tile-label,.hse-tile:focus-visible .hse-tile-label{opacity:1}
}

/* ---------- Lightbox ---------- */
.hse-lb{position:fixed;inset:var(--wp-admin--admin-bar--height,0px) 0 0 0;z-index:100000;display:flex;flex-direction:column;
  background:var(--scrim);color:var(--ink);padding:var(--space-7) var(--space-7) var(--space-4)}
.hse-lb[hidden]{display:none}
.hse-lb-figure{flex:1;min-height:0;margin:0;display:flex;align-items:center;justify-content:center}
.hse-lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.hse-lb-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:var(--space-4);
  padding-bottom:env(safe-area-inset-bottom,0px);font:400 12px/18px var(--font-mono);letter-spacing:.08em}
.hse-lb-meta{color:var(--muted)}
.hse-lb-caption{flex:1;min-width:0}
.hse-lb-ctl{display:flex;gap:var(--space-5)}
.hse-lb-btn{all:unset;cursor:pointer;color:var(--ink);font:inherit;letter-spacing:inherit}
.hse-lb-btn[hidden]{display:none}
.hse-lb-btn:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--space-1)}
.hse-lb-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--radius-sm)}
html.hse-lb-open,html.hse-lb-open body{overflow:hidden}
@media (max-width:1099px){.hse-lb{padding:var(--space-5) var(--space-4) var(--space-4)}}
@media (max-width:559px){
  .hse-lb-bar{flex-wrap:wrap}
  .hse-lb-ctl{width:100%;justify-content:space-between}
}

/* ---------- Menus ([hse_menu]) ---------- */
.hse-menu,.hse-menu .sub-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.hse-menu .sub-menu{margin-top:var(--space-3);padding-left:var(--space-4)}
.hse-menu a{font:400 15px/24px var(--font-sans);color:var(--ink);text-decoration:none}
.hse-menu a:hover,.hse-menu a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--space-1)}
.hse-menu a[aria-current="page"],.hse-menu .current-page-ancestor>a{font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--space-1)}
.hse-menu a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--radius-sm)}

/* ---------- Theme toggle ---------- */
.hse-theme-toggle{all:unset;cursor:pointer;color:var(--muted);font:400 12px/18px var(--font-mono);letter-spacing:.08em}
.hse-theme-toggle:hover{text-decoration:underline;text-underline-offset:var(--space-1)}
.hse-theme-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--radius-sm)}

@media (prefers-reduced-motion:reduce){
  .hse-img,.hse-item:hover .hse-img.is-loaded,.hse-tile-img,.hse-tile-media::after,.hse-tile-label{transition:none}
}