/* ==========================================================================
   Page furniture — shared by every template below the homepage.

   components.css holds atoms (buttons, cards, form fields). This file holds
   the page-level structures those atoms sit inside: page headers, prose,
   grids, filters, fact bars, galleries.
   ========================================================================== */

.site-main {
  display: block;
}

/* --------------------------------------------------------------------------
   Page header
   Mirrors the hero's structure at reduced volume: eyebrow, title, lede.
   -------------------------------------------------------------------------- */

.page-head {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
  background: var(--color-bg-alt);
  border-block-end: 1px solid var(--color-border);
}

.page-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: end;
}

.page-head__grid:has(.page-head__figure) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
}

.page-head__title {
  font-size: var(--fs-h1);
  margin-block: var(--space-sm) 0;
}

.page-head__lede {
  margin-block-start: var(--space-md);
  max-inline-size: 58ch;
  font-size: var(--fs-lead);
}

.page-head__figure {
  margin: 0;
}

.page-head__copy > * + * {
  margin-block-start: var(--space-sm);
}

/* Breadcrumbs in the readout voice — a path, not decoration. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--readout-track);
  color: var(--tr-gray);
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--tr-teal-700);
}

.crumbs [aria-current] {
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   Prose — long-form editor output
   -------------------------------------------------------------------------- */

.prose {
  max-inline-size: var(--container-narrow);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
}

.prose > * + * {
  margin-block-start: var(--space-lg);
}

.prose h2 {
  font-size: var(--fs-h2);
  margin-block-start: var(--space-2xl);
}

.prose h3 {
  font-size: var(--fs-h3);
  margin-block-start: var(--space-xl);
}

.prose ul,
.prose ol {
  padding-inline-start: 1.25rem;
}

.prose li + li {
  margin-block-start: var(--space-xs);
}

.prose img {
  max-inline-size: 100%;
  height: auto;
}

.prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-lg);
  border-inline-start: 2px solid var(--tr-teal);
  color: var(--color-heading);
}

.prose--intro {
  font-size: var(--fs-lead);
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * A product or project with no photograph falls back to its schematic. On the
 * off-white ground the linework reads clearly, and a drawing is a more honest
 * placeholder for a made-to-order panel than a stock photo would be. It fills
 * the media box, so the grid keeps a single ratio whether the card has a photo
 * or a drawing. (.card__link / .card__body layout lives in components.css.)
 */
.card__schematic {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding: var(--space-lg);
  color: var(--tr-light-gray);
}

.card__schematic svg {
  inline-size: 45%;
  max-inline-size: 90px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Category filter
   -------------------------------------------------------------------------- */

.term-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-end: var(--space-xl);
}

.chip,
.term-filter__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-heading);
  background: var(--color-bg);
  transition:
    border-color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

.term-filter__item:hover {
  border-color: var(--tr-teal);
}

.term-filter__item[aria-current="true"],
.term-filter__item.is-current {
  background: var(--tr-charcoal);
  border-color: var(--tr-charcoal);
  color: #fff;
}

.term-filter__count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Fact bar — horizontal readout strip on product and project singles
   -------------------------------------------------------------------------- */

.factbar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: var(--space-lg);
  border-block: 1px solid var(--color-border);
}

.factbar__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.factbar__value {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Notices and empty states
   -------------------------------------------------------------------------- */

.empty {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--tr-gray);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.notice {
  padding: var(--space-md) var(--space-lg);
  border-inline-start: 3px solid var(--tr-teal-700);
  background: var(--tr-teal-soft);
  font-size: var(--fs-small);
  border-radius: 0;
}

/* Shown when the client has not yet picked a form. Admin-facing guidance, so
   it is deliberately louder than the surrounding design. */
.notice--setup {
  color: var(--color-heading);
}

/* --------------------------------------------------------------------------
   Wide content scrolls inside itself — the page body never scrolls sideways
   -------------------------------------------------------------------------- */

.spec-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.spec-table__value {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery-grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.gallery-grid__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.gallery-grid__item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Testimonial
   -------------------------------------------------------------------------- */

.testimonial {
  padding: var(--space-xl);
  background: var(--color-bg-alt);
  border-inline-start: 2px solid var(--tr-teal);
}

.testimonial__quote {
  font-size: var(--fs-lead);
  color: var(--color-heading);
  margin: 0;
}

.testimonial__by {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-block-start: var(--space-md);
}

.testimonial__author {
  color: var(--color-heading);
  font-weight: var(--fw-semibold);
}

.testimonial__role {
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   CTA band and section heading copy
   -------------------------------------------------------------------------- */

.cta-band__title {
  font-size: var(--fs-h2);
  color: #fff;
}

.cta-band__lede {
  margin-block: var(--space-md) var(--space-xl);
  max-inline-size: 46ch;
}

.sec-head__title {
  font-size: var(--fs-h2);
  margin-block: var(--space-sm) 0;
}

/* --------------------------------------------------------------------------
   Related items
   -------------------------------------------------------------------------- */

.related {
  padding-block: var(--section-pad-y);
  background: var(--color-bg-alt);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .card-grid--4,
  .card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-head__grid:has(.page-head__figure) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  .card-grid,
  .card-grid--3,
  .card-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   CTA band

   Lives here, not in pages/home.css. The band is rendered by ten templates —
   every archive, single, page template and the homepage — but its styles used
   to load only on the front page. Everywhere else it had no background, so its
   light text rendered white-on-white and was invisible.
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--tr-charcoal);
  color: var(--color-text-invert);
  padding-block: clamp(2.2rem, 4.5vw, 3.4rem);
}

.cta-band h2 {
  color: #fff;
  margin-block-end: 0.45rem;
}

/* Lean row — homepage and interiors share the same charcoal close. */
.cta-band--lean .cta-band__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.cta-band--lean .cta-band__copy {
  flex: 1 1 28rem;
  max-inline-size: 52rem;
}

.cta-band--lean .cta-band__copy .readout {
  display: block;
  margin-block-end: 0.55rem;
}

.cta-band--lean h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.95rem);
}

.cta-band--lean .cta-band__copy p,
.cta-band--lean .cta-band__lede {
  margin-block-end: 0;
  max-inline-size: 46ch;
}

.cta-band--lean .cta-band__actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 1 auto;
  min-inline-size: 0;
}

.cta-band--lean .cta-band__actions .btn {
  min-inline-size: 0;
}

.cta-band--lean .btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.cta-band--lean .btn--outline-light:hover,
.cta-band--lean .btn--outline-light:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Footer offices — muted readout, no teal rail (signal budget). */
.site-footer .office + .office {
  margin-block-start: var(--space-lg);
}

.office__label {
  display: block;
  margin-block-end: 0.4rem;
  color: rgba(255, 255, 255, 0.55);
}

.office__addr {
  font-size: var(--fs-small);
  line-height: 1.65;
  margin-block: 0 0.4rem;
  max-inline-size: none;
}

.site-footer .tel {
  color: #fff;
  text-decoration: none;
  font-size: var(--fs-small);
}

.site-footer .tel:hover {
  color: var(--tr-teal-on-dark, var(--tr-teal));
}