/* ============================================================
   JAMAR — Homepage components (.jm-hp-*)
   Ported from the Claude Design handoff (pages/homepage.css, .jb-*)
   onto the --jm--* tokens in ../bricks-tokens.css (load that first).
   Shared pieces (container, section, eyebrow, sec-head, sub, button,
   link, icons, sr-only) come from bricks-tokens.css — only
   homepage-specific components live here.

   Content rules (homepage.md §1 locked decisions):
   - no FSC / solar / ISO badges; stats are plain text, not red;
   - category and pillar cards are text cards until product and
     production photos are supplied;
   - heritage is text only; the logo wall is added when approved
     files exist.

   Breakpoints follow Bricks: 991px tablet, 767px mobile landscape,
   478px mobile portrait.
   ============================================================ */

/* ---------- 01 Hero ---------- */

.jm-hp-hero {
  position: relative;
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: clamp(560px, 80vh, 820px);
  background: var(--jm--color-surface);
}
/* Text column lines up with .jm-container on wide screens; the image bleeds to the edge. */
.jm-hp-hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-block: var(--jm--space-3xl);
  padding-inline: max(var(--jm--container-pad), calc((100vw - var(--jm--container-max)) / 2 + var(--jm--container-pad))) var(--jm--space-2xl);
}
.jm-hp-hero__h1 {
  max-width: 18ch;
  margin-bottom: var(--jm--space-m);
  text-wrap: balance;
}
.jm-hp-hero__sub {
  margin: 0 0 var(--jm--space-l);
  max-width: 48ch;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
  text-wrap: pretty;
}
.jm-hp-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--jm--space-s); }

/* Seam bar — the one restrained brand cue, on the join between text and image. */
.jm-hp-hero__seam {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 60%;
  z-index: var(--jm--z-base);
  width: var(--jm--bar-thickness);
  background: var(--jm--color-brand);
  transform: translateX(-50%);
  pointer-events: none;
}
.jm-hp-hero__media {
  position: relative;
  overflow: hidden;
  background: var(--jm--color-surface-alt);
}
.jm-hp-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .jm-hp-hero { grid-template-columns: 1fr; min-height: 0; }
  .jm-hp-hero__text { padding: var(--jm--space-2xl) var(--jm--container-pad) var(--jm--space-xl); }
  .jm-hp-hero__seam { display: none; }
  .jm-hp-hero__media {
    aspect-ratio: 16 / 9;
    border-top: var(--jm--bar-thickness) solid var(--jm--color-brand);
  }
}
@media (max-width: 478px) {
  .jm-hp-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .jm-hp-hero__media { aspect-ratio: 4 / 3; }
}

/* ---------- 02 Featured categories + 03 Service pillars (text cards) ---------- */

.jm-hp-grid {
  display: grid;
  gap: var(--jm--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-hp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.jm-hp-grid--3 { grid-template-columns: repeat(3, 1fr); }

.jm-hp-card {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-xs);
  height: 100%;
  padding: var(--jm--space-l);
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  color: var(--jm--color-text);
  text-decoration: none;
  transition: border-color var(--jm--duration-base) var(--jm--ease-out),
              box-shadow var(--jm--duration-base) var(--jm--ease-out);
}
.jm-hp-card:hover {
  border-color: var(--jm--color-border-strong);
  box-shadow: var(--jm--shadow-card);
  color: var(--jm--color-text);
}
.jm-hp-card__h {
  font-size: var(--jm--text-xl);
  font-weight: var(--jm--weight-bold);
  line-height: var(--jm--leading-snug);
}
.jm-hp-card--lg { padding: var(--jm--space-xl) var(--jm--space-l); }
.jm-hp-card--lg .jm-hp-card__h { font-size: var(--jm--text-2xl); }
.jm-hp-card__b {
  flex: 1;
  margin: 0;
  font-size: var(--jm--text-base);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text-muted);
}
.jm-hp-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--jm--space-2xs);
  margin-top: var(--jm--space-s);
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-brand);
}
.jm-hp-card:hover .jm-arrow,
.jm-hp-ncard:hover .jm-arrow { transform: translateX(var(--jm--space-2xs)); }

@media (max-width: 991px) {
  .jm-hp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .jm-hp-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 478px) {
  .jm-hp-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- 04 Stats ---------- */

.jm-hp-stats__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-hp-stat {
  display: flex;
  flex-direction: column;
  gap: var(--jm--space-s);
  padding-inline: var(--jm--space-m);
  border-left: 1px solid var(--jm--color-border);
}
.jm-hp-stat:first-child { padding-left: 0; border-left: 0; }
.jm-hp-stat__value {
  font-family: var(--jm--font-display);
  font-size: var(--jm--text-5xl);
  font-weight: var(--jm--weight-extrabold);
  line-height: 1;
  letter-spacing: var(--jm--tracking-tight);
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  color: var(--jm--color-text);
}
.jm-hp-stat__label {
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-medium);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
  color: var(--jm--color-text-muted);
}

@media (max-width: 991px) {
  .jm-hp-stats__list { grid-template-columns: repeat(2, 1fr); row-gap: var(--jm--space-xl); }
  .jm-hp-stat:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 478px) {
  .jm-hp-stats__list { grid-template-columns: 1fr; row-gap: 0; }
  .jm-hp-stat {
    padding: var(--jm--space-m) 0;
    border-left: 0;
    border-bottom: 1px solid var(--jm--color-border);
  }
  .jm-hp-stat:last-child { border-bottom: 0; }
}

/* ---------- 05 Trust strip (badges; logo wall added when files arrive) ---------- */

