/**
 * Single Project ("case study") template styling.
 *
 * Only enqueued on is_singular('tb_project') — see thinkbridge_enqueue_assets()
 * in inc/setup.php. Intentionally self-contained rather than reusing
 * .work-grid/.work-card/.work-tag from blocks/latest-work/style.css:
 * that stylesheet only loads on pages that actually contain the Latest
 * Work block, so a page using this template (which doesn't) can't rely
 * on it. .page-banner, .eyebrow, .section-head, and .btn below ARE
 * reused from the global assets/css/base.css, which loads everywhere.
 */


.project-hero h1 { max-width: 820px; }

.project-lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 640px;
  margin-top: 4px;
}

.project-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.project-meta-row > div { display: flex; flex-direction: column; gap: 4px; }
.project-meta-row span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.project-meta-row strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.project-meta-row a { font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.project-meta-row a:hover { text-decoration: underline; }

/* Gallery grid — every image in the project's gallery at once, sized
   for the 700x465 images the "Gallery images" field is designed around
   (see its help text in the meta box), 2 per row so a 4-image gallery
   fills exactly 2 rows. Falls back to just the featured image via
   thinkbridge_get_project_gallery()'s PHP-side fallback, so this still
   works fine (as a single tile) for a project with only one photo. */
.project-gallery-section { background: var(--surface); padding: 56px 0 80px; }
.project-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.project-gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}
.project-gallery-item img { width: 100%; aspect-ratio: 700 / 465; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .project-gallery-section { padding: 36px 0 50px; }
}
@media (max-width: 700px) {
  .project-gallery-grid { grid-template-columns: 1fr; }
}

/* Overrides base.css's global `section { padding: 100px 0; }` — without
   this, that rule stacks with .project-content's own padding below and
   the write-up ends up with ~180px of dead space top and bottom. */
.project-body { padding: 0; }

.project-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
}
.project-content h2,
.project-content h3 { margin-top: 40px; margin-bottom: 14px; }
.project-content h2:first-child,
.project-content h3:first-child { margin-top: 0; }
.project-content p { margin-bottom: 20px; color: var(--ink-soft); }
.project-content ul,
.project-content ol { margin: 0 0 20px 20px; color: var(--ink-soft); }
.project-content img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 32px 0;
}

.project-more { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--line); }
.project-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.project-back,
.project-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}
.project-back:hover,
.project-next:hover { color: var(--accent); }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.more-card { display: block; text-decoration: none; color: inherit; }
.more-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  margin-bottom: 16px;
  transition: opacity 0.15s ease;
}
.more-card:hover .more-thumb { opacity: 0.85; }
.more-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 6px;
}
.more-card h3 { font-size: 18px; margin: 0; }

.project-cta { padding: 100px 0; text-align: center; }
.project-cta h2 { margin-bottom: 12px; }
.project-cta p { color: var(--ink-soft); margin-bottom: 28px; }

@media (max-width: 900px) {
  .more-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .more-grid { grid-template-columns: 1fr; }
  .project-meta-row { gap: 20px; }
}