/* ==========================================================================
   BTENG theme — content page styles (Phase 4)
   ========================================================================== */

/* Image placeholder (until real photos arrive) */
.img-ph { display: flex; align-items: center; justify-content: center; width: 100%;
  background: var(--c-tint); color: var(--c-primary-strong); border-radius: var(--radius-lg); }

/* Intro lead paragraph under a banner */
.lead { font-size: 1.15rem; color: var(--text-muted); max-width: 70ch; }
.section__intro { max-width: 70ch; margin-bottom: var(--sp-6); }

/* Empty-state note */
.empty-note { color: var(--text-muted); background: var(--c-tint); border-radius: var(--radius);
  padding: var(--sp-5); text-align: center; }

/* "At a glance" stats — used on Company Profile (light) and the home page
   counter band (dark). Values are set in the mono face so digits are tabular
   and do not jitter while the count-up animation runs. */
.stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { background: var(--c-tint); border-radius: var(--radius-lg); padding: var(--sp-5); text-align: center; }
.stat__value { font-family: var(--font-mono); font-weight: 500; font-size: 2.25rem;
  font-variant-numeric: tabular-nums; color: var(--c-primary-strong); line-height: 1.1; }
.stat__label { color: var(--text-muted); font-size: .875rem; margin-top: var(--sp-2); letter-spacing: .02em; }

/* On a dark band the tile loses its fill and reads as plain figures. */
.section--dark .stat, .section--deep .stat { background: transparent; padding: var(--sp-3) var(--sp-4); }
.section--dark .stat__value, .section--deep .stat__value { color: #fff; }
.section--dark .stat__label, .section--deep .stat__label { color: var(--c-on-dark-muted); }
.stats--left .stat { text-align: left; padding-inline: 0; }

/* Certification cards — scan above, name below, on a white card.

   Sized generously: these are scanned documents, and at thumbnail size the seal
   and issuing body are unreadable, which defeats the point of showing them.
   Only the name is shown; the expiry date drives visibility (see the date
   window in home.html.twig) but is never printed on the card. */
.cert-strip { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: var(--sp-4); }
.cert-strip__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: var(--sp-4);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
/* Hover: the card floats like the others and its edge picks up a solid green
   glow. The scan itself deliberately does NOT scale — these are documents, and
   a moving certificate reads as sloppy rather than lively. */
.cert-strip__item:hover {
  transform: translateY(-6px);
  border-color: var(--c-brand);
  box-shadow: 0 0 0 1px var(--c-brand), 0 10px 26px rgba(40, 167, 69, .22);
}
.cert-strip__label { font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  color: var(--c-ink); margin-top: var(--sp-4); text-align: center; }
/* The scans are A4 portrait (~0.71), so height drives the size: 230px tall
   renders ~163px wide and five cards still sit on one row inside the 1200px
   container. Click to open full size in the lightbox. */
.cert-strip__img { height: 230px; width: auto; max-width: 260px; object-fit: contain;
  display: block; cursor: zoom-in; }
.cert-strip__name { font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  color: var(--c-ink); letter-spacing: .02em; padding: var(--sp-4) var(--sp-3); }
/* The card already lifts and glows; nothing inside it should move as well. */
.cert-strip__item:hover .cert-strip__img { transform: none; }
@media (max-width: 900px) { .cert-strip__img { height: 190px; } }
@media (max-width: 560px) { .cert-strip__img { height: 160px; } }

/* Closing call-to-action band */
.cta-band { text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); }
.cta-band p { color: var(--c-on-dark-muted); margin-inline: auto; margin-bottom: var(--sp-6); }

/* Featured projects — a horizontal snap scroller rather than a carousel
   library. Native overflow scrolling means touch, trackpad, arrow buttons and
   keyboard all work with no JS running per frame; the buttons only call
   scrollBy(). */
.proj-scroller {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--sp-5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
}
.proj-scroller > * { scroll-snap-align: start; }
@media (min-width: 620px)  { .proj-scroller { grid-auto-columns: calc((100% - var(--sp-5)) / 2); } }
@media (min-width: 1000px) { .proj-scroller { grid-auto-columns: calc((100% - 2 * var(--sp-5)) / 3); } }

/* Controls row reuses the carousel button skin already in components.css. */
.proj-controls { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-5); flex-wrap: wrap; }
.proj-controls__nav { display: flex; gap: var(--sp-3); }
.proj-controls__nav .carousel__btn[disabled] { opacity: .35; cursor: default; }
.proj-controls__nav .carousel__btn[disabled]:hover {
  background: var(--c-surface); color: var(--c-primary-strong); border-color: var(--c-border); transform: none; }