.jm-hp-trust__grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--jm--space-xl);
  align-items: center;
}
.jm-hp-trust__lead {
  margin: 0;
  max-width: 32ch;
  font-size: var(--jm--text-l);
  font-weight: var(--jm--weight-semibold);
  line-height: var(--jm--leading-snug);
  color: var(--jm--color-text);
}
.jm-hp-trust__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jm-hp-trust__item {
  --jm-icon-size: 1.75rem;
  display: flex;
  align-items: center;
  gap: var(--jm--space-s);
  padding-inline: var(--jm--space-m);
  border-left: 1px solid var(--jm--color-border);
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  line-height: var(--jm--leading-snug);
  color: var(--jm--color-text);
}
.jm-hp-trust__item:first-child { padding-left: 0; border-left: 0; }

@media (max-width: 991px) {
  .jm-hp-trust__grid { grid-template-columns: 1fr; gap: var(--jm--space-l); }
}
@media (max-width: 767px) {
  .jm-hp-trust__row { grid-template-columns: 1fr; }
  .jm-hp-trust__item {
    padding: var(--jm--space-s) 0;
    border-left: 0;
    border-top: 1px solid var(--jm--color-border);
  }
  .jm-hp-trust__item:first-child { padding-top: 0; border-top: 0; }
}

/* ---------- 06 Heritage (text only) ---------- */

.jm-hp-heritage__grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--jm--space-2xl);
  align-items: start;
}
.jm-hp-heritage__head h2 { max-width: 16ch; }
.jm-hp-heritage__body {
  display: grid;
  gap: var(--jm--space-m);
  max-width: var(--jm--content-max);
  padding-left: var(--jm--space-m);
  border-left: var(--jm--bar-thickness) solid var(--jm--color-brand);
}
.jm-hp-heritage__body p {
  margin: 0;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: var(--jm--color-text);
}
.jm-hp-heritage__body .jm-link { justify-self: start; }

@media (max-width: 991px) {
  .jm-hp-heritage__grid { grid-template-columns: 1fr; gap: var(--jm--space-l); }
}

/* ---------- 07 News (3 latest posts, Bricks query loop) ---------- */

.jm-hp-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--jm--space-m);
}
.jm-hp-ncard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--jm--color-surface);
  border: 1px solid var(--jm--color-border);
  border-radius: var(--jm--radius-m);
  color: var(--jm--color-text);
  text-decoration: none;
  transition: border-color var(--jm--duration-base) var(--jm--ease-out),
              box-shadow var(--jm--duration-base) var(--jm--ease-out);
}
.jm-hp-ncard:hover {
  border-color: var(--jm--color-border-strong);
  box-shadow: var(--jm--shadow-card);
  color: var(--jm--color-text);
}
.jm-hp-ncard__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--jm--color-surface-alt);
}
.jm-hp-ncard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.jm-hp-ncard__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--jm--space-xs);
  padding: var(--jm--space-m) var(--jm--space-m) var(--jm--space-l);
}
.jm-hp-ncard__cat {
  margin: 0;
  font-size: var(--jm--text-xs);
  font-weight: var(--jm--weight-bold);
  letter-spacing: var(--jm--tracking-wide);
  text-transform: uppercase;
  color: var(--jm--color-text-muted);
}
.jm-hp-ncard__title {
  font-size: var(--jm--text-l);
  font-weight: var(--jm--weight-semibold);
  line-height: var(--jm--leading-snug);
  letter-spacing: var(--jm--tracking-normal);
}
.jm-hp-ncard__date {
  margin: 0;
  font-family: var(--jm--font-mono);
  font-size: var(--jm--text-xs);
  color: var(--jm--color-text-muted);
}
.jm-hp-ncard__more {
  display: inline-flex;
  align-items: center;
  gap: var(--jm--space-2xs);
  margin-top: auto;
  padding-top: var(--jm--space-s);
  font-size: var(--jm--text-s);
  font-weight: var(--jm--weight-semibold);
  color: var(--jm--color-brand);
}

@media (prefers-reduced-motion: no-preference) {
  .jm-hp-ncard__img { transition: transform var(--jm--duration-slow) var(--jm--ease-out); }
  .jm-hp-ncard:hover .jm-hp-ncard__img { transform: scale(1.03); }
}
@media (max-width: 991px) {
  .jm-hp-news__grid { grid-template-columns: 1fr; }
}

/* ---------- 08 Contact CTA (dark band) ---------- */

.jm-hp-cta { padding-block: var(--jm--space-3xl); }
.jm-hp-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jm--space-m);
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
}
.jm-hp-cta .jm-eyebrow { margin: 0; color: color-mix(in srgb, var(--jm--color-on-surface-dark) 72%, transparent); }
.jm-hp-cta h2 { color: var(--jm--color-on-surface-dark); }
.jm-hp-cta__body {
  margin: 0;
  font-size: var(--jm--text-l);
  line-height: var(--jm--leading-relaxed);
  color: color-mix(in srgb, var(--jm--color-on-surface-dark) 80%, transparent);
}
.jm-hp-cta__body a {
  color: var(--jm--color-on-surface-dark);
  text-decoration: none;
  white-space: nowrap;
}
.jm-hp-cta__body a:hover { color: var(--jm--color-brand-hover); }
.jm-hp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--jm--space-s) var(--jm--space-l);
  margin-top: var(--jm--space-xs);
}
.jm-hp-cta .jm-link { color: var(--jm--color-on-surface-dark); }
.jm-hp-cta .jm-link:hover { color: var(--jm--color-brand-hover); }

/* ---------- Touch targets: text links get a 44 px row ---------- */

.jm-hp-news .jm-sec-head .jm-link,
.jm-hp-heritage__body .jm-link,
.jm-hp-cta .jm-link { min-height: 44px; }