/* ==========================================================================
   Home page — pure router. Three stacked "reels," a spotlight hover effect,
   nothing else. Everything shared (nav, filmstrip, footer) lives in styles.css.
   ========================================================================== */
.hub {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--nav-h));
  margin-top: var(--nav-h);
  background: var(--black);
}

.hub__row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  background-size: cover;
  background-position: center;
  transition: opacity 300ms ease;
}

.hub__row--weddings { background-image: linear-gradient(rgba(13, 13, 12, 0.78), rgba(13, 13, 12, 0.78)), url("../Photos/Home%20Frames/weddings-frame.jpg"); }
.hub__row--real-estate { background-image: linear-gradient(rgba(13, 13, 12, 0.78), rgba(13, 13, 12, 0.78)), url("../Photos/Home%20Frames/real-estate-frame.jpg"); }
.hub__row--social { background-image: linear-gradient(rgba(13, 13, 12, 0.78), rgba(13, 13, 12, 0.78)), url("../Photos/Home%20Frames/social-media-frame.jpg"); }

.hub:hover .hub__row:not(:hover),
.hub:focus-within .hub__row:not(:focus-visible) {
  opacity: 0.45;
}

.hub__row-inner {
  text-align: center;
}

.hub__name {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--white);
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: 1.1;
  transition: color 300ms ease;
}
.hub__row:hover .hub__name,
.hub__row:focus-visible .hub__name {
  color: var(--gold);
}

.hub__desc {
  font-family: var(--font-body);
  color: var(--fog);
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  margin-top: var(--space-2);
}