/* ============================================================
   HOME page — built from Figma HOME (1:9) with the real values.
   Design frame is 1920 wide with a 1024px content column (x448–1472).
   Loaded only by home.jade (block page-css), so it never affects other pages.
   ============================================================ */

/* Declared on :root, NOT on the section selectors. The hairlines (1:90, 1:91) sit between sections, so
   variables scoped to a section would be undefined there and the line would render fully transparent. */
:root {
  --hm-red: #c71e30;
  --hm-cyan: #3cc9ff;
  --hm-ink: #011a36;
  --hm-body: #363636;
  --hm-light: #fefdfd;
  --hm-navy-a: #000e27;
  --hm-navy-b: #0b3d73;
}

/* content column — identical geometry to .container in cm.css (1048 outer = 1024 content + 24 gutter),
   so the navbar, the page body and the footer all line up on the same left and right edges */
.hm-wrap { width: 100%; max-width: 1048px; margin-inline: auto; padding-inline: 12px; }

/* red 67x5 divider (1:72, 1:73, 1:120, 1:124, 1:144, 1:177) */
.hm-rule { display: block; width: 67px; height: 5px; margin-top: 16px; background: var(--hm-red); }
.hm-rule-center { margin-inline: auto; }

/* shared type */
.hm-eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--hm-red); }
.hm-eyebrow-red { color: var(--hm-red); }
.hm-h2 {
  margin: 4px 0 0; font-size: 30px; font-weight: 700; line-height: 1.25;
  background: linear-gradient(90deg, var(--hm-navy-a), var(--hm-navy-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hm-h2-light { background: none; color: var(--hm-light); -webkit-text-fill-color: currentColor; }
.hm-body { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--hm-body); }
.hm-body-light { color: var(--hm-light); }
.hm-center { text-align: center; }

/* buttons (1:15/1:18 — 44px tall) */
.hm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; border-radius: 0;
}
.hm-btn-red { background: var(--hm-red); color: #fdfdfd; }
.hm-btn-red:hover { background: #a91827; color: #fdfdfd; }
.hm-btn-ghost { border-color: var(--hm-light); color: var(--hm-light); }
.hm-btn-ghost:hover { background: rgba(255,255,255,.12); color: var(--hm-light); }
.hm-btn-sm { min-height: 36px; padding: 0 16px; font-size: 16px; font-weight: 500; }

/* cyan hairline closing a section (1:90 y1126, 1:91 y2644) — 1024x1, #3CC9FF at full opacity */
.hm-hairline { height: 1px; margin: 40px 0; border: 0; background: var(--hm-cyan); opacity: 1; }

/* centred section head; SEE MORE sits on the right of the heading row (1:116, 1:140, 1:175) */
.hm-head { position: relative; text-align: center; }
.hm-seemore {
  position: absolute; right: 0; top: 28px; font-size: 16px; color: var(--hm-ink); text-decoration: none;
}
a.hm-seemore:hover { text-decoration: underline; }
.hm-head-light .hm-seemore { color: var(--hm-light); }
/* designed in Figma but its route arrives in step 2 → shown, dimmed, not clickable */
.hm-seemore.is-off { opacity: .55; cursor: default; }

/* ---------- HERO (1:14, 594px tall) ---------- */
.hm-hero {
  display: flex; align-items: center; min-height: 594px; padding: 48px 0;
  color: var(--hm-light);
  /* NO colour wash — Figma 1:14 is a bare <img>, no fill, no overlay. The navy is in the photo itself
     (it fades to near-black on the left, which is where the headline sits). We were stacking a second
     gradient on top and darkening it twice (user report 2026-09-16). */
  background: url("/front/img/cm/hero-bg.webp") center/cover no-repeat;
}
.hm-hero-eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--hm-cyan); }
.hm-hero-title { margin: 10px 0 0; font-weight: 800; line-height: 1.1; }
.hm-hero-title .l1 { display: block; font-size: clamp(32px, 4.6vw, 55px); }
.hm-hero-title .l2 { display: block; font-size: clamp(26px, 3.6vw, 43px); }
.hm-hero-title .accent { color: var(--hm-red); }
.hm-hero-text { max-width: 540px; margin: 16px 0 0; font-size: 16px; line-height: 1.6; }
.hm-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ---------- COMPANY HISTORY (1:129 collage + 1:87 text + stats) ---------- */
.hm-history { padding: 56px 0 8px; }
.hm-history-grid { display: grid; grid-template-columns: 451fr 502fr; gap: 46px; align-items: center; }
.hm-history-media { position: relative; }
.hm-history-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,.15);
}
.hm-history-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 45%; height: auto;
}
.hm-history-text .hm-body + .hm-body { margin-top: 12px; }

/* Stats sit INSIDE the right-hand text column, not across the full width: in Figma the three icon groups
   are at x1022 / x1197 / x1374, all within the right column (x970–1472), directly below the paragraphs
   and alongside the bottom of the collage. Each stat is centred: icon → number → label → sub. */
