/* ==========================================================================
   MTech Engineering — SERVICE PAGE layer                              service3d.css
   --------------------------------------------------------------------------
   Discipline pages (Civil & Structural, Electrical, …) load the SAME blueprint
   system as the home page (home3d.css) and only add what a service page needs:

     · the hero's engagement panel (label/value rows instead of live telemetry)
     · the scope-media figure plate and its caption strip
     · the next-discipline band

   Everything else — tokens, header, hero, ticker, cards, steps, standards
   chips, related cards, CTA band, footer, buttons, type scale — comes from
   home3d.css, so the two page families can never drift apart.

   Depends: assets/css/main.css, home3d.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO — same skeleton as home, with a discipline breadcrumb
   -------------------------------------------------------------------------- */
.hx-svc .hx-hero { min-height: min(100svh, 780px); }

/* breadcrumb: Home / Services / this discipline */
.hx-svc .hx-coord a { color: inherit; text-decoration: none; }
.hx-svc .hx-coord a:hover { color: var(--hx-blue); }
.hx-svc .hx-coord > a + a::before,
.hx-svc .hx-coord > a + span::before { content: "/"; margin-right: 14px; color: rgba(12, 42, 84, 0.75); }

/* --------------------------------------------------------------------------
   1b. SCOPE MEDIA — landscape figure plate + caption strip
   The home page's collage is portrait because its source photo is; a discipline
   page has a 3:2 site photograph instead, so the frame takes the photo's own
   ratio and `cover` has nothing left to crop. The caption strip below it keeps
   the column close to the height of the copy card beside it, which is what the
   two columns are centred against.
   -------------------------------------------------------------------------- */
.hx-svc .scope-media {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  align-self: center;
}
.hx-svc .scope-media__frame {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--hx-r);
  overflow: hidden;
  border: 1px solid var(--hx-line);
  box-shadow: var(--hx-shadow);
  background: var(--hx-bg-2);
}
/* height/width 100% beats main.css only because this selector ships later;
   `transform: none` also disarms any GSAP image animation on the plate */
.hx-svc .scope-media__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: none !important; }
.hx-svc .scope-media__tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--hx-line);
  backdrop-filter: blur(6px);
  font-family: var(--hx-mono);
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-dim);
}
.hx-svc .scope-media__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--hx-line);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r);
  overflow: hidden;
}
.hx-svc .scope-media__strip > div { background: rgba(255, 255, 255, 0.9); padding: 12px 14px; }
.hx-svc .scope-media__strip b { display: block; font-family: var(--hx-mono); font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hx-dim); margin-bottom: 4px; }
.hx-svc .scope-media__strip span { display: block; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; color: var(--hx-ink); letter-spacing: -0.01em; }
@media (max-width: 760px) {
  .hx-svc .scope-media__strip { grid-template-columns: 1fr; }
  /* the second figure is a composition aid, not content: drop it on phones so
     the scope section stays a quick read */
  /* '~', not '+': the caption strip sits between the two plates, so they are not
     adjacent siblings */
  .hx-svc .scope-media__strip ~ .scope-media__frame { display: none; }
}

/* engagement panel: label/value rows, no camera or model numbers */
.hx .hx-rows { border-top: 1px solid var(--hx-line); margin-top: 12px; }
.hx .hx-rows div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hx-line);
}
.hx .hx-rows dt,
.hx .hx-rows b {
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hx-dim);
  font-weight: 500;
  padding-top: 2px;
}
.hx .hx-rows span { font-size: 15.5px; line-height: 1.5; color: var(--hx-ink); }
.hx .hx-rows div:last-child { border-bottom: 0; }
.hx .hx-panel__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--hx-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hx-blue);
}
.hx .hx-panel__note i { width: 18px; height: 1px; background: var(--hx-red); font-style: normal; }

/* --------------------------------------------------------------------------
   2. SPEC STRIP — the sub-label inside a facts cell
   -------------------------------------------------------------------------- */

.hx .hx-facts dd small { display: block; margin-top: 4px; font-family: var(--hx-mono); font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-dim); }

/* --------------------------------------------------------------------------
   3. NEXT DISCIPLINE BAND
   -------------------------------------------------------------------------- */
.hx .next-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-r);
  background: linear-gradient(150deg, rgba(11, 95, 191, 0.07), rgba(255, 255, 255, 0.9));
  box-shadow: 0 20px 44px -34px rgba(12, 42, 84, 0.55);
  text-decoration: none;
  transition: border-color 0.4s var(--hx-ease), transform 0.4s var(--hx-ease), background 0.4s;
}
.hx .next-band:hover { border-color: rgba(11, 95, 191, 0.4); transform: translateY(-3px); }
.hx .next-band small { display: block; font-family: var(--hx-mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hx-dim); margin-bottom: 6px; }
.hx .next-band h3 { font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 600; color: var(--hx-ink); margin: 0; letter-spacing: -0.02em; }
.hx .next-band svg { width: 26px; height: 26px; color: var(--hx-blue); transition: transform 0.35s var(--hx-ease); }
.hx .next-band:hover svg { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   4. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
}
@media (max-width: 760px) {
  .hx .hx-rows div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* READABILITY PASS — 2026-09-27: page meta print stays at 13px or more. */
small, dt, figcaption, .hx-facts dt, .hx-facts dd { font-size: max(13px, 0.82em); }
small, dt, figcaption { font-weight: 500; }