/* ====== Lokale webfonts (plaats TTF-bestanden in /fonts) ====== */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ====== CSS-variabelen ====== */
:root{
  --bg: #0e1114;
  --ink: #e7eef3;
  --muted: #a6b2bd;
  --brand: #57c1c9;
  --brand-2:#e4b363;
  --card:#151a1f;
  --line: rgba(255,255,255,.08);

  --radius: 16px;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* ====== Reset / Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}
img{
  display:block;
  width:100%;
  height:auto;
  max-width:350px; /* глобальный лимит ширины изображений */
  border-radius: 10px;
}
a{color: var(--brand); text-decoration: none}
a:hover{color: var(--brand-2)}
.container{
  width: min(1100px, 92vw);
  margin-inline:auto;
  padding-inline: 12px;
}

/* ====== Skip link ====== */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:8px 12px;
  background:#000; color:#fff; z-index:9999; border-radius:8px;
}

/* ====== Header (fixed) ====== */
.site-header{
  position:sticky; top:0; inset-inline:0;
  background: rgba(14,17,20,.78);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
  z-index: 1000;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{
  font-family: "Merriweather", serif;
  font-weight:700;
  letter-spacing:.5px;
  font-size: clamp(18px, 2.2vw, 22px);
  color:#fff;
}
.site-nav ul{display:flex; gap:18px; list-style:none; padding:0; margin:0}
.site-nav a{
  display:inline-block; padding:8px 12px; border-radius:10px; color:#dfe8ef;
  transition: transform .25s ease, background .25s ease;
}
.site-nav a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.06) }

/* ====== Footer ====== */
.site-footer{
  border-top:1px solid var(--line);
  background: #0b0e11;
  margin-top: 60px;
}
.footer-inner{ padding: 28px 0 }
.foot-title{
  margin:0 0 6px 0;
  font-family:"Merriweather", serif; font-size:18px;
}
.foot-copy{margin:0 0 8px 0; color:var(--muted)}
.foot-small{margin:0; color:#7f8b96; font-size: 12px}

/* ====== Reveal on scroll (IntersectionObserver toggles .io-in) ====== */
.reveal{opacity:0; transform: translateY(12px) scale(.98); transition: opacity .6s ease, transform .6s ease}
.reveal.io-in{opacity:1; transform: none}

/* ====== Prefer reduced motion ====== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* ====== Responsiveness (globale randen) ====== */
@media (max-width: 720px){
  .site-nav ul{gap:10px}
  .header-inner{padding: 12px 0}
}
/* скрытый текст для a11y */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

 /* Шапка без бургера: навигация всегда видима и удобна на мобилках */
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.site-nav{ flex:1; display:flex; justify-content:flex-end; min-width:0 }
.site-nav ul{
  display:flex; gap:12px; list-style:none; margin:0; padding:0;
  overflow-x:auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar{ display:none }
.site-nav a{
  display:inline-block; padding:8px 12px; border-radius:10px; color:#dfe8ef;
  transition: transform .2s ease, background .2s ease;
  white-space: nowrap;
}
.site-nav a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.06) }
.site-nav a.current{ background: rgba(255,255,255,.10) }

/* Небольшая плотность на узких экранах */
@media (max-width: 720px){
  .site-nav a{ padding:8px 10px; font-size:14px }
}
html, body{ overflow-x: hidden; } /* не влияет на горизонт-скролл меню в .site-nav ul */
/* ===== Footer (NL) ===== */
.footer{
  border-top:1px solid var(--line);
  background:#0b0e11;
  margin-top: 60px;
  color: var(--ink);
}
.footer-container{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(12px,3vw,24px);
  padding: 28px 0;
}
.footer-brand{
  margin:0 0 6px 0;
  font-family:"Merriweather", serif;
  font-weight:700;
  letter-spacing:.3px;
}
.footer a{ color:#dfe8ef; text-decoration:none }
.footer a:hover{ color: var(--brand-2) }

.footer-column p{ margin:.25rem 0 }
.footer-links{
  display:flex; gap:12px; align-items:flex-start; justify-content:flex-end; flex-wrap:wrap;
}
.footer-links a{
  display:inline-block; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; background: rgba(255,255,255,.04);
  transition: transform .2s ease, background .2s ease;
}
.footer-links a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.07) }

/* появление при скролле (совместимо с нашим IO) */
.animate-on-scroll{ opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease }
.animate-on-scroll.io-in{ opacity:1; transform:none }

@media (max-width: 820px){
  .footer-container{ grid-template-columns: 1fr; }
  .footer-links{ justify-content:flex-start }
}
/* === Global media fixes (prevent overflow & tall images) === */
:root { --img-max: 350px; }

/* 1) Базовое ограничение и центрирование */
.site-main figure {
  width: min(100%, var(--img-max));
  max-width: var(--img-max);
  margin: 0;               /* убираем неравномерные внешние отступы по умолчанию */
  border-radius: 14px;
  overflow: hidden;        /* чтобы ховер-зум не вылезал за рамки */
  box-shadow: var(--shadow);
}
.site-main figure > img {
  display: block;
  width: 100%;
  height: auto;            /* как дефолт */
  aspect-ratio: 4 / 3;     /* единый визуальный ритм */
  object-fit: cover;       /* мягкий кроп без искажений */
}

/* 2) Карточки/контейнеры с медиа — не шире 350px, выравниваем */
[class*="grid"] > figure,
[class*="beeld"] > figure,
[class*="card"] > figure {
  justify-self: start;
}

/* 3) На средних экранах избегаем налезания колонок и «косых» карточек */
@media (max-width: 1100px) {
  /* большинство секций у нас построены как .something-inner с grid */
  .site-main .container[class$="-inner"] {
    grid-template-columns: 1fr !important; /* вместо 2 колонок */
  }

  /* отключаем смещения/наклоны, которые вносят хаос на узких ширинах */
  .site-main .reveal,
  .site-main [class*="tilt"],
  .site-main [class*="float"],
  .site-main [class*="stack"] {
    transform: none !important;
    margin: 0 !important;
  }
}

/* 4) Подстраховка от внезапного переполнения */
img { max-width: 100%; height: auto; }
/* ==== FIX: универсальный контроль карточек/изображений ==== */
:root { --img-max: 350px; --card-max: 370px; }

/* 1) Любые figure/карточки с медиa — не шире, мягкий кроп 4:3 */
.site-main figure,
.site-main [class*="card"] {
  max-width: var(--card-max);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.site-main figure > img,
.site-main [class*="card"] img,
.site-main [class*="beeld"] img,
.site-main [class*="grid"] img {
  width: min(100%, var(--img-max)) !important;
  max-width: var(--img-max) !important;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* 2 — SAFE: лимитируем ширину детей, не трогая layout контейнеров */
.site-main [class$="-grid"] > *,
.site-main [class*="-grid "] > *,
.site-main [class$="-beeld"] > *,
.site-main [class*="-beeld "] > * {
  max-width: var(--card-max);
  justify-self: start;
}

/* 3) Схлопываем двухколоночные лэйауты в одну колонку на средних ширинах */
@media (max-width: 1100px) {
  .site-main section .container {
    grid-template-columns: 1fr !important;
  }
}

/* 4) Жёсткое правило для «проблемной» зоны 900–1200px: максимум 3 столбца */
@media (min-width: 900px) and (max-width: 1200px) {
  .site-main [class*="grid"] {
    grid-template-columns: repeat(3, minmax(min(100%, var(--card-max)), 1fr));
  }
  .site-main [class*="grid"] > * {
    max-width: var(--card-max);
  }
}

/* 5) Подстраховка от переполнения вообще */
img { max-width: 100%; height: auto; }
/* Ambachtsatlas: аккуратные колонки по существующему layout */
.ambacht-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-max)), 1fr));
  gap: 14px;
}