/* =========================================================
   TOP LINES — Projects page grid
   Addresses client comment 10 (22 Jul 2026):
     "All projects photos to be moved to 'our projects' tab."

   The old layout was two hand-built Bootstrap rows that showed
   Riyadh Gallery twice and mislabelled several photos. This is a
   single data-driven grid, so adding a project is one line of data.
   ========================================================= */

.gallery-inner {
  background-color: var(--tl-surface, #f6f6f6);
}

.tl-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 991.98px) {
  .tl-project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .tl-project-grid {
    grid-template-columns: 1fr;
  }
}

.tl-project-grid__item {
  margin: 0;
}

.tl-project-grid__item a {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--tl-surface-alt, #eee);
}

.tl-project-grid__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0, 0.2, 1);
}

.tl-project-grid__item a:hover img,
.tl-project-grid__item a:focus-visible img {
  transform: scale(1.04);
}

.tl-project-grid__item a:focus-visible {
  outline: 2px solid var(--tl-color-theme-primary, #0abab5);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .tl-project-grid__item img {
    transition: none;
  }
  .tl-project-grid__item a:hover img {
    transform: none;
  }
}

/* ---------------------------------------------------------
   Captions — Title then Location, matching the Home carousel
   (Projects PAGE comment: "descriptions and location").
   --------------------------------------------------------- */
.tl-project-grid figure {
  margin: 0;
}

.tl-project-grid .tl-project-caption {
  padding: 16px 2px 0;
}

/* ---------------------------------------------------------
   Photos the client has not yet named. Kept separate so the
   captioned grid above stays consistent.
   --------------------------------------------------------- */
.tl-project-more {
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: clamp(32px, 3.5vw, 48px);
  border-top: 1px solid var(--tl-surface-rule, rgba(25, 25, 25, 0.13));
}

.tl-project-more__title {
  margin: 0 0 clamp(22px, 2.4vw, 34px);
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tl-ink, #191919);
}