/* ============================================
   GRAY CONSTRUCTION - GENERATED SUBPAGES
   Shared styles for project detail, service and
   location pages. Built on the tokens in style.css.
   ============================================ */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.sub-hero {
  position: relative;
  padding: calc(var(--space-32) + 3rem) var(--space-6) var(--space-20);
  background: var(--color-navy-dark);
  color: #fff;
  overflow: hidden;
}
.sub-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.34;
}
.sub-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(15,29,48,0.96) 0%, rgba(15,29,48,0.86) 45%, rgba(15,29,48,0.55) 100%);
}
.sub-hero__inner {
  position: relative; z-index: 1;
  max-width: var(--content-wide); margin: 0 auto;
}
.sub-hero__eyebrow {
  font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-red-light); margin-bottom: var(--space-5);
}
.sub-hero__title {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.02em;
  max-width: 20ch; margin-bottom: var(--space-6);
}
.sub-hero__lede {
  font-size: var(--text-lg); line-height: 1.55;
  color: #cdd6e3; max-width: 62ch;
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */
.crumbs { position: relative; z-index: 1; margin-bottom: var(--space-6); }
.crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); list-style: none; padding: 0; margin: 0;
  font-size: var(--text-xs); color: #93a3b8;
}
.crumbs__list a { color: #cdd6e3; text-decoration: none; }
.crumbs__list a:hover { color: #fff; text-decoration: underline; }
.crumbs__sep { opacity: 0.5; }
.crumbs__list [aria-current="page"] { color: #fff; font-weight: 600; }

/* ── Generic content band ─────────────────────────────────────────────── */
.sub-section { padding: var(--space-24) var(--space-6); }
.sub-section--tight { padding: var(--space-16) var(--space-6); }
.sub-section--alt { background: var(--color-surface); }
.sub-section--dark { background: var(--color-navy); color: #fff; }
.sub-section__inner { max-width: var(--content-wide); margin: 0 auto; }
.sub-section__inner--narrow { max-width: 78ch; }

.sub-h2 {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 700; letter-spacing: -0.015em; line-height: 1.15;
  margin-bottom: var(--space-6);
}
.sub-section--dark .sub-h2 { color: #fff; }
.sub-h3 {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; margin: var(--space-10) 0 var(--space-4);
}
.sub-prose p { font-size: var(--text-base); line-height: 1.75; color: var(--color-text-muted); margin-bottom: var(--space-5); }
.sub-prose strong { color: var(--color-text); font-weight: 600; }
.sub-section--dark .sub-prose p { color: #c6d0de; }
.sub-section--dark .sub-prose strong { color: #fff; }

.sub-prose ul { margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.sub-prose ul li {
  position: relative; padding-left: var(--space-6); margin-bottom: var(--space-3);
  font-size: var(--text-base); line-height: 1.65; color: var(--color-text-muted);
}
.sub-prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 2px; background: var(--color-red);
}
.sub-section--dark .sub-prose ul li { color: #c6d0de; }

/* ── Fact strip (cost / sqft / delivery / year) ───────────────────────── */
.factbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--color-border);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; margin: var(--space-10) 0;
}
.factbar__item { background: var(--color-surface); padding: var(--space-6) var(--space-6); }
.factbar__label {
  display: block; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-faint); margin-bottom: var(--space-2);
}
.factbar__value {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: var(--color-navy); line-height: 1.2;
}

/* ── Gallery ──────────────────────────────────────────────────────────── */
.subgallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}
.subgallery figure { margin: 0; }
.subgallery img {
  width: 100%; height: 100%; max-height: 460px; object-fit: cover;
  border-radius: var(--radius-lg); display: block; background: var(--color-border);
}

/* ── Pull quote ───────────────────────────────────────────────────────── */
.pullquote {
  border-left: 4px solid var(--color-red);
  padding: var(--space-2) 0 var(--space-2) var(--space-8);
  margin: var(--space-10) 0;
}
.pullquote__text {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 500; line-height: 1.45; color: var(--color-text);
}
.pullquote__cite {
  display: block; margin-top: var(--space-4);
  font-size: var(--text-sm); font-style: normal;
  color: var(--color-text-faint); font-weight: 600;
}
.sub-section--dark .pullquote__text { color: #fff; }
.sub-section--dark .pullquote__cite { color: #93a3b8; }

/* ── Card grid (related projects, service list, county list) ─────────── */
.subcards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.subcard {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
a.subcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-red); }
.subcard__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--color-border); }
.subcard__body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; }
.subcard__tag {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-red); margin-bottom: var(--space-3);
}
.subcard__title {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 700; line-height: 1.3; margin-bottom: var(--space-2); color: var(--color-text);
}
.subcard__meta { font-size: var(--text-sm); color: var(--color-text-faint); margin-top: auto; }
.subcard__text { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* ── Inline CTA row ───────────────────────────────────────────────────── */
.sub-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .sub-hero { padding: calc(var(--space-24) + 3rem) var(--space-5) var(--space-16); }
  .sub-section { padding: var(--space-16) var(--space-5); }
  .pullquote { padding-left: var(--space-5); }
}

/* ── Service area: county grid ─────────────────────────────────────────── */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.area-county {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.area-county__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-1);
}
.area-county__seat {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}
.area-county__list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.area-county__list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
}
.area-county__list li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 2px; background: var(--color-red);
}
.area-county__list a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-divider); }
.area-county__list a:hover { color: var(--color-red); border-bottom-color: var(--color-red); }
.area-county__list--plain li { color: var(--color-text-muted); }
.area-county__list--plain li::before { background: var(--color-divider); }
.area-county__more { margin-top: var(--space-4); font-size: var(--text-sm); }
.area-county__more a { color: var(--color-red); text-decoration: none; font-weight: 600; }
.area-county__more a:hover { text-decoration: underline; }

/* ── Sector pages: the named-project list ─────────────────────────────── */
.sector-list {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  columns: 3 240px;
  column-gap: var(--space-10);
}
.sector-list li {
  break-inside: avoid;
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.sector-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 2px; background: var(--color-red);
}