/* Section landing — child page cards */
.landing-card { display: flex; flex-direction: column; height: 100%; }
.landing-card .btn { margin-top: auto; align-self: flex-start; }

/* Project reference card image */
.card .project-card__img { aspect-ratio: 4 / 3; border-radius: var(--radius); object-fit: cover; width: 100%; display: block; }

/* Certificate card */
.cert-card { text-align: center; }
.cert-card .img-ph, .cert-card__img { aspect-ratio: 3 / 4; margin-bottom: var(--sp-4); border-radius: var(--radius); object-fit: cover; width: 100%; }
.cert-card__meta { color: var(--text-muted); font-size: .9rem; margin-top: var(--sp-1); }

/* Featured video — full width, live embed, 16:9 held by aspect-ratio so the
   player never causes layout shift while it loads. */
.video-feature { margin-bottom: var(--sp-7); }
.video-feature__frame { position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #000; border-radius: var(--radius); overflow: hidden; }
.video-feature__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.video-feature__title { margin-top: var(--sp-4); }
.video-feature__text { color: var(--text-muted); margin-top: var(--sp-2); }

/* Video card (YouTube facade) */
.video-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; }
.video-card__thumb { position: relative; display: block; width: 100%; border: none; padding: 0; cursor: pointer; background: var(--c-tint); }
.video-card__thumb .img-ph { border-radius: 0; }
.video-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-card__play span { width: 64px; height: 64px; border-radius: 50%; background: var(--c-primary-strong); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-pop); }
.video-card__frame { position: relative; aspect-ratio: 16 / 9; }
.video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__body { padding: var(--sp-4) var(--sp-5); }
.video-card__body h3 { font-size: 1.1rem; }

/* Location tile — photo above, name / size / address below. Same flat card
   language as the project cards: art edge to edge, only the text padded. */
.loc-tile { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
.loc-tile__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
/* Locations with no photo yet — the head office today — show an icon instead. */
.loc-tile__img--ph { display: flex; align-items: center; justify-content: center;
  background: var(--c-tint); color: var(--c-primary-strong); }
.loc-tile__body { padding: var(--sp-5); }
.loc-tile__name { font-size: 1.0625rem; font-weight: 600; color: var(--c-ink); }
.loc-tile__meta { color: var(--text-muted); font-size: .875rem; margin-top: var(--sp-1); max-width: none; }
.loc-tile__addr { color: var(--c-ink); font-size: .9375rem; margin-top: var(--sp-3); max-width: none; }

/* Light variant of the closing CTA band, for use on a tint section. */
.cta-band--light h2 { color: var(--c-ink); }
.cta-band--light p { color: var(--text-muted); }

/* Facility block — alternating soft bands + mirrored media/info columns */
.facility { display: grid; gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-6);
  padding: clamp(var(--sp-4), 3vw, var(--sp-6)); border-radius: var(--radius-lg); }
.facility:nth-child(even) { background: var(--c-tint); }
@media (min-width: 760px) { .facility { grid-template-columns: 1fr 1fr; } .facility:nth-child(even) .facility__media { order: 2; } }
.facility__caps { display: grid; gap: 6px; margin-top: var(--sp-3); }
.facility__caps li { display: flex; gap: var(--sp-2); align-items: center; }
.facility__caps .icon { color: var(--c-primary-strong); }
.facility__size { display: inline-block; background: var(--c-tint); color: var(--c-primary-deep); font-weight: 500;
  border-radius: var(--radius-sm); padding: 4px 12px; margin-top: var(--sp-3); }

/* Job list */
/* ---- Empty state ------------------------------------------------------
   Replaces the bare "Content coming soon." line for the Career page's two
   distinct empty cases: no openings published at all, and openings that exist
   but none matching the current filter. Reads as a deliberate panel rather
   than a missing section, and always offers somewhere to go next. */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3); padding: var(--sp-7) var(--sp-5);
  background: var(--c-tint); border: 1px dashed var(--c-border);
  border-radius: var(--radius-lg); }
.empty-state__icon { display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--c-surface); border: 1px solid var(--c-border);
  color: var(--c-primary-strong); }
.empty-state__title { margin: 0; }
.empty-state__text { margin: 0; max-width: 46ch; color: var(--text-muted); }
/* The filtered-to-nothing variant sits inside a list that already has spacing
   around it, so it is lighter and less tall than the page-level one. */
.empty-state--compact { padding: var(--sp-6) var(--sp-5); margin-top: var(--sp-4); }

