/*
 * photos.css — Photo bands and presentation inset
 *
 * All bands use aspect-ratio instead of fixed height.
 * This keeps the visible crop geometrically identical at every viewport
 * width — object-fit: cover then just scales that same window up or down.
 * min-height guards against bands becoming too thin on small screens.
 */

/* ─── SHARED BAND BASE ─── */
.thinking-band,
.conversation-band {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.thinking-band img,
.conversation-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── PROFILE BEACH BAND (between About and kite section) ─── */
/* Profile Beach.jpg is landscape ~3:2 */
.conversation-band {
  aspect-ratio: 16 / 6;
  min-height: 300px;
}

.conversation-band img {
  object-position: center 20%;
  filter: var(--filter-thinking);
}

/* ─── KITE PANORAMA BAND (after Curious) ─── */
/* Kite Panorama.jpg is wide landscape ~16:9 */
.thinking-band {
  aspect-ratio: 21 / 7;
  min-height: 260px;
}

.thinking-band img {
  object-position: 20% 75%;
  filter: var(--filter-thinking);
}


/* ─── PHOTO INSET — picture sitting on the page ─── */
/* Used for kite jump and any other non-band, non-hero photos */
.photo-inset {
  max-width: 760px;
  margin: 0 auto var(--space-xl);
  padding: 0 var(--col-pad);
}

.photo-inset img {
  width: 100%;
  display: block;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(24, 23, 21, 0.11);
  filter: var(--filter-kite);
}

/* ─── PRESENTATION PHOTO — inset, column-width ─── */
/* Dahkla Presentation.jpg is landscape — shown at natural proportions */
.presentation-inset {
  max-width: var(--col-width);
  margin: 0 auto var(--space-xl);
  padding: 0 var(--col-pad);
}

.presentation-inset img {
  width: 100%;
  display: block;
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(24, 23, 21, 0.11);
  filter: var(--filter-presentation);
}