/* === Base === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Instrument Serif', serif;
  font-size: 1.5rem;
  line-height: 1.6;
  background: #fffaf0;
  color: #222;
}
a { color: inherit; text-decoration: none; }

/* === Header === */
header{
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 40px; background:#fffaf0;
}
.logo{ font-weight:regular; font-size:1.5rem; }
nav ul{ display:flex; gap:20px; }
nav li{ list-style:none; }

/* === Hero === */
.hero{ padding:100px 20px; text-align:center; background:#fffaf0; }
.hero h1 {
  font-family: 'Instrument Serif', serif;
  font-size: 3rem;
  margin-bottom: 10px;
  font-weight: 400;   }

/* === Projects (homepage cards) === */
.projects{ padding:60px 40px; background:transparent; }
.projects h2{ text-align:center; margin-bottom:40px; }

.grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:30px;
}
.project-card{
  background:none; padding:0; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.project-card:hover{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.15); }
.project-card img{
  display:block; width:100%;
  aspect-ratio:1/1; object-fit:cover;
  transition: transform .3s ease, box-shadow .3s ease;
}
.project-card img:hover{ transform:scale(1.05); box-shadow:0 8px 20px rgba(0,0,0,.2); cursor:pointer; }

/* === Static caption (non-lightbox base) === */
.static-caption{
  max-width: 900px;
  margin: 12px auto 28px;
  padding: 0 20px;
  text-align: center;
  color: #fff;
  font-family: 'Instrument Serif', serif;
}
.static-caption h3{ margin-bottom: 6px; font-size: 1.1rem; line-height: 1.3; }
.static-caption p{ font-size: .95rem; line-height: 1.45; opacity: .95; }

/* === AI popup grid — black canvas with grey sides === */
#ai-lightbox-grid{
  background:#000;
  padding:14px;
  border-radius:10px;
  width: min(1200px, 92vw);
  max-height: none;
  overflow: visible;  /* page/overlay scrolls, not the box */
}
.lb-grid{
  column-count:3;
  column-gap:12px;
}
@media (max-width:1024px){ .lb-grid{ column-count:2; } }
@media (max-width:640px){  .lb-grid{ column-count:1; } }
.lb-grid a{
  display:block;
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin:0 0 12px;
}
.lb-grid img{ display:block; width:100%; height:auto; }

/* === Fancybox – global === */
.fancybox__backdrop{ background: rgba(40,40,40,.70) !important; }
.fancybox__slide{ background:#000 !important; }   /* default (classic) */

/* === Fancybox – AI GRID POPUP ONLY === */
.ai-lightbox .fancybox__slide{ background: transparent !important; }
.ai-lightbox .fancybox__content{
  background: transparent !important;
  padding: 0 !important;
}
.ai-lightbox .fancybox__viewport,
.ai-lightbox .fancybox__container{
  overflow: auto !important;
}

/* === Fancybox – FRÄLST ONLY (static caption + no zoom + centered image) === */
.fralst-lightbox .fancybox__slide{ background: transparent !important; }

/* Keep content centered and reserve gap for the caption */
.fralst-lightbox .fancybox__content{
  display: flex !important;
  align-items: center !important;   /* vertical center */
  justify-content: center !important; /* horizontal center */
  padding-bottom: 240px !important;   /* gap above the text */
}

/* Keep the image above the gap; do not allow zoom/pan interactions */
.fralst-lightbox .fancybox__image{
  max-height: calc(100vh - 280px) !important;  /* keep above caption gap */
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  pointer-events: none !important;        /* ignore clicks on image */
  transform: none !important;             /* prevent pan/zoom transforms */
}

/* Static caption on the grey tint */
.fralst-lightbox .static-caption{
  position:absolute; left:0; right:0; bottom:24px;
  margin:0 auto; max-width:900px;
  padding:16px 24px;
  background:transparent;
  color:#fff; text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
  z-index:10;
}
.fralst-lightbox .static-caption h3{ margin:0 0 12px; font-size:1.2rem; line-height:1.35; }
.fralst-lightbox .static-caption p{ margin:0; font-size:1rem; line-height:1.6; }





/* === Iframes === */
.iframe-container {
  margin: 40px auto;
  max-width: 1200px;
  background: #fff;            /* ✅ white background behind iframe */
  border: 2px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.iframe-container iframe {
  display: block;
  width: 100%;
  height: 80vh;                /* responsive height */
  border: none;
  background: #fff;            /* ✅ fallback background inside iframe element */
}


/* === Footer === */
footer{ padding:40px; text-align:center; background:#fffaf0; color:#222; }
footer a{ color:#222; text-decoration:underline; }