.job-list { display: grid; gap: var(--sp-4); }
.job-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); justify-content: space-between;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-5); }
.job-item__main { display: flex; flex-direction: column; gap: var(--sp-2); }
.job-item__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.job-item__openings { color: var(--text-muted); font-size: .85rem; }
.job-item.is-closed { opacity: .65; }

/* Link-styled button (e-mail addresses that open the message modal) */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-btn:hover { text-decoration: none; }

/* Direct HR contacts (Career page) */
.hr-contact { margin-top: var(--sp-7); background: var(--c-tint); border-radius: var(--radius-lg);
  padding: clamp(var(--sp-5), 4vw, var(--sp-6)); }
.hr-contact__intro { color: var(--text-muted); margin-top: var(--sp-2); }
.hr-contact__list { list-style: none; padding: 0; margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.hr-contact__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  background: var(--c-surface); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.hr-contact__name { font-weight: 500; }
.hr-contact__email { color: var(--text-muted); margin-inline-start: auto; }

/* Category page editorial lead: main image + description */
/* ---- Project-category lead: Notable work | Standards -------------------
   Two columns on desktop, stacked on narrow screens. Both columns are headed by
   a plain .eyebrow so they match every other kicker on the site. */
.cat-lead { display: grid; gap: var(--sp-6); align-items: start; margin-bottom: var(--sp-2); }
@media (min-width: 860px) { .cat-lead { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
.cat-lead__col { min-width: 0; }

/* Notable work — a list, not cards: a thumbnail beside the project name, with
   the brand rule down the left edge of each row. */
.notable { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.notable__item { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4);
  align-items: center; padding-left: var(--sp-4);
  border-left: 3px solid var(--c-primary); }
.notable__thumb { position: relative; }
.notable__thumb img { width: 96px; aspect-ratio: 3 / 2; object-fit: cover; display: block;
  border-radius: var(--radius); cursor: zoom-in; }
.notable__label { margin: 0; min-width: 0; font-family: var(--font-heading);
  font-weight: 600; color: var(--c-navy); line-height: 1.4; }
.notable__sub { font-weight: 400; color: var(--text-muted); }
@media (max-width: 460px) {
  .notable__item { grid-template-columns: 72px 1fr; }
  .notable__thumb img { width: 72px; }
}

/* ---- Project gallery (category pages) ---------------------------------
   Pictures only: the project name is deliberately not rendered here, it lives
   in the lightbox caption instead. That makes every tile identical in height,
   so a plain uniform grid works — no card chrome, no caption row to align.
   Denser than the 3-up card grid it replaced, because without captions the
   images can carry the section on their own. */
.proj-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 1024px) { .proj-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .proj-gallery { grid-template-columns: repeat(2, 1fr); } }

.proj-gallery__item { margin: 0; position: relative; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--c-border);
  background: var(--c-surface); aspect-ratio: 4 / 3; }
.proj-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block;
  cursor: zoom-in; transition: transform var(--transition); }
/* The whole tile reacts, so it reads as one clickable object even though only
   the image carries the handler. */
.proj-gallery__item:hover { border-color: var(--c-primary-strong); }
.proj-gallery__item:hover img { transform: scale(1.04); }
.proj-gallery__item img:focus-visible { outline: 2px solid var(--c-primary-strong); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .proj-gallery__item img { transition: none; }
  .proj-gallery__item:hover img { transform: none; }
}

/* Standards — the page's own body copy, given the same left rule so the two
   columns read as a matched pair. */
.standards { padding-left: var(--sp-4); border-left: 3px solid var(--c-primary); max-width: 60ch; }
.standards > :first-child { margin-top: 0; }
.standards > :last-child { margin-bottom: 0; }

/* Location card */
.location-card { overflow: hidden; padding: 0; }
.location-card__body { padding: var(--sp-5); }
.location-card__map { aspect-ratio: 16 / 10; background: var(--c-tint); }
.location-card__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.location-card__row { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-3); color: var(--text-muted); }
.location-card__row .icon { color: var(--c-primary-strong); margin-top: 3px; }

/* Two-column content (e.g. contact form + locations) */
.split { display: grid; gap: var(--sp-6); }
@media (min-width: 860px) { .split--form { grid-template-columns: 1.1fr .9fr; } }

