/* Photography section — about blurb, 2-col gallery, contact. */

.photo-about {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(240px, 360px);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.photo-intro {
  max-width: 68ch;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
}
.photo-intro p { margin: 0 0 18px; }
.photo-intro p:last-child { margin-bottom: 0; }

.photo-intro__links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 14px;
  font-weight: 500;
}
.photo-intro__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-deep);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color var(--dur-micro) var(--ease-glide);
}
.photo-intro__links a:hover { color: var(--text-primary); }

/* Two landscape photos stacked beside the intro text; click to enlarge. */
.photo-about__photos {
  display: grid;
  gap: 12px;
}
.about-photo {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  line-height: 0;
}
.about-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform var(--speed) var(--ease);
}
.about-photo:hover img,
.about-photo:focus-visible img { transform: scale(1.03); }
.about-photo:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

@media (max-width: 860px) {
  .photo-about { grid-template-columns: 1fr; }
  .photo-about__photos { max-width: 480px; margin: 0 auto; }
}

/* ---- Favorites: masonry strip of hand-picked shots, natural aspect ratios ---- */
#favorites-section { scroll-margin-top: 88px; }
.fav {
  column-count: 3;
  column-gap: clamp(12px, 1.6vw, 20px);
  margin-bottom: clamp(40px, 6vw, 72px);
}
@media (max-width: 640px) { .fav { column-count: 2; } }
@media (max-width: 440px) { .fav { column-count: 1; } }

.fav__item {
  display: block;
  width: 100%;
  margin-bottom: clamp(12px, 1.6vw, 20px);
  break-inside: avoid;
  border: none;
  padding: 0;
  background: var(--card-bg);
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
}
.fav__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--speed) var(--ease);
}
.fav__item:hover img { transform: scale(1.03); }

/* Lightbox */
.fav-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 8, 12, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--speed) var(--ease);
}
.fav-lightbox.is-open { opacity: 1; pointer-events: auto; }
.fav-lightbox__img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.fav-lightbox__close,
.fav-lightbox__prev,
.fav-lightbox__next {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--dur-micro) var(--ease-glide);
}
.fav-lightbox__close:hover,
.fav-lightbox__prev:hover,
.fav-lightbox__next:hover { opacity: 1; }
.fav-lightbox__close { top: 20px; right: 24px; font-size: 34px; line-height: 1; }
.fav-lightbox__prev,
.fav-lightbox__next { top: 50%; transform: translateY(-50%); font-size: 48px; padding: 12px; }
.fav-lightbox__prev { left: 12px; }
.fav-lightbox__next { right: 12px; }

/* ---- Gallery: 2-col grid of large landscape cards ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}

/* Reserve gallery height before JS renders cards so the contact section
   below doesn't shift down (keeps CLS ~0). Tracks the actual 2-col content
   (≈92vw tall for 3 rows) and caps to match the 1400px max-width layout, so
   there's no dead padding at narrower widths. */
#gallery { min-height: min(92vw, 1320px); }
@media (max-width: 700px) {
  #gallery { min-height: 368vw; } /* 6 stacked 3:2 cards at 92vw wide */
}

.card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
  animation: fade-up 0.5s var(--ease) both;
}
.card:nth-child(2) { animation-delay: 0.06s; }
.card:nth-child(3) { animation-delay: 0.12s; }
.card:nth-child(4) { animation-delay: 0.18s; }
.card:nth-child(5) { animation-delay: 0.24s; }
.card:nth-child(6) { animation-delay: 0.30s; }
.card:hover { border-color: var(--accent); transform: translateY(-3px); }

/* The Lightroom preview photo, when the backend found one. A lazy <img>
   rather than a background so off-screen cards don't download until needed;
   it sits over .card__cover's placeholder gradient and under .card__info. */
.card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Placeholder gradient, visible while the photo loads and for any card the
   backend found no cover for. */
