/* Hub page: full-bleed card grid for section sub-galleries */

.hub {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px 96px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* 1 card: centred, not full-width */
.hub[data-count="1"] {
  grid-template-columns: 1fr;
  max-width: 700px;
}

/* 2 cards */
.hub[data-count="2"] {
  grid-template-columns: repeat(2, 1fr);
  max-width: 960px;
}

/* 4 cards: 2x2 */
.hub[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}

/* 5 cards: 3 top + 2 bottom centred */
.hub[data-count="5"] {
  grid-template-columns: repeat(6, 1fr);
}
.hub[data-count="5"] .hcard:nth-child(1) { grid-column: span 2; }
.hub[data-count="5"] .hcard:nth-child(2) { grid-column: span 2; }
.hub[data-count="5"] .hcard:nth-child(3) { grid-column: span 2; }
.hub[data-count="5"] .hcard:nth-child(4) { grid-column: 2 / span 2; }
.hub[data-count="5"] .hcard:nth-child(5) { grid-column: 4 / span 2; }

.hub-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 40px;
  font-size: 16px;
  color: #7a736a;
  font-family: Jost, sans-serif;
  font-weight: 300;
}

/* Card */
.hcard {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  color: #fff;
}

/* Photo cover inside card */
.hcard-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hcard-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease, transform 9s linear;
  transform: scale(1);
}

.hcard-cover img.on {
  opacity: 1;
  transform: scale(1.06);
}

.hcard:hover .hcard-cover img.on {
  transform: scale(1.09);
}

/* Gradient overlay so text is readable */
.hcard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 6, 0.72) 0%,
    rgba(10, 8, 6, 0.22) 45%,
    transparent 70%
  );
  transition: opacity 0.3s;
  pointer-events: none;
}

.hcard:hover .hcard-overlay {
  opacity: 0.88;
}

/* Text at bottom-left */
.hcard-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 28px 28px;
  pointer-events: none;
}

.hcard-title {
  margin: 0 0 6px;
  font-family: Marcellus, serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #fff;
}

.hcard-desc {
  margin: 0;
  font-family: Jost, sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* Responsive */
@media (max-width: 960px) {
  .hub,
  .hub[data-count="4"],
  .hub[data-count="5"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .hub[data-count="5"] .hcard {
    grid-column: span 1 !important;
  }
  .hub { padding: 0 16px 64px; }
}

.hcard-desc { display: none; }

@media (max-width: 560px) {
  .hub,
  .hub[data-count="2"],
  .hub[data-count="4"],
  .hub[data-count="5"] {
    grid-template-columns: 1fr;
  }
  .hcard { aspect-ratio: 3 / 2; }
}

@media (prefers-reduced-motion: reduce) {
  .hcard-cover img { transition: none; transform: none !important; }
}

/* Justified gallery grid (same on sub-gallery pages) */
.wgrid.jg { display: flex; flex-wrap: wrap; gap: 10px; --row: 300px; }
.wgrid.jg .cell { position: relative; overflow: hidden; aspect-ratio: auto; grid-row: auto; flex-grow: var(--r, 1.5); flex-basis: calc(var(--row) * var(--r, 1.5)); }
.wgrid.jg .cell::before { content: ""; display: block; padding-bottom: calc(100% / var(--r, 1.5)); }
.wgrid.jg .cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wgrid.jg::after { content: ""; flex-grow: 999999; }
.wgrid.jg .cell .ph { display: none; }
@media (max-width: 1100px) { .wgrid.jg { --row: 230px; } }
@media (max-width: 640px) { .wgrid.jg { --row: 160px; gap: 6px; } }