/**
 * Photo page: barn window from the logo, then polaroids in rows of 3, 2 and 1.
 * The structure is built from the page text by js/fotos.js.
 */
.kj-fotos .main-container h2 { margin-bottom: 22px; }
.kj-fotos .kgfoto { border: 0; margin: 0; max-width: none; padding: 0; width: 100%; }
.kj-barn button,
.kj-wall button { background: none; border: 0; cursor: pointer; display: block; min-width: 0; padding: 0; }
.kj-barn button:focus-visible,
.kj-wall button:focus-visible { outline: 3px solid var(--kj-lime); outline-offset: 3px; }

.kj-barn {
  aspect-ratio: 16 / 11;
  background: var(--kj-moon);
  clip-path: polygon(0 19%, 50% 0, 100% 19%, 100% 100%, 0 100%);
  display: grid;
  gap: 8px;
  grid-template-areas: 'c c b b a a' 'c c b b a a' 'd d d e e e';
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr .9fr;
  margin-bottom: 42px;
  padding: 8px;
}
.kj-barn button { overflow: hidden; }
.kj-barn button:nth-child(1) { grid-area: a; }
.kj-barn button:nth-child(2) { grid-area: b; }
.kj-barn button:nth-child(3) { grid-area: c; }
.kj-barn button:nth-child(4) { grid-area: d; }
.kj-barn button:nth-child(5) { grid-area: e; }
.kj-barn img { height: 100%; object-fit: cover; transition: transform .35s; }
.kj-barn button:hover img { transform: scale(1.04); }

.kj-wall { display: grid; gap: 30px 24px; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 6px; }
.kj-polaroid {
  background: var(--kj-moon) !important;
  padding: 10px 10px 34px !important;
  transition: transform .2s;
}
.kj-polaroid img { display: block; height: auto; object-fit: cover; object-position: 50% 30%; }
.kj-row-3 { grid-column: span 2; }
.kj-row-2 { grid-column: span 3; }
.kj-row-1 { grid-column: 2 / span 4; }
.kj-row-3 img { aspect-ratio: 1; }
.kj-row-2 img { aspect-ratio: 4 / 3; }
.kj-row-1 img { max-height: 620px; }
.kj-polaroid:nth-child(4n+1) { transform: rotate(-1.6deg); }
.kj-polaroid:nth-child(4n+2) { transform: rotate(1.1deg); }
.kj-polaroid:nth-child(4n+3) { transform: rotate(-.8deg); }
.kj-polaroid:nth-child(4n) { transform: rotate(1.7deg); }
.kj-polaroid.kj-row-1 { transform: rotate(-.6deg); }
.kj-polaroid:hover,
.kj-polaroid:focus-visible { transform: none; }

.kj-large { background: none; border: 0; max-height: 100vh; max-width: 100vw; padding: 12px; }
.kj-large::backdrop { background: rgba(5, 18, 23, .93); }
.kj-large img { border: 8px solid var(--kj-moon); display: block; margin: 0 auto; max-height: calc(100vh - 100px); max-width: 100%; }
.kj-large-nav { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.kj-large-nav button {
  background: var(--kj-night);
  border: 1px solid var(--kj-moon);
  color: var(--kj-moon);
  cursor: pointer;
  font: 400 22px 'Klingtjut', ubuntu, sans-serif;
  padding: 5px 14px;
}
.kj-large-nav button:hover { background: var(--kj-lime); color: var(--kj-night); }

@media (max-width: 767.98px) {
  .kj-barn { aspect-ratio: 1; }
  .kj-wall { gap: 20px 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kj-row-2,
  .kj-row-3 { grid-column: span 1; }
  .kj-row-1,
  .kj-row-3.kj-first { grid-column: 1 / -1; }
  .kj-row-3.kj-first img { aspect-ratio: 4 / 3; }
  .kj-large-nav button { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .kj-barn img,
  .kj-polaroid { transition: none; }
}