/* Company Profile feature gallery (editorial: first image featured) */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-7); }
.gallery__item { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery__item--ph { display: flex; align-items: center; justify-content: center; background: var(--c-tint);
  color: var(--c-primary-strong); border: 1px dashed var(--c-accent-light); }
@media (max-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item:first-child { grid-column: span 2; grid-row: auto; }
}

/* Facility images — featured collage: cinematic hero + a tile row that always
   fills the full width evenly (auto-fit stretches however many tiles exist) */
.facility__media { display: grid; gap: var(--sp-2); }
.facility__img { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.facility__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); }
.facility__thumb { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); display: block; }
.facility__media .js-lightbox { transition: opacity var(--transition); }
.facility__media .js-lightbox:hover, .facility__media .js-lightbox:focus-visible { opacity: .88; }

/* Inline contact form (replaces the old modal). Capped so the fields do not
   stretch the full container width on a wide screen. 840px rather than the
   original 720 so the three-across row below has room to breathe. */
.contact-form { max-width: 840px; margin-bottom: var(--sp-8); }

/* Name / email / company share one line.

   The form plugin renders each field as a direct child of <form> with no row
   wrapper of its own, so the row is built here: a three-column grid in which
   everything spans the full width by default, and only the fields tagged
   `outerclasses: form-field--third` in the page frontmatter opt into a single
   column. A field added later therefore still gets its own line unless it is
   deliberately tagged, and the tagging lives with the field definition in
   Admin rather than as an nth-child count that quietly breaks on reorder.

   `> *` rather than `> .form-field` so the trailing .buttons wrapper spans the
   full width too. The plugin's own hidden inputs (__form-name__, nonce, ...)
   are display:none from the UA stylesheet, so they never become grid items and
   leave no empty cells behind.

   Column gap only: vertical rhythm still comes from the existing
   `form .form-field { margin-bottom }` rule, so single-column fields keep the
   spacing they have everywhere else on the site. */
.contact-form form { display: grid; gap: 0 var(--sp-4); }
.contact-form form > * { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .contact-form form { grid-template-columns: repeat(3, 1fr); }
  .contact-form form > .form-field--third { grid-column: span 1; }
}

/* Location card — map graphic on top, details below. */
.loc-card { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
.loc-card__map { position: relative; aspect-ratio: 3 / 2; background: var(--c-surface); }
.loc-card__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* `contain`, not `cover`: a cropped map is useless. */
.loc-card__map-img { width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.loc-card__body { display: flex; flex-direction: column; padding: var(--sp-5); flex: 1; }
.loc-card__name { font-size: 1rem; font-weight: 700; color: var(--c-ink); }
.loc-card__meta { color: var(--text-muted); font-size: .8125rem; margin-top: var(--sp-1); max-width: none; }
.loc-card__addr { color: var(--text-muted); font-size: .8125rem; line-height: 1.6;
  margin-top: var(--sp-2); max-width: none; }
.loc-card__rows { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); }
.loc-card__row { display: flex; align-items: flex-start; gap: 7px; font-size: .8125rem;
  color: var(--text-muted); margin: 0; max-width: none; }
.loc-card__row .icon { flex: none; margin-top: 2px; }
.loc-card__row a, .loc-card__row .link-btn { color: var(--text-muted); font-size: inherit; }
.loc-card__row a:hover, .loc-card__row .link-btn:hover { color: var(--c-primary-strong); }
/* Pushed to the bottom so the link lines up across cards of differing height. */
.loc-card__visit { margin-top: auto; padding-top: var(--sp-4); align-self: flex-start;
  color: var(--c-primary-strong); font-weight: 600; font-size: .875rem; text-decoration: none; }

/* Locations — prominent per-location maps */
.loc-list { display: grid; gap: var(--sp-6); }
.loc { display: grid; gap: var(--sp-5); align-items: stretch; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; }
.loc__map { aspect-ratio: 16 / 10; background: var(--c-tint); min-height: 240px; }
.loc__map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Uploaded map graphic — `contain`, not `cover`: a cropped map is useless. */
.loc__map-img { width: 100%; height: 100%; object-fit: contain; display: block;
  background: var(--c-surface); cursor: zoom-in; }
.loc__map .img-ph { border-radius: 0; height: 100%; }
.loc__info { padding: var(--sp-6); align-self: center; }
.loc__info h2 { margin: var(--sp-2) 0; }
.loc__row { display: flex; gap: var(--sp-3); align-items: flex-start; margin: var(--sp-2) 0; color: var(--text-muted); }
.loc__row .icon { color: var(--c-primary-strong); margin-top: 3px; flex: none; }
@media (min-width: 820px) {
  .loc { grid-template-columns: 1.3fr 1fr; gap: 0; }
  .loc:nth-child(even) .loc__map { order: 2; }
}