.hm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; text-align: center; }
.hm-stat-icon { display: block; width: 43px; height: 43px; margin: 0 auto 8px; object-fit: contain; }
.hm-stat-num { font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--hm-red); }
/* 1:92 — Plus Jakarta Sans Bold 18px #011a36 */
.hm-stat-label { font-size: 18px; font-weight: 700; color: var(--hm-ink); }
.hm-stat-sub { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--hm-body); }

/* ---------- PRODUCTS & APPLICATIONS tiles (1:125–1:128 — 241px square, radius 15) ---------- */
.hm-cats { padding: 24px 0 8px; }
.hm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.hm-tile { display: block; color: inherit; text-decoration: none; text-align: center; }
.hm-tile-media {
  aspect-ratio: 1 / 1; overflow: hidden; background: #e9edf2;
  border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,.15);
}
.hm-tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-tile-name { margin-top: 16px; font-size: 16px; font-weight: 700; color: var(--hm-ink); }
.hm-tile-desc {
  margin-top: 4px; font-size: 14px; color: var(--hm-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- ADVANCED MACHINES band (1:11 navy gradient + 1:12/1:13 pattern) ----------
   The two patterns are NOT the same picture twice. 1:12 (x0) shows only a CROP of image8 — a 448x530 box
   with the image at w158.84% h154.72%, offset left -58.77% top -41.51% — and 1:13 (x1471-1919) is that same
   box ROTATED 180deg. Both are baked into their own file (band-pattern-l / -r.webp, cut with sharp from the
   512x590 image8 export — the uncut file is band-pattern.webp in commit ab82eb6), so no CSS transform is
   needed. Using the whole image unrotated on both sides
   put the dense lines on the wrong edge of the right-hand side (user report 2026-09-24).
   Width min(448px, 50%): the design's 448 on desktop, and never more than half the band, so the two can
   never overlap on a narrow screen. The first declaration is the fallback for browsers without min(). */
.hm-machines {
  margin-top: 40px; padding: 56px 0;
  background:
    url("/front/img/cm/band-pattern-l.webp") left top/448px auto no-repeat,
    url("/front/img/cm/band-pattern-r.webp") right top/448px auto no-repeat,
    linear-gradient(90deg, var(--hm-navy-a), var(--hm-navy-b));
  background:
    url("/front/img/cm/band-pattern-l.webp") left top/min(448px, 50%) auto no-repeat,
    url("/front/img/cm/band-pattern-r.webp") right top/min(448px, 50%) auto no-repeat,
    linear-gradient(90deg, var(--hm-navy-a), var(--hm-navy-b));
}

/* ---------- machine cards on the dark band (1:145-1:148 + 1:133-1:139 + 1:132-1:138) ----------
   Four columns on the usual 1024 grid (x448/709/970/1231 → 241 wide, 20px gutters). The circle is
   200x200 with a 5px #fefdfd ring and the same shadow the product tiles use; it is centred in its
   column, so the column itself is the 241 and the circle does NOT fill it.
   Vertical rhythm from the frame: divider ends y1802 → circle y1838 (36) → title y2068 (30 under the
   circle) → count y2097 (9 under the title). */
.hm-mach-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.hm-mach { display: block; text-align: center; color: inherit; text-decoration: none; }
.hm-mach-media {
  width: 200px; max-width: 100%; margin: 0 auto; aspect-ratio: 1 / 1; overflow: hidden;
  background: #e9edf2; border: 5px solid #fefdfd; border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
}
.hm-mach-media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* 1:133 — Bold 16px #fefdfd. The frame's mock is uppercase, but the category name is rendered as the
   admin typed it (requirements doc: "render the text as entered; do not force uppercase"). */
.hm-mach-name { margin-top: 30px; font-size: 16px; font-weight: 700; line-height: 1.25; color: #fefdfd; }
/* 1:132 — Regular 14px #fefdfd, the item count from the data */
.hm-mach-count { margin-top: 9px; font-size: 14px; font-weight: 400; line-height: 1.3; color: #fefdfd; }
.hm-mach:hover .hm-mach-name { color: #ffd6da; }

/* ---------- TRUSTED BY LEADING COMPANIES — static logo carousel ----------
   Card 1:149 = 241x94, white, radius 10, shadow 0 4px 15px rgba(0,0,0,.15).
   Columns x448/709/970/1231 → 20px gap; rows y2352/y2468 → 22px gap.
   Dots 1:165 = r5 (10px), centres 15px apart, active #011A36, inactive #D9D9D9. */
.hm-clients { padding: 56px 0 8px; }
.hm-logos { margin-top: 32px; }
/* Only the viewport clips, and its height follows the ACTIVE slide (set in JS) — the last slide holds
   just 4 logos, and a flex track would otherwise stretch every slide to the tallest and leave a blank
   row below it. The dots live OUTSIDE this element so they are never clipped.
   The slide padding is the shadow gutter: box-shadow spreads 15px, and without room to fade the clip
   slices it into a hard dark edge down the sides and under the last row. */
/* draggable with finger or mouse; touch-action keeps vertical page scrolling to the browser */
.hm-logos-viewport { overflow: hidden; transition: height .45s ease; cursor: grab; touch-action: pan-y; }
.hm-logos-viewport img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.hm-logos.is-dragging .hm-logos-viewport { cursor: grabbing; }
.hm-logos.is-dragging .hm-logos-track { transition: none; }
.hm-logos-track { display: flex; align-items: flex-start; transition: transform .45s ease; }
.hm-logo-slide {
  flex: 0 0 100%; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 22px 20px; align-content: start; padding: 8px 10px 24px;
}
.hm-logo-card {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 241 / 94; padding: 8px; background: #fff;
  border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
}
.hm-logo-card img { display: block; width: auto; height: auto; object-fit: contain; }
.hm-logo-dots { display: flex; justify-content: center; gap: 5px; margin-top: 28px; }
.hm-logo-dots button { width: 10px; height: 10px; padding: 0; background: #d9d9d9; border: 0; border-radius: 50%; cursor: pointer; transition: background .15s; }
.hm-logo-dots button.active { background: var(--hm-ink); }
@media (prefers-reduced-motion: reduce) { .hm-logos-track { transition: none; } }

/* ---------- INFORMATION & ACTIVITY (symbol 1:173 — 3 cards) ---------- */
.hm-news { padding: 24px 0 56px; }
.hm-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 32px; }
.hm-news-card { display: flex; flex-direction: column; }
.hm-news-media {
  display: block; aspect-ratio: 328 / 188; overflow: hidden; background: #e9edf2;
  border-radius: 13.61px; box-shadow: 0 5.444px 20.415px rgba(0,0,0,.15);
}
.hm-news-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm-news-title {
  margin-top: 16px; font-size: 20px; font-weight: 700; line-height: 1.35; text-decoration: none;
  background: linear-gradient(90deg, var(--hm-navy-a), var(--hm-navy-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-news-desc {
  margin: 8px 0 0; font-size: 18px; line-height: 1.5; color: var(--hm-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-news-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.hm-news-foot .cm-art-date { font-size: 16px; color: var(--hm-body); }

/* ---------- empty state (house rule: never dummy content) ---------- */
.hm-empty { margin-top: 32px; padding: 40px 16px; text-align: center; }
.hm-empty .t { font-size: 18px; font-weight: 700; color: var(--hm-ink); }
.hm-empty .s { margin-top: 4px; font-size: 14px; color: var(--hm-body); }
.hm-empty-light .t { color: var(--hm-light); }
.hm-empty-light .s { color: var(--hm-light); opacity: .85; }

/* ---------- responsive (no mobile design in Figma — derived from the desktop frame) ---------- */
@media (max-width: 991.98px) {
  /* the circle shrinks with its column instead of overflowing it */
  .hm-mach-media { width: 160px; }
  .hm-history-grid { grid-template-columns: 1fr; gap: 28px; }
  .hm-tiles { grid-template-columns: repeat(2, 1fr); }
  .hm-mach-cards { grid-template-columns: repeat(2, 1fr); }
  .hm-news-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  /* 8 logos per slide: 4 across stops being readable once the column narrows */
  .hm-logo-slide { grid-template-columns: repeat(3, 1fr); }
  .hm-seemore { position: static; display: inline-block; margin-bottom: 8px; }
  /* the collage is square and dominates a stacked layout — cap and centre it */
  .hm-history-photo { max-width: 420px; margin-inline: auto; }
  .hm-history-badge { max-width: 190px; }
}
@media (max-width: 767.98px) {
  .hm-hero { min-height: 520px; }
  .hm-news-grid { grid-template-columns: 1fr; gap: 28px; }
  .hm-logo-slide { grid-template-columns: repeat(2, 1fr); }
  .hm-history { padding: 40px 0 8px; }
  .hm-machines, .hm-clients { padding: 40px 0 8px; }
}
@media (max-width: 575.98px) {
  .hm-hero { min-height: 460px; padding: 40px 0; }
  /* two across keeps the tiles legible; one column just wastes the width */
  .hm-tiles { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hm-mach-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hm-mach-media { width: 140px; }
  .hm-tile-name { margin-top: 10px; font-size: 15px; }
  /* the three figures are short (2011 / 100+ / 40+), so they still fit three across */
  .hm-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
  .hm-stat-icon { width: 34px; height: 34px; }
  .hm-stat-num { font-size: 22px; }
  .hm-stat-label { font-size: 13px; }
  .hm-stat-sub { font-size: 11px; }
  .hm-h2 { font-size: 22px; }
  .hm-news-title { font-size: 18px; }
  .hm-news-desc { font-size: 15px; }
  .hm-hairline { margin: 28px 0; }
  /* only the two hero buttons go full width — the card "Read More" stays its own size */
  .hm-hero-btns { gap: 10px; }
  .hm-hero-btns .hm-btn { width: 100%; }
  .hm-btn-sm { width: auto; }
}
@media (max-width: 379.98px) {
  /* very narrow phones: one per row is the only thing that still reads */
  .hm-tiles { grid-template-columns: 1fr; }
  .hm-mach-cards { grid-template-columns: 1fr; }
  .hm-stats { grid-template-columns: 1fr; gap: 16px; }
}