/* ==========================================================================
   JALON THAILAND — APPLICATIONS
   Shared by the applications archive and the application detail template.
   Load after jalon-shell.css.

   1. Split page banner        3. Application detail layout
   2. Honeycomb + hex card     4. Responsive
   ========================================================================== */

/* 1. (The page banner now lives in jalon-shell.css — one masthead for
   every inner page.) */

/* 2. Honeycomb + hexagon card -------------------------------------------
   Every internal measurement derives from --u (= card width / 312), so the
   card is pixel-exact at the .fig's 312px and scales as one piece below it.
   Card silhouette: 312 × 594 elongated hexagon, 97px points top and bottom.
   Row pitch 320.5 × 514, odd rows indented half a column. */
.honeycomb {
  --card-w: 312px;
  --u: calc(var(--card-w) / 312);
  --pitch-x: calc(var(--u) * 320.5);
  --pitch-y: calc(var(--u) * 514);
  position: relative;
  width: calc(3 * var(--pitch-x) + var(--card-w));
  height: calc(2 * var(--pitch-y) + var(--u) * 594);
  margin: 0 auto;
}
.application-hex {
  position: absolute;
  left: calc((var(--col) + var(--indent, 0)) * var(--pitch-x));
  top: calc(var(--row) * var(--pitch-y));
  width: var(--card-w); height: calc(var(--u) * 594);
  color: #FFFFFF;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 16.3%, 100% 84%, 50% 100%, 0 84%, 0 16.3%);
  transition: transform 320ms var(--ease), filter 320ms ease;
}
.application-hex:hover { transform: translateY(-6px); filter: brightness(1.04); }
.application-hex:hover, .application-hex:focus-visible { color: #FFFFFF; }
/* Gradient body: the .fig's 312 × 437 capsule, flipped, so the deep tone
   sits under the photo and lightens toward the button. */
.application-hex__body {
  position: absolute; left: 0; top: calc(var(--u) * 41);
  width: var(--card-w); height: calc(var(--u) * 437);
  border-radius: calc(var(--card-w) / 2);
  background: linear-gradient(180deg, var(--gold-deep) 0%, var(--gold) 100%);
}
/* Photo hexagon, inset inside the card's own hexagon so a gold rim shows */
.application-hex__media {
  position: absolute; top: 0; left: 0;
  width: var(--card-w); height: calc(var(--u) * 358);
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 27.2%, 100% 72.8%, 50% 100%, 0 72.8%, 0 27.2%);
}
.application-hex__photo {
  position: absolute; top: calc(var(--u) * 15); left: calc(var(--u) * 13.57);
  width: calc(var(--u) * 284.639); height: calc(var(--u) * 327);
  background-position: center; background-size: cover; background-repeat: no-repeat;
  clip-path: url(#jalon-hex-rounded);
  transition: transform 500ms var(--ease);
}
.application-hex:hover .application-hex__photo { transform: scale(1.04); }
/* Bounded text band: 364 → 492 (the CTA's top edge). Anchoring only the
   top let a three-line title grow into the button, so the band is closed at
   both ends and clips as a hard guard. */
.application-hex__content {
  position: absolute; left: 0; right: 0;
  top: calc(var(--u) * 364); bottom: calc(var(--u) * 102);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 0 calc(var(--u) * 19); text-align: center; overflow: hidden;
}
.application-hex__label {
  display: grid; place-items: center;
  height: calc(var(--u) * 23); padding: 0 calc(var(--u) * 15);
  border-radius: var(--radius-pill); background: rgba(0,0,0,.15);
  box-shadow: 0 0 10px 0 var(--gold);
  font-size: calc(var(--u) * 14); line-height: 1; color: #FFFFFF;
}
.application-hex__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: calc(var(--u) * 12);
  font-size: calc(var(--u) * 24); font-weight: 900;
  line-height: calc(var(--u) * 25); letter-spacing: -.01em;
  text-wrap: balance;
}
/* Long names (flagged from the data) need three lines. The band can afford
   either a third title line or the excerpt, not both — and since the excerpt
   is the same sentence on every card, the title wins: 23 + 10 + 63 = 96 of
   the 128px band, so the whole name reads and nothing is clipped. */
.application-hex__title--long {
  -webkit-line-clamp: 3;
  margin-top: calc(var(--u) * 10);
  font-size: calc(var(--u) * 18); line-height: calc(var(--u) * 21);
}
.application-hex__title--long ~ .application-hex__excerpt { display: none; }
.application-hex__excerpt {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  margin-top: calc(var(--u) * 9);
  font-size: calc(var(--u) * 16); line-height: calc(var(--u) * 24);
  text-wrap: pretty;
}
.application-hex__cta {
  position: absolute; left: 50%; bottom: calc(var(--u) * 59); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--u) * 10);
  height: calc(var(--u) * 43); padding: 0 calc(var(--u) * 15);
  border-radius: var(--radius-pill); background: #FFFFFF;
  font-size: calc(var(--u) * 16); font-weight: 700; line-height: 1;
  text-transform: uppercase; color: var(--grey-panel);
  white-space: nowrap;
}
.application-hex__cta-chevron {
  display: grid; place-items: center;
  width: calc(var(--u) * 24); height: calc(var(--u) * 24);
  border-radius: 50%; background: var(--gold); color: #FFFFFF;
  transition: transform 220ms var(--ease);
}
.application-hex__cta-chevron svg { width: calc(var(--u) * 4); height: calc(var(--u) * 9); }
.application-hex:hover .application-hex__cta-chevron { transform: translateX(3px); }
.application-hex:hover .application-hex__cta { color: var(--ink); }

/* Honeycomb slot map — the .fig's 3 / 4 / 3 pattern. Position is geometry,
   not content, so it lives here rather than in the data: odd rows are
   indented half a column, which is what makes the rows interlock.
   Change the pattern here if the row counts ever change. */
.application-hex:nth-child(1) { --col: 0; --row: 0; --indent: .5; }
.application-hex:nth-child(2) { --col: 1; --row: 0; --indent: .5; }
.application-hex:nth-child(3) { --col: 2; --row: 0; --indent: .5; }
.application-hex:nth-child(4) { --col: 0; --row: 1; }
.application-hex:nth-child(5) { --col: 1; --row: 1; }
.application-hex:nth-child(6) { --col: 2; --row: 1; }
.application-hex:nth-child(7) { --col: 3; --row: 1; }
.application-hex:nth-child(8) { --col: 0; --row: 2; --indent: .5; }
.application-hex:nth-child(9) { --col: 1; --row: 2; --indent: .5; }
.application-hex:nth-child(10) { --col: 2; --row: 2; --indent: .5; }

/* Section shell for the honeycomb */
.applications-archive { position: relative; padding: 124px 0 var(--sp-96); overflow: hidden; }
.applications-archive__decor {
  position: absolute; left: 0; bottom: 0; width: 755px; height: 575px;
  background: url(./figma/assets/app-molecule-decor.png) left bottom / contain no-repeat;
  pointer-events: none;
}
.applications-archive .container { position: relative; z-index: 1; }

/* 3. Application detail --------------------------------------------------
   .fig columns: 309 sidebar + 22 gutter + 949 content = the 1280 container. */
.application-detail { position: relative; padding: 132px 0 var(--sp-96); }
.application-detail::before {
  content: ""; position: absolute; left: 0; right: 0; top: -540px; height: 1081px;
  opacity: .3; pointer-events: none; z-index: -1; /* behind the banner, as in the .fig */
  background: url(./figma/assets/app-detail-bg.jpg) 50% 100% / 112.6% 100% no-repeat;
}
.application-detail__grid {
  position: relative;
  display: grid; grid-template-columns: 309px minmax(0, 1fr); gap: 22px;
  align-items: start;
}
.application-body {
  padding: 53px 54px 60px;
  border-radius: var(--radius-card); background: var(--surface);
}
.application-body__media {
  display: block; height: 562px; border-radius: 2px;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.application-body__title { margin-top: 44px; font-size: 36px; font-weight: 700; line-height: 1.1; }
.application-body__intro { margin-top: var(--sp-24); color: var(--ink-soft); line-height: 26px; text-wrap: pretty; }
.application-body__solution-head {
  display: flex; align-items: center; gap: 14px; margin-top: var(--sp-48);
}
.application-body__solution-head img { width: 26px; height: 34px; }
.application-body__solution-head h3 { font-size: 30px; font-weight: 700; white-space: nowrap; }
.application-body__rule { flex: 1; height: 1px; background: var(--gold); }
.application-body__solution {
  display: grid; grid-template-columns: minmax(0, 1fr) 307px; gap: var(--sp-32); margin-top: var(--sp-32);
}
.application-body__lead { font-size: 20px; line-height: 30px; }
.application-body__copy { margin-top: var(--sp-24); color: var(--ink-soft); line-height: 26px; text-wrap: pretty; }
.application-body__copy p + p { margin-top: var(--sp-16); }

/* Statistic plate: the .fig's 307 × 307 outlined hexagon */
/* Gold hairline + cream fill: the plate is clipped, so the outline is a
   1.5px gold layer behind an inset cream layer rather than a border. */
.application-stat {
  position: relative; align-self: center;
  display: grid; place-content: center; gap: 10px;
  width: 307px; height: 307px; padding: 0 40px; text-align: center;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.application-stat::before {
  content: ""; position: absolute; inset: 1.5px; background: #FEF8E7;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.application-stat > * { position: relative; }
.application-stat__mark { justify-self: center; width: 28px; height: 28px; }
.application-stat__caption { font-size: var(--fs-body); line-height: 24px; color: var(--ink); }
.application-stat__figure {
  font-size: 65px; font-weight: 700; line-height: 1;
  letter-spacing: -.05em; color: var(--gold);
}

/* 4. Responsive ---------------------------------------------------------- */
@media (max-width: 1279px) {
  /* Shrink the honeycomb as one piece — the geometry is untouched */
  .honeycomb { --card-w: 250px; }
  .application-detail__grid { grid-template-columns: 280px minmax(0, 1fr); }
  .application-body { padding: 36px 36px 44px; }
  .application-body__media { height: 440px; }
  .application-body__solution { grid-template-columns: minmax(0, 1fr) 260px; }
  .application-stat { width: 260px; height: 260px; padding: 0 30px; }
  .application-stat__figure { font-size: 52px; }
}

@media (max-width: 1024px) {
  .applications-archive { padding-top: 88px; }
  .applications-archive__decor { width: 420px; height: 320px; }

  /* Tablet: two columns. The card keeps its hexagon and its internal
     proportions; only --card-w changes. Rows nest slightly so the points
     still read as a honeycomb. */
  .honeycomb {
    width: 100%; height: auto;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center; column-gap: var(--sp-16); row-gap: 0;
    --card-w: min(312px, 46vw);
  }
  /* relative (not static) so the card stays the containing block for its
     absolute internals; left/top must be cleared or they'd shift it. */
  .application-hex { position: relative; left: auto; top: auto; margin-top: calc(var(--u) * -40); }

  .application-detail { padding-top: 104px; }
  .application-detail::before { top: -420px; }
  .application-detail__grid { grid-template-columns: 1fr; }
  .sidebar-contact { max-width: 460px; }
  .application-body__solution { grid-template-columns: 1fr; }
  .application-stat { justify-self: center; }
}

/* Only the two-column band has a two-card first row to un-nest. The lower
   bound is the exact complement of the ≤560 block, not 561px. */
@media not all and (max-width: 560px) {
  @media (max-width: 1024px) {
    .application-hex:nth-child(-n+2) { margin-top: 0; }
  }
}

@media (max-width: 768px) {
  .applications-archive { padding-top: 64px; }
  .applications-archive__decor { display: none; }

  /* Two columns hold to 560px — cards ~250px keep the title near 19px.
     The card is sized explicitly, so the clamp must match the track it sits
     in: (100vw - 48px container padding - 16px column gap) / 2. */
  .honeycomb { --card-w: min(312px, calc(50vw - 40px)); }

  .application-body { padding: var(--sp-24) var(--sp-24) var(--sp-32); }
  .application-body__media { height: 260px; }
  .application-body__title { margin-top: var(--sp-24); font-size: 28px; }
  .application-body__solution-head h3 { font-size: 24px; white-space: normal; }
  .application-body__lead { font-size: 18px; line-height: 27px; }
  .application-stat { width: 240px; height: 240px; padding: 0 26px; }
  .application-stat__figure { font-size: 46px; }
  .application-stat__caption { font-size: var(--fs-small); line-height: 20px; }
}

/* Phones keep two columns down to 380px. At that width the card is ~150px,
   so the text band can carry the label and title but not the excerpt —
   it is dropped rather than shrunk into illegibility. */
@media (max-width: 560px) {
  .honeycomb { --card-w: min(312px, calc(50vw - 32px)); column-gap: 10px; }
  /* No nesting at this size: the floored button fills the bottom taper, so an
     overlap would put the next row's apex through it. Rows sit clear instead. */
  .application-hex { margin-top: 0; }
  .honeycomb { row-gap: 14px; }
  .application-hex__excerpt { display: none; }
  /* Type floors: below ~480px the proportional sizes fall under 10px, so the
     label, title and button stop scaling and hold a legible minimum. */
  .application-hex__label { font-size: max(9px, calc(var(--u) * 14)); height: max(16px, calc(var(--u) * 23)); }
  .application-hex__title { -webkit-line-clamp: 3; font-size: max(13px, calc(var(--u) * 24)); line-height: 1.15; margin-top: 6px; }
  .application-hex__title--long { -webkit-line-clamp: 3; font-size: max(11px, calc(var(--u) * 19)); line-height: 1.1; }
  /* The floored button is taller than its proportional height, so the text
     band's lower edge is floored to match and the two cannot collide. */
  .application-hex__content { bottom: max(50px, calc(var(--u) * 102)); }
  .application-hex__cta {
    font-size: max(10px, calc(var(--u) * 16)); gap: 6px;
    height: max(24px, calc(var(--u) * 43)); bottom: max(20px, calc(var(--u) * 59));
    padding: 0 max(9px, calc(var(--u) * 15));
  }
  .application-hex__cta-chevron { width: max(16px, calc(var(--u) * 24)); height: max(16px, calc(var(--u) * 24)); }
  .application-hex__cta-chevron svg { width: 3px; height: 7px; }
}

/* Under 380px two hexagons no longer fit the gutters — one per row. */
@media (max-width: 379px) {
  .honeycomb { grid-template-columns: minmax(0, 1fr); --card-w: min(312px, 84vw); column-gap: 0; }
  .application-hex { margin-top: calc(var(--u) * -30); }
  .application-hex:first-child { margin-top: 0; }
  .application-hex:nth-child(2) { margin-top: calc(var(--u) * -30); }
  .application-hex__excerpt { display: block; }
}