/* VH portfolio_page detail template — scoped to .vh-project */

.vh-project { font-family: inherit; color: #222; }
/* .vh-container has the `container` class which Bridge styles for vertical-menu layout.
   We override the left padding to (a) add a 20px gap between menu and content on desktop
   and (b) restore the 20px left padding on mobile (Bridge mobile rule zeros it).
   Bridge's rules use !important on mobile, so we use !important on both sides for clarity. */
.vh-project .vh-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Desktop: 260px menu width + 20px gap = 280px padding-left, symmetric 20px on right */
@media (min-width: 1001px) {
  body.vertical_menu_enabled .vh-project .vh-container {
    padding-left: 280px !important;
  }
}

/* ≤1000px (Bridge hides the vertical menu): symmetric 20px both sides.
   Bridge sets padding-left:0 !important on .content .container at this breakpoint,
   so we use !important to keep our 20px. */
@media (max-width: 1000px) {
  body.vertical_menu_enabled .vh-project .vh-container {
    padding-left: 20px !important;
  }
}

/* Section spacing */
.vh-project { padding-top: 60px; }
.vh-project > section { padding: 40px 0; }
.vh-project > section:first-child { padding-top: 0; }

/* 0. BACK LINK — sits above the hero on every detail page */
.vh-back-nav { padding: 8px 0 0; margin: 0; }
.vh-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; line-height: 1.2;
    color: #1e3a5f; text-decoration: none;
    padding: 6px 4px; margin: 0 0 12px;
    transition: color 0.15s ease;
}
.vh-back-link:hover { color: #6b9d16; text-decoration: none; }
.vh-back-arrow { font-size: 22px; line-height: 1; margin-top: -2px; }

/* 1. HERO — contained card with title overlay (Hero C) */
.vh-hero-card {
  position: relative; border-radius: 8px; overflow: hidden;
  aspect-ratio: 16 / 7; background: #1e3a5f;
}
.vh-hero-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vh-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.55) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px 32px; color: #fff;
}
.vh-hero-eyebrow {
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  opacity: 0.9; margin-bottom: 8px;
}
.vh-hero-title { font-size: clamp(24px, 4vw, 40px); font-weight: 700; line-height: 1.15; margin: 0; color: #fff; }

/* 2. FACT STRIP — dark band, 4 metrics */
.vh-factstrip { background: #1e3a5f; padding: 16px 0; margin-top: 16px; border-radius: 4px; }
.vh-factstrip-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.vh-fact { color: #fff; }
.vh-fact-label {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
  opacity: 0.7; margin-bottom: 4px;
}
.vh-fact-value { font-size: 18px; font-weight: 600; line-height: 1.2; }

/* 3. BODY — narrative + spec card */
.vh-body-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; }
.vh-narrative { font-size: 16px; line-height: 1.7; color: #444; }
.vh-narrative h2, .vh-narrative h3 { color: #1e3a5f; margin-top: 1.5em; }
.vh-section-heading {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: #1e3a5f; margin: 0 0 12px;
}
.vh-spec-card { background: #f5f7fa; border-radius: 6px; padding: 24px; align-self: start; }
.vh-spec-row { padding: 10px 0; border-bottom: 1px solid #e3e8ee; }
.vh-spec-row:last-child { border-bottom: none; }
.vh-spec-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #6a7a8a; font-weight: 600; margin-bottom: 2px; }
.vh-spec-value { font-size: 15px; color: #222; }

/* 4. GALLERY — big carousel + thumb strip (Gallery D) */
.vh-gallery-main {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  border-radius: 6px; overflow: hidden;
}
.vh-gallery-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; cursor: pointer; }
.vh-gallery-slide[aria-current="true"] { opacity: 1; z-index: 1; }
.vh-gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vh-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: #1e3a5f;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; font-size: 22px; line-height: 1;
}
.vh-gallery-arrow:hover { background: #fff; }
.vh-gallery-arrow.prev { left: 16px; }
.vh-gallery-arrow.next { right: 16px; }
.vh-gallery-thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(80px, 1fr);
  gap: 8px; margin-top: 8px; overflow-x: auto;
}
.vh-gallery-thumb {
  aspect-ratio: 1; background: #ddd; border-radius: 3px;
  cursor: pointer; opacity: 0.55; transition: opacity 0.2s, outline 0.2s;
  outline: 2px solid transparent; outline-offset: -2px; border: 0; padding: 0; overflow: hidden;
}
.vh-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vh-gallery-thumb[aria-current="true"] { opacity: 1; outline-color: #1e3a5f; }
.vh-gallery-thumb:hover { opacity: 0.85; }

/* 5. PREV / NEXT */
.vh-prevnext-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  border-top: 1px solid #e3e8ee; border-bottom: 1px solid #e3e8ee;
  padding: 20px 0;
}
.vh-prevnext a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.vh-prevnext.next a { justify-content: flex-end; text-align: right; }
.vh-prevnext-thumb { width: 56px; height: 56px; background: #ddd; border-radius: 4px; flex-shrink: 0; overflow: hidden; }
.vh-prevnext-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vh-prevnext-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #6a7a8a; margin-bottom: 2px; }
.vh-prevnext-title { font-size: 14px; font-weight: 600; color: #1e3a5f; line-height: 1.3; }

/* 6. RELATED projects */
.vh-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vh-related-card { background: #f5f7fa; border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.vh-related-thumb { aspect-ratio: 4/3; background: #ddd; }
.vh-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vh-related-body { padding: 14px 16px; }
.vh-related-cat { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #6a7a8a; margin-bottom: 4px; }
.vh-related-title { font-size: 15px; font-weight: 600; color: #1e3a5f; line-height: 1.3; }

/* 7. CTA — full-width band (uses Bridge's .full_width for vertical-menu offset).
   Markup mirrors Bridge's .call_to_action. We only set top spacing here. */
.vh-cta-wrap { padding: 40px 0 0; }

/* RESPONSIVE: stack at 768px */
@media (max-width: 768px) {
  .vh-project { padding-top: 32px; }
  .vh-hero-card { aspect-ratio: 4 / 3; }
  .vh-factstrip-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
  .vh-body-grid { grid-template-columns: 1fr; gap: 32px; }
  .vh-prevnext-grid { grid-template-columns: 1fr; }
  .vh-related-grid { grid-template-columns: 1fr; }
}