.card__cover {
  position: absolute;
  inset: 0;
  background-color: var(--card-bg);
  /* Placeholder gradient, seen only until a Lightroom cover photo loads over
     it. Tinted by the card's style hue, dark toward the lower-right so the
     always-visible caption keeps its contrast either way. */
  background-image: linear-gradient(135deg,
    rgb(var(--style-rgb, 224 192 151) / 0.42),
    rgba(22, 19, 24, 0.95));
  background-size: cover;
  background-position: center;
}

/* Per-style colour coding. Each style sets one hue that drives BOTH the
   uppercase label and the placeholder gradient, so the two can never drift
   apart. `--style-rgb` is a bare triplet so the gradient can apply its own
   alpha; `--style-label` is a lightened version of the same hue, chosen to
   stay legible on the dark caption overlay.

   These five are the whole vocabulary — a Style cell holding anything else
   (or nothing) falls back to the neutral default rather than picking up a
   colour by accident. Values come from styleSlug() in gallery.js, which
   lowercases and hyphenates, so "Lindy Hop" -> lindy-hop and "n/a" -> n-a.

   Aliases: "Lindy" is treated as Lindy Hop, and the mixed "Balboa/K-pop"
   events borrow Balboa's red, so those sheet rows colour correctly without
   having to be retyped. */
.card[data-style="lindy-hop"],
.card[data-style="lindy"]        { --style-rgb: 226 148 62;  --style-label: #f2b271; } /* orange */
.card[data-style="balboa"],
.card[data-style="balboa-k-pop"] { --style-rgb: 205 74 62;   --style-label: #f29387; } /* red */
.card[data-style="blues"]        { --style-rgb: 82 116 196;  --style-label: #9db6f2; } /* blue */
.card[data-style="shag"]         { --style-rgb: 96 166 104;  --style-label: #94d3a0; } /* green */
.card[data-style="n-a"]          { --style-rgb: 140 140 150; --style-label: #cfcdd4; } /* grey */

/* Always-visible info block over the lower portion of the image. The scrim
   is deliberately taller than the text it holds — extra top padding pushes
   its ceiling well above the caption — and fades to fully transparent rather
   than stopping at a hard edge. Cover photos are arbitrary, so a shallow
   scrim left captions unreadable over bright or busy compositions; this
   guarantees contrast without visibly darkening the whole card. */
.card__info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(30px, 5.5vw, 54px) clamp(10px, 1.6vw, 16px) clamp(10px, 1.6vw, 16px);
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.62) 30%,
    rgba(0, 0, 0, 0.34) 58%,
    rgba(0, 0, 0, 0.12) 80%,
    rgba(0, 0, 0, 0) 100%);
  color: var(--card-text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 1px 14px rgba(0,0,0,0.7);
  z-index: 2;
}

.card__style {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--style-label, var(--accent));
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.card__event {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.1;
}

.card__meta {
  display: flex;
  align-items: baseline;
  margin-top: 4px;
  font-size: clamp(11px, 1.2vw, 13px);
  color: rgba(255, 255, 255, 0.9);
}
.card__count { color: var(--accent); font-weight: 500; }
.card__count::before { content: "·"; margin: 0 12px; color: rgba(255, 255, 255, 0.5); }

.card__date {
  margin-top: 2px;
  font-size: clamp(10px, 1vw, 11px);
  color: rgba(255, 255, 255, 0.62);
}

/* ---- Contact / book ---- */
.contact {
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: clamp(32px, 5vw, 48px);
  border-top: 1px solid var(--border);
  scroll-margin-top: 88px;
}
.contact h2 { font-size: clamp(26px, 3vw, 36px); }
.contact p { color: var(--text-secondary); max-width: 52ch; font-size: 16px; }
.contact a { color: var(--accent-deep); font-weight: 500; border-bottom: 1px solid var(--accent); }

@media (max-width: 700px) {
  .gallery { grid-template-columns: 1fr; }
}