/* ==========================================================================
   JALON THAILAND — WHY JALON
   Page-specific only; load after jalon-shell.css.

   1. Why Choose Jalon      3. Committed to Quality
   2. Advanced Equipment    4. Jalon's Advantage
   ========================================================================== */

/* 1. Why Choose Jalon ----------------------------------------------------
   Left text column (621px) with the certification band beneath it; the team
   photo bleeds off the right edge behind an angled left cut. */
.why-intro { position: relative; padding: 141px 0 0; overflow: hidden; }
.why-intro__grid { position: relative; display: grid; grid-template-columns: 641px minmax(0, 1fr); }
.why-intro__content { position: relative; z-index: 1; padding-bottom: 15px; }
.why-eyebrow {
  display: inline-flex; align-items: center; justify-content: center;
  height: 41px; padding: 0 25px; border-radius: 10px;
  background: rgba(238,179,13,.1); color: var(--gold);
  font-size: var(--fs-body); line-height: 1; text-transform: uppercase;
}
.why-intro__title { margin-top: 20px; font-size: 46px; font-weight: 700; line-height: 1; }
.why-intro__title em { font-style: normal; color: var(--gold); }
.why-intro__lead { margin-top: 25px; max-width: 621px; font-size: 24px; font-weight: 700; line-height: 32px; }
.why-intro__copy { margin-top: 26px; max-width: 621px; color: var(--ink-soft); line-height: 24px; text-wrap: pretty; }
.why-intro__copy b { font-weight: 700; }

/* Certification band: the .fig's 641 × 171 right-leaning trapezoid
   (top edge ends at 542.784 = 84.68% of the width). */
/* The .fig overlaps the two sprites (ISO 103..221, row 201..624 in the
   frame) so the row's right edge lands exactly on the trapezoid's top-edge
   terminus. Flowing them with flex + gap pushed the row past it and the clip
   sliced the D-U-N-S badge, so both are placed proportionally instead. */
.certifications {
  position: relative; z-index: 1;
  width: 641px; height: 171px; margin-top: 40px;
  background: var(--gold-grad);
  clip-path: polygon(0 0, 84.68% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 10px rgba(238,179,13,.85));
}
/* Four separate badge files (the .fig ships the last three as one sprite;
   they are cut apart so the row can reflow to 2×2 on a phone). Placed
   proportionally, matching the .fig's positions to the pixel. */
/* Each badge cut to its own bounds and placed at its true coordinate in the
   641 × 171 band, so desktop matches the .fig's merged sheet exactly while the
   four files can reflow independently on a phone. */
.certifications__badge { position: absolute; display: block; height: auto; }
.certifications__badge--iso { left: 3.588%; top: 16.374%; width: 18.409%; aspect-ratio: 1; }
.certifications__badge--iatf { left: 23.699%; top: 15.057%; width: 18.072%; aspect-ratio: 416 / 417; }
.certifications__badge--ecovadis { left: 44.074%; top: 15.545%; width: 17.899%; aspect-ratio: 412 / 415; }
.certifications__badge--duns { left: 63.276%; top: 17.662%; width: 19.723%; aspect-ratio: 454 / 389; }

/* Team photo: bleeds past the container's right edge. No clip — the .fig has
   this as a plain rectangle; the diagonal in the design image is the
   building's roofline in the photograph itself. */
.why-intro__media {
  display: block;
  position: absolute; left: 647px; top: 0; width: 926.68px; height: 630.467px;
  background: url(./figma/assets/why-team.png) center / cover no-repeat;
}

/* 2. Advanced Equipment --------------------------------------------------
   Full-bleed dark band with the technical pattern, list on the left and the
   interlocking flat-top hexagon composition on the right. */
.equipment {
  position: relative; margin-top: 115px; height: 793px;
  background: var(--grey-panel);
}
.equipment::before {
  content: ""; position: absolute; inset: 0;
  background: url(./figma/assets/why-dark-pattern.png) center / cover no-repeat;
}
.equipment > .container { position: relative; height: 100%; }
.equipment__title {
  position: absolute; top: 140px; width: 499px;
  font-size: 46px; font-weight: 700; line-height: 46px; color: #FFFFFF;
}
.equipment .btn--outline { position: absolute; top: 263px; height: 58px; box-shadow: inset 0 0 0 2px var(--gold), 0 0 10px 0 var(--gold); }
.equipment__list { position: absolute; top: 363px; display: grid; gap: 26px; }
.equipment__list li { display: grid; grid-template-columns: 55px 1fr; gap: 17px; align-items: center; }
/* Cropped sprite, same as the badge row — 1066.63% × 599.683% at 52.862% / 38.29% */
.equipment__list span[role="img"] {
  width: 55px; height: 55px;
  background: url(./figma/assets/why-bullet.png) 52.862% 38.290% / 1066.630% 599.683% no-repeat;
}
.equipment__list span { font-size: var(--fs-body); font-weight: 700; line-height: 22px; color: #FFFFFF; max-width: 322px; }

/* Hexagon composition — the .fig's four 328 × 323 flat-top plates at
   (542,1482) (803,1482) (803,1781) (1062,1631) in the 1440 frame, expressed
   here relative to the composition's own 848 × 621 box. */
/* Fluid, never transform-scaled: a transform would leave the 848px layout box
   behind and overflow. Percentages are over the container's 1328px padding
   box (the containing block), i.e. the .fig's 486 / 848. */
.equipment__hexes {
  position: absolute; left: 36.596%; top: 89px;
  width: 63.855%; height: auto; aspect-ratio: 848 / 621;
}
.equipment__hex {
  position: absolute; width: 38.679%; height: 52.013%;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  /* Polygon 1 rotated: the drawn hexagon is 328 wide but only 279.7 tall
     inside its 328 × 323 box, so the flat edges sit at 6.7% / 93.3%. */
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
  transition: transform 380ms var(--ease);
}
.equipment__hex:hover { transform: scale(1.03); }
.equipment__hex--left { left: 0; top: 23.994%; }
.equipment__hex--top { left: 30.778%; top: 0; }
.equipment__hex--bottom { left: 30.778%; top: 48.148%; }
.equipment__hex--right { left: 61.321%; top: 23.994%; }

/* 3. Committed to Quality ------------------------------------------------
   Two stacked gold arrow plates over a full-height lab photo. The plate
   geometry is the .fig's rotated hexagon: body to 77.36% of its own width,
   point at 93.9%, apex at 50% height. */
.committed { position: relative; height: 574px; overflow: hidden; background: var(--surface); }
.committed__media {
  display: block;
  position: absolute; right: -1.1%; top: 0; width: 75%; height: 100%;
  background: url(./figma/assets/why-lab-woman.png) center / cover no-repeat;
  transform: scaleX(-1);
}
.committed__plate {
  position: absolute; top: 0; width: 70.83%; height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(238,179,13,.5) 100%);
  clip-path: polygon(0 0, 77.36% 0, 93.9% 50%, 77.36% 100%, 0 100%);
}
.committed__plate--back { left: -16.67%; }
.committed__plate--front { left: -9.31%; }
.committed > .container { position: relative; height: 100%; }
.committed__content { position: absolute; top: 163px; max-width: 573px; color: #FFFFFF; }
.committed__title { font-size: 46px; font-weight: 700; line-height: 46px; }
.committed__copy { margin-top: 35px; max-width: 563px; line-height: 24px; text-wrap: pretty; }
.committed .btn--outline-light { margin-top: 24px; height: 51px; padding: 0 25px; }

/* 4. Jalon's Advantage ---------------------------------------------------
   Intro row, hairline, then the five-plate honeycomb. */
.advantage { position: relative; padding: 68px 0 var(--sp-96); }
.advantage__head { display: grid; grid-template-columns: 570px minmax(0, 1fr); gap: 80px; align-items: start; }
.advantage__title { margin-top: 25px; font-size: 46px; font-weight: 700; line-height: 1; }
.advantage__head .btn { margin-top: 23px; height: 53px; }
.advantage__intro { color: var(--ink-soft); line-height: 26px; text-wrap: pretty; }
.advantage__intro p + p { margin-top: var(--sp-24); }
.advantage__rule { height: 1px; margin-top: 70px; background: #D9D9D9; }

/* Honeycomb: 470 × 470 plates, 437 column pitch, 379 row pitch, second row
   indented half a column. The block is 1344px — wider than the 1280 content
   column, exactly as in the .fig — so it is centred on its own. */
/* 64px wider than the content column and centred on it, as the .fig has it.
   Fluid so it never needs a transform: the slot map below is in percent. */
.advantage__grid {
  position: relative;
  width: calc(100% + 64px); max-width: 1344px; margin: 44px 0 0 -32px;
  height: auto; aspect-ratio: 1344 / 849;
  container-type: inline-size; /* gives the plates a unit tied to the grid */
}
.advantage-card {
  position: absolute; width: 34.970%; height: 55.359%;
  /* justify-items must stay stretch: centring the items sizes each one to
     min-content, which collapses the copy into a narrow column and spills it
     out of the plate. Content is centred vertically so it sits across the
     hexagon's widest band. */
  display: grid; align-content: center; justify-items: stretch;
  /* Percentage padding resolves against the CONTAINING BLOCK, not the element,
     so 17.5% here would be 17.5% of the 1344px grid (235px a side) and crush
     the text column. cqi is 17.5% of the plate's own 34.970% of the grid. */
  padding: 4.196cqi 6.120cqi; text-align: center;
  background: var(--gold);
  /* Polygon 39's own outline — the .fig's 20px-radius hexagon, normalised
     over its FULL 469 × 470 artboard (not the tight outline box) so the shape
     stays 406px wide inside the 470px plate. Normalising to the tight box
     stretched it to 470 and made neighbours at 437 pitch cross each other. */
  clip-path: url(#jalon-plate-hex);
}
/* Clipped shapes cannot carry a border, so the gold hairline is the plate
   itself with a cream layer inset by 1px. */
.advantage-card::before {
  content: ""; position: absolute; inset: 1px; background: #FEF8E7;
  clip-path: url(#jalon-plate-hex);
}
.advantage-card > * { position: relative; }
/* Desktop-only slot map. It must stay inside a min-width query: an
   unscoped :nth-child rule outranks the small-screen `left/top: auto`
   reset on specificity and the offsets survive as relative shifts. */
/* Exact complement of the ≤1024 block — (min-width: 1025px) would leave
   fractional widths between 1024 and 1025 matching neither query, and the
   base rules alone stack all five plates at the grid origin. */
@media not all and (max-width: 1024px) {
  .advantage-card:nth-child(1) { left: 0; top: 0; }
  .advantage-card:nth-child(2) { left: 32.515%; top: 0; }
  .advantage-card:nth-child(3) { left: 65.030%; top: 0; }
  .advantage-card:nth-child(4) { left: 16.220%; top: 44.641%; }
  .advantage-card:nth-child(5) { left: 48.735%; top: 44.641%; }
}
.advantage-card__icon { width: 14.5%; height: auto; aspect-ratio: 1; margin: 0 auto; }
.advantage-card__title {
  margin-top: 7%; font-family: "Noto Sans Thai", "DM Sans", sans-serif;
  font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; line-height: 1.25;
}
.advantage-card__rule { width: 12%; height: 3px; margin: 3% auto 0; background: var(--gold); }
.advantage-card__copy {
  margin-top: 4.5%; font-size: clamp(12px, 1.2vw, 16px); line-height: 1.5;
  color: var(--ink-soft); text-wrap: pretty;
}

/* 5. Responsive ---------------------------------------------------------- */
@media (max-width: 1279px) {
  .why-intro__grid { grid-template-columns: 560px minmax(0, 1fr); }
  .why-intro__media { left: 600px; width: 780px; height: 560px; }
  .certifications { width: 560px; height: 149px; }
  .advantage__head { grid-template-columns: 1fr 1fr; gap: 48px; }
}

@media (max-width: 1024px) {
  .why-intro { padding-top: 96px; }
  .why-intro__grid { grid-template-columns: minmax(0, 1fr); }
  .why-intro__media {
    position: relative; left: auto; width: 100%; margin-top: 40px;
    height: auto; aspect-ratio: 927 / 631; /* the cut-out's own ratio — cover would crop it */
    background-size: contain;
  }
  .certifications { width: 100%; max-width: 560px; }

  /* The hexagon composition moves below the list rather than shrinking into
     illegibility; it keeps its exact interlock. */
  .equipment { height: auto; padding: 88px 0 var(--sp-64); }
  .equipment__title, .equipment .btn--outline, .equipment__list { position: static; width: auto; }
  .equipment__title { max-width: 499px; }
  .equipment .btn--outline { display: inline-flex; margin-top: 32px; }
  .equipment__list { margin-top: 40px; }
  /* Fluid, not transform-scaled: a transform leaves the 848px layout box
     behind and overflows the viewport. Percentages keep the exact interlock. */
  .equipment__hexes {
    position: relative; left: auto; top: auto;
    width: 100%; max-width: 848px; height: auto; aspect-ratio: 848 / 621;
    margin: 48px auto 0;
  }


  /* The angled plates need the full-bleed width to read, so below 1024 the
     gold moves onto the section itself and the photo sits above the copy. */
  .committed { height: auto; background: var(--gold-grad); }
  .committed__media { position: relative; right: auto; width: 100%; height: 320px; transform: none; }
  .committed__plate { display: none; }
  .committed__content { position: static; padding: var(--sp-48) 0; max-width: none; color: #FFFFFF; }

  .advantage__head { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
  .advantage__rule { margin-top: 40px; }
  /* Two-up honeycomb: plates keep their shape and their overlap */
  .advantage__grid {
    width: 100%; max-width: none; aspect-ratio: auto; height: auto; margin: 44px 0 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center; column-gap: var(--sp-16); row-gap: 0;
  }
  /* The pointy-top plate only interlocks with a half-column row offset, which
     a plain two-up grid has no room for. The plate rotates to the flat-top
     hexagon instead: rows meet along their flat edges, so the tip-to-tip void
     between rows is gone. The notches move to the left and right edges, where
     they read as silhouette rather than as a hole. */
  .advantage-card,
  .advantage-card::before {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  }
  .advantage-card {
    position: relative; left: auto; top: auto;
    width: min(470px, 46vw); height: auto; aspect-ratio: 1 / 0.94;
    margin-top: 0;
    padding: 9% 22%; /* relative item: the cell IS the containing block */
  }
  .advantage-card__title { font-size: clamp(14px, 1.9vw, 20px); }
  .advantage-card__copy { font-size: clamp(11px, 1.5vw, 16px); }
}

@media (max-width: 768px) {
  .why-intro__title { font-size: 34px; }
  .why-intro__lead { font-size: 20px; line-height: 28px; }

  /* 2×2 rather than 1 + 3: four badges of one size read better than a lone
     ISO above a squeezed row. */
  .certifications {
    height: auto; padding: var(--sp-24);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16);
    place-items: center; clip-path: none; border-radius: var(--radius-card);
  }
  /* Uniform cell, badge fitted inside — the three cut badges have slightly
     different aspect ratios, so contain keeps them optically equal. */
  .certifications__badge {
    position: static; width: 100%; max-width: 116px;
    height: 116px; aspect-ratio: auto; object-fit: contain;
  }
  .equipment__title, .committed__title { font-size: 30px; line-height: 1.15; }
  .equipment__list span { font-size: var(--fs-small); }
}

@media (max-width: 560px) {
  /* The eyebrow is a single label — it steps down rather than wrapping */
  .why-eyebrow {
    height: 34px; padding: 0 16px; white-space: nowrap;
    font-size: clamp(9.5px, 3vw, 16px);
  }

  /* One plate per row below 560 — two-up would put the body text under 11px */
  .advantage__grid { grid-template-columns: minmax(0, 1fr); }
  /* Flat-top plate inherited from the ≤1024 block — one per row, wider. */
  .advantage-card { width: min(470px, 84vw); }
  .advantage-card__title { font-size: clamp(15px, 4.4vw, 20px); }
  .advantage-card__copy { font-size: clamp(12px, 3.4vw, 16px); }
}