/* ==========================================================================
   Poelstraat 38, Oostkamp — warm en eerlijk
   Alleen basis-, animatie- en galerijstijlen. Layout en componenten
   gebeuren met Tailwind-utilities in de HTML.
   ========================================================================== */

:root {
  --hairline: #cdd3c4;
  --paper: #f7f6f2;
  --ink: #22261e;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fraunces: rustiger, minder speels */
.font-display {
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-optical-sizing: auto;
}

::selection {
  background-color: #5ba4e4;
  color: #f7f6f2;
}

/* Iconen netjes op de tekstlijn, grootte en kleur via Tailwind op het span */
.material-symbols-outlined {
  line-height: 1;
  vertical-align: -0.16em;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #2b6c9e;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Reveal bij scrollen — enige animatie op de pagina
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Fotogalerij: aaneengesloten raster, geen kaders, hover op de wrapper
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.gallery[data-columns='2'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery[data-columns='3'] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .gallery[data-columns='3'] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gallery a {
  display: block;
  overflow: hidden;
  background-color: #e3e7dd;
  line-height: 0;
}

.gallery a img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
}

.gallery a:hover img,
.gallery a:focus-visible img {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Lopende tekst: comfortabele regelmaat
   -------------------------------------------------------------------------- */
.lead {
  font-size: 1.0625rem;
  line-height: 1.8;
}

@media (min-width: 768px) {
  .lead {
    font-size: 1.125rem;
  }
}

/* --------------------------------------------------------------------------
   Afdrukken: alleen de feiten, voor wie de woning op papier wil meenemen
   -------------------------------------------------------------------------- */
@media print {
  header,
  footer,
  .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .gallery a img {
    aspect-ratio: auto;
  }
}

/* Sitekiln: icons stay ligatures inside uppercase or letter-spaced text */
.material-symbols-outlined{font-family:'Material Symbols Outlined' !important;font-weight:normal;font-style:normal;text-transform:none !important;letter-spacing:normal !important;text-decoration:none;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';white-space:nowrap;direction:ltr;}