/* === Galleries ==============================================================
   A page that promised photographs and showed three link cards. The sets are
   the content, so they get the page.
   ========================================================================== */

.icrt-galleries { padding: 2rem 0 3.5rem; }

.icrt-galleries__head { max-width: 44rem; margin-bottom: 2rem; }

.icrt-galleries__eyebrow {
  margin: 0 0 .5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--icrt-accent);
}

.icrt-galleries__title {
  margin: 0 0 .75rem;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}

.icrt-galleries__lead { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--icrt-ink-soft); }

.icrt-galleries__empty {
  padding: 3rem 1.5rem;
  border-radius: 1rem;
  background: var(--icrt-mist);
  text-align: center;
  color: var(--icrt-ink-soft);
}

/* --- a set ---------------------------------------------------------------- */

.icrt-gset {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--icrt-mist);
  text-decoration: none;
  color: #fff;
  isolation: isolate;
}

.icrt-gset__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.icrt-gset:hover .icrt-gset__img { transform: scale(1.04); }

/* The scrim is what makes text on an arbitrary image readable. Without it the
   title lands on whatever the top-left of the artwork happens to be. */
.icrt-gset::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2, 6, 23, .88) 0%, rgba(2, 6, 23, .35) 45%, rgba(2, 6, 23, 0) 75%);
  z-index: 1;
}

.icrt-gset__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: grid;
  gap: .3rem;
  padding: 1.1rem 1.2rem;
}

.icrt-gset__kicker {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #93c5fd;
}

.icrt-gset__title { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }

.icrt-gset__meta {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .78);
}

/* --- the lead set --------------------------------------------------------- */

/* An explicit height, not aspect-ratio plus max-height: capping the height of
   a ratio box shrinks its width to match and the lead came out half as wide as
   the grid under it. At the full site measure 21:9 would also stand ~690px
   tall and push that grid off the screen entirely. */
.icrt-gset--lead {
  margin-bottom: 1.25rem;
  width: 100%;
  height: clamp(17rem, 30vw, 27rem);
}
.icrt-gset--lead .icrt-gset__title { font-size: clamp(1.3rem, 2.6vw, 2rem); }
.icrt-gset--lead .icrt-gset__body { padding: clamp(1.2rem, 3vw, 2rem); }

/* --- the grid ------------------------------------------------------------- */

.icrt-ggrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.icrt-ggrid__cell { min-width: 0; }
.icrt-ggrid .icrt-gset { aspect-ratio: 4 / 3; }

/* --- closing call ---------------------------------------------------------- */

.icrt-galleries__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 1rem;
  background: var(--icrt-mist);
  border: 1px solid var(--icrt-line);
}

.icrt-galleries__ctaTitle { margin: 0 0 .3rem; font-size: 1.25rem; letter-spacing: -.01em; }
.icrt-galleries__ctaBody { margin: 0; color: var(--icrt-ink-soft); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .icrt-gset__img { transition: none; }
  .icrt-gset:hover .icrt-gset__img { transform: none; }
}