/* ============================================================
   Home page only.

   Loaded solely by the `home-technical` entry in TYPE_ASSETS, so it never ships on any other
   page. Every colour, radius and shadow comes from the tokens in site.css. Anything the product
   and category pages also use lives in technical.css and must not be duplicated here — if a rule
   below starts with `.ptx-` at the top level, it is in the wrong file.
   ============================================================ */

/* ---------- 2. positioning + proof ---------- */

.hmx-proof { text-align: center; }

.hmx-proof__h1 {
  max-width: 20ch;
  margin-inline: auto;
}

.hmx-proof__lede {
  max-width: 68ch;
  margin: 18px auto 0;
  color: var(--ink-70);
  font-size: 17px;
  line-height: 1.65;
}

.hmx-proof__figures { margin-top: 40px; }

@media (max-width: 700px) {
  .hmx-proof__h1 { max-width: none; }
  .hmx-proof__lede { font-size: 16px; }
}

/* ---------- 7. what we do ---------- */

/* The services use `hmx-card` like every other rail; only the badge and its clearance are
   specific to them. `service-card` in site.css is now used solely by the frozen legacy home()
   renderer. */
/* `position: relative` anchors the badge; the frame height comes from `.hmx-card__media` like
   every other card, and `overflow: visible` lets the badge hang below the photo. */
.hmx-card--service .hmx-card__media { position: relative; overflow: visible; }
.hmx-card__badge {
  position: absolute;
  /* Matches `hmx-card__body`'s left padding so the badge lines up with the title beneath it. */
  left: 22px;
  bottom: -21px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--ptx-rule, var(--line));
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}
.hmx-card__badge svg { width: 20px; height: 20px; stroke: var(--blue-600); }
/* Clear the badge, which hangs 21px below the media. */
.hmx-card--service .hmx-card__body { padding-top: 32px; }

/* ---------- 4 + 5. family and sector cards ---------- */

/* These are primary home-page sections, so they get real photo cards rather than the text-only
   `ptx-linkcard`, which is authored as a secondary "related links" rail on the product pages. */

.hmx-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Grid sizes each row to its own content, so the second row of a 3+3 or 3+2 layout ends up a
     different height from the first and the cards stop lining up across the section. `1fr` makes
     every row take the height of the tallest card in the whole grid. */
  grid-auto-rows: 1fr;
  gap: 20px;
}
/* Six families: 3 x 2, no orphan row. */
.hmx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Four services, one row. */
.hmx-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Five sectors: 3 + 2, with the last two centred so the short row does not read as broken. */
.hmx-cards--sectors { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hmx-cards--sectors > li { grid-column: span 2; }
.hmx-cards--sectors > li:nth-child(4) { grid-column: 2 / span 2; }
.hmx-cards--sectors > li:nth-child(5) { grid-column: 4 / span 2; }

.hmx-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ptx-rule, var(--line));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.hmx-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(1, 164, 241, .4);
}

/* The frame height is set explicitly, and that is deliberate.
   `aspect-ratio` does NOT work here: the media is a flex item in the card's column flex
   container, so its flex-basis is `auto` and its main size comes from its CONTENT — the image's
   natural height. The source photos run from 0.74 to 1.83 aspect, so every frame sized itself
   differently and the thumbnails came out visibly different heights. A definite `height` removes
   the ambiguity completely: it also makes the img's `height: 100%` resolvable, which a
   ratio-derived height does not.
   One height for every card type, so the whole page shares a single thumbnail metric. */
.hmx-card__media {
  display: block;
  flex: none;
  height: 220px;
  background: var(--panel-fill);
  border-bottom: 1px solid var(--ptx-rule, var(--line));
}
.hmx-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* `contain` for equipment shots so a cabinet is never cropped; scenery uses `cover` below. */
  object-fit: contain;
  padding: 14px;
}
.hmx-card--sector .hmx-card__media img,
.hmx-card--service .hmx-card__media img {
  object-fit: cover;
  padding: 0;
}

@media (max-width: 620px) {
  .hmx-card__media { height: 200px; }
}

.hmx-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  padding: 20px 22px 18px;
}
/* Labels wrap to one or two lines depending on the name — "FREQUENCY CONVERTERS" takes one,
   "DC UPS / BATTERY CHARGERS / RECTIFIERS" takes two — which would start the blurb at a different
   height on each card. Reserving two lines lines them up; the foot is already pinned by
   `margin-top: auto`. */
.hmx-card__label {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  min-height: 2.6em; /* 2 lines at the line-height above */
}
/* Family and service labels are set in caps by the source copy. The tight tracking the technical
   headings use is drawn for mixed case; on caps it reads cramped, so open it slightly. Sector
   labels are mixed case and keep the default. */
.hmx-cards--3 .hmx-card__label,
.hmx-card--service .hmx-card__label { letter-spacing: .03em; }
.hmx-card__blurb {
  font-size: 13px;
  color: var(--ink-70);
  line-height: 1.55;
}
.hmx-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}
.hmx-card__meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
  background: var(--blue-50);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}
.hmx-card__cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.hmx-card__more { color: var(--blue-600); margin-left: auto; }
.hmx-card__more svg { width: 18px; height: 18px; transition: transform .18s; }
.hmx-card:hover .hmx-card__more svg { transform: translateX(5px); }

@media (max-width: 1000px) {
  .hmx-cards--3, .hmx-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Drop the centring trick: at two-up the five sectors tile evenly enough. */
  .hmx-cards--sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hmx-cards--sectors > li,
  .hmx-cards--sectors > li:nth-child(4),
  .hmx-cards--sectors > li:nth-child(5) { grid-column: auto; }
}
@media (max-width: 620px) {
  .hmx-cards--3, .hmx-cards--4, .hmx-cards--sectors { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hmx-card { transition: none; }
  .hmx-card:hover { transform: none; }
  .hmx-card__more svg { transition: none; }
}

/* ---------- 3. why enclove (dark band) ---------- */

.hmx-why {
  background: var(--band-dark);
  color: var(--white);
}

.hmx-why__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hmx-why__eyebrow { color: var(--blue-400); }
.hmx-why__h2 { color: var(--white); }

.hmx-why__body {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.7;
}
.hmx-why__body p + p { margin-top: 14px; }

.hmx-why__cta { margin-top: 26px; }

.hmx-why__shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* The first photo spans both columns; the other two sit beneath it. */
.hmx-why__shot:first-child { grid-column: 1 / -1; }

.hmx-why__shot {
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.hmx-why__shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.hmx-why__bullets { margin-top: 48px; }

/* Four bullets, so override the shared three-across grid: at 3 wide the fourth card
   sits alone on a second row. Below this breakpoint the auto-fit base gives a 2x2. */
@media (min-width: 1000px) {
  .hmx-why__bullets { grid-template-columns: repeat(4, 1fr); }
}

/* The ptx-feature card is authored for a light band; restate it for this one. */
.hmx-why .ptx-feature {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.hmx-why .ptx-feature__title { color: var(--white); }
.hmx-why .ptx-feature__body { color: rgba(255, 255, 255, 0.75); }
.hmx-why .ptx-feature__icon { color: var(--blue-400); }

@media (max-width: 900px) {
  .hmx-why__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- 8. global reach ---------- */

.hmx-reach__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: start;
}

.hmx-reach__map img {
  display: block;
  width: 100%;
  height: auto;
}

.hmx-reach__offices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.hmx-reach__office {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-fill);
}

.hmx-reach__pin { color: var(--blue); flex: 0 0 auto; }

.hmx-reach__role {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.hmx-reach__city { font-weight: 700; margin-top: 2px; }
.hmx-reach__addr {
  font-size: 14px;
  color: var(--ink-70);
  line-height: 1.5;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .hmx-reach__grid { grid-template-columns: 1fr; }
}

/* ---------- 9. insights ---------- */

.hmx-insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.hmx-insight {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.hmx-insight:hover {
  border-color: rgba(1, 164, 241, .4);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.hmx-insight .hmx-card__more { margin-top: auto; padding-top: 12px; }
.hmx-insight:hover .hmx-card__more svg { transform: translateX(5px); }

.hmx-insight__cat {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.hmx-insight__title { font-size: 18px; line-height: 1.35; }
.hmx-insight__blurb {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-70);
  flex: 1 1 auto;
}

.hmx-insights__cta { margin-top: 28px; text-align: center; }

@media (max-width: 900px) {
  .hmx-insights { grid-template-columns: 1fr; }
}