/* ==========================================================================
   JALON THAILAND — HOMEPAGE SECTIONS
   Page-specific only. Tokens, base, header/nav, contact band, enquiry strip,
   footer, floating rail and all breakpoints live in jalon-shell.css, which
   every page loads first.

   WordPress: these map 1:1 onto the homepage's Elementor sections, so this
   file can be enqueued on the front page alone.

   4. Hero + product      8. Company
   5. Credentials         9. Manufacturing
   6. Solutions band     10. Trust / Why Jalon
   7. Applications       11. Knowledge hub
   ========================================================================== */

/* The homepage is the one frame the .fig sets to #EEEEEE — the white cards
   and hexagons read against it. Every other page is white. */
body { background: #EEEEEE; }
/* Two sections sit on white rather than the page's grey field */
.trust, .knowledge { background: var(--surface); }

/* 4. Hero + product card ------------------------------------------------ */
.hero { position: relative; }
.hero__media {
  width: 100%; height: 737px;
  background: url(./figma/assets/fcc387d109978cc5.png) center / cover no-repeat;
  animation: hero-settle 2000ms var(--ease-out-quint) both;
}
/* Slow push-out on load — the only motion above the fold on the front page. */
@keyframes hero-settle { from { scale: 1.06; opacity: .6; } }
/* The spheres drift, very slightly, so the molecule section isn't static. */
.company__sphere { animation: sphere-drift 18s ease-in-out infinite alternate; }
.company__sphere--bl { animation-duration: 23s; animation-direction: alternate-reverse; }
@keyframes sphere-drift { to { translate: 0 -26px; rotate: 6deg; } }
@media (prefers-reduced-motion: reduce) {
  .hero__media, .company__sphere { animation: none !important; }
}
.product-band { position: relative; background: url(./figma/assets/c07bd18f44ba5f84.jpg) center top / cover no-repeat; padding: var(--sp-64) 0 var(--sp-96); }
.product-band__grid {
  display: grid; grid-template-columns: 632px 1fr; gap: var(--sp-16);
  align-items: start;
}
.product-card {
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-card) var(--radius-lg) var(--radius-card);
  padding: 56px; box-shadow: var(--shadow-card);
}
.product-card__head { display: flex; align-items: baseline; gap: var(--sp-24); }
.product-card__index { font-size: 56px; font-weight: 900; color: var(--gold); line-height: 1; }
.product-card__title { font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.product-card__copy { margin: var(--sp-24) 0 var(--sp-32); font-weight: 700; }
.product-card__apps { display: grid; grid-template-columns: 1fr 200px; gap: var(--sp-32); align-items: center; margin-top: var(--sp-48); }
.product-card__apps-title { font-size: 20px; font-weight: 700; margin-bottom: var(--sp-16); }
.product-card__hex { width: 200px; aspect-ratio: 1; clip-path: var(--hex); background: url(./figma/assets/d31970d3dad3f064.png) center / 170% no-repeat; }
.product-band__photo {
  border-radius: var(--radius-card) var(--radius-lg) var(--radius-card) var(--radius-lg);
  overflow: hidden; height: 650px; box-shadow: var(--shadow-card);
  background: url(./figma/assets/c95ac7c059b96bcb.png) center / cover no-repeat;
}

/* 5. Credentials -------------------------------------------------------- */
.credentials { background: var(--page); }
.credentials__grid { display: grid; grid-template-columns: 1fr 620px; gap: var(--sp-64); align-items: start; }
.credentials__copy { color: var(--body); margin: var(--sp-24) 0 var(--sp-32); }
.certified {
  display: flex; align-items: stretch; gap: var(--sp-32);
  margin-top: var(--sp-48); background: var(--surface);
  border-radius: var(--radius-card); overflow: hidden; min-height: 168px;
}
/* Grey panel is flush to the card's left edge with a domed right side */
.certified__label {
  flex: 0 1 200px; min-width: 150px; display: flex; align-items: center;
  padding: var(--sp-24);
  border-radius: var(--radius-card) 180px 180px var(--radius-card);
  background: var(--grey-panel);
  color: #FFFFFF; font-size: 30px; font-weight: 700; text-transform: uppercase; line-height: 1.15;
}
.certified__marks {
  display: flex; align-items: center; justify-content: space-around;
  gap: var(--sp-16); flex-wrap: nowrap; min-width: 0; flex: 1 1 auto;
  padding: var(--sp-24) var(--sp-24) var(--sp-24) 0;
}
.certified__marks img { height: 80px; width: auto; flex: 0 1 auto; min-width: 0; object-fit: contain; }
.credentials__media { display: grid; grid-template-columns: 301px 1fr; grid-template-rows: auto auto; gap: var(--sp-16); }
.credentials__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); }
.credentials__media figure:nth-child(2) { grid-row: span 2; }
.experience {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-32); border-radius: var(--radius-card);
  background: var(--gold-grad); color: #FFFFFF; min-height: 177px;
}
.experience__figure { font-size: 56px; font-weight: 900; line-height: 1; }
.experience__label { font-size: var(--fs-body); font-weight: 900; text-transform: uppercase; line-height: 1.2; margin-top: 6px; }
.experience__rule { width: 44px; height: 6px; background: #FFFFFF; margin-top: var(--sp-16); }

/* 6. Solutions band ----------------------------------------------------- */
.solutions {
  position: relative; padding: var(--sp-96) 0;
  background: url(./figma/assets/10fd99c267f06e4a.jpg) center / cover no-repeat;
}
.solutions__title { color: #FFFFFF; font-size: var(--fs-display); font-weight: 900; text-align: center; line-height: 1.05; }
.solutions__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-16); margin-top: 420px; }
.solution-chip {
  display: inline-flex; align-items: center; gap: var(--sp-16);
  padding: 12px 12px 12px 24px; border-radius: var(--radius-pill);
  background: #FFFFFF; color: var(--ink); font-weight: 700; text-transform: uppercase; font-size: var(--fs-small);
  box-shadow: var(--shadow-card); transition: transform 180ms var(--ease);
}
.solution-chip:hover { transform: translateY(-2px); color: var(--ink); }
.solution-chip__chevron {
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--gold); color: #FFFFFF;
  transition: transform 220ms var(--ease);
}
.solution-chip:hover .solution-chip__chevron { transform: translateX(3px); }
.solution-chip__chevron svg { width: 6px; height: 9px; }

/* 7. Applications ------------------------------------------------------- */
.applications { background: var(--page); }
.applications__head { display: grid; justify-items: center; gap: var(--sp-24); text-align: center; margin-bottom: var(--sp-64); }
.application-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-32); }
/* The hexagon breaks out above the card, as in the .fig — so the card must
   not clip, and the grid needs headroom for the overhang. */
.application-grid { padding-top: 96px; }
.application-card {
  position: relative; background: linear-gradient(180deg, #EEB30D 0%, #DB8842 100%); color: #FFFFFF;
  border-radius: 300px 300px 0 0; padding: 0 var(--sp-32) var(--sp-48);
  text-align: center; overflow: visible;
}
.application-card__plate {
  /* Full card width — escapes the card's 32px side padding */
  width: calc(100% + (var(--sp-32) * 2)); aspect-ratio: 1; clip-path: var(--hex);
  background: var(--gold); padding: 9.1%;
  margin: -96px calc(var(--sp-32) * -1) var(--sp-24);
}
.application-card__media { width: 100%; height: 100%; clip-path: var(--hex); transition: transform 500ms var(--ease); }
.application-card:hover .application-card__media { transform: scale(1.05); }
.application-card { transition: transform 260ms var(--ease); }
.application-card:hover { transform: translateY(-6px); }
.feature__card { transition: transform 260ms var(--ease), box-shadow 260ms ease; }
.feature:hover .feature__card { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.12); }
.feature__icon { transition: transform 320ms var(--ease); }
.feature:hover .feature__icon { transform: translateY(-50%) rotate(-6deg); }
.application-card__tag {
  display: inline-block; padding: 4px 14px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.15); font-size: var(--fs-small);
}
.application-card__title { font-size: var(--fs-h3); font-weight: 900; margin: var(--sp-16) 0; }
.application-card__copy { margin-bottom: var(--sp-24); }

/* 8. Company ------------------------------------------------------------ */
/* Molecule field + the two gold spheres that bracket the section (.fig) */
/* overflow visible + a stacking context above the next section, so the
   bottom-left sphere spills over it instead of being clipped. */
.company {
  position: relative; overflow-x: clip; overflow-y: visible; z-index: 2;
  background: url(./figma/assets/bg-molecules.jpg) center / cover no-repeat, #F4F8FC;
}
.company__sphere {
  position: absolute; background: url(./figma/assets/e6ef11e6494cebba.png) center / contain no-repeat;
  pointer-events: none; z-index: 3;
}
.company__sphere--tr { width: 440px; height: 440px; top: -140px; right: -130px; }
.company__sphere--bl { width: 660px; height: 660px; bottom: -250px; left: -220px; }
.company .container { position: relative; z-index: 1; }
.company__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); align-items: center; }
.company__collage { position: relative; min-height: 640px; }
.company__hex-lg { width: min(446px, 100%); aspect-ratio: 1; clip-path: var(--hex); background: url(./figma/assets/6a77bb53056221e7.png) center / cover no-repeat; }
.company__hex-sm { width: min(276px, 62%); aspect-ratio: 1; clip-path: var(--hex); background: url(./figma/assets/2c36fd32aaf4114b.png) center / cover no-repeat; margin: -40px 0 0 auto; }
.company__logo { width: min(357px, 100%); margin-bottom: var(--sp-32); }
.company__lead { font-size: var(--fs-lead); line-height: 36px; margin-bottom: var(--sp-24); }
.company__body { color: var(--body); }
.company__body p + p { margin-top: var(--sp-24); }
.company .btn { margin-top: var(--sp-32); }

/* 9. Manufacturing ------------------------------------------------------ */
.manufacturing { background: var(--page); }
.manufacturing__grid { display: grid; grid-template-columns: 627px 1fr; gap: var(--sp-64); align-items: stretch; }
/* Bead ring is the backdrop; the scientist stands in front, bottom-aligned
   so the column ends level with the stat list opposite. */
.manufacturing__media {
  position: relative; align-self: stretch; display: flex; align-items: flex-end;
  justify-content: center; min-height: 560px;
  /* stands on the section's bottom edge, through its padding */
  /* Cancels the section's own bottom padding exactly, at every breakpoint,
     so the figure's feet land on the section edge. A fixed -64px left a 32px
     gap once --sp-96 grew to 96px on desktop. */
  margin-bottom: calc(-1 * var(--sp-96));
}
.manufacturing__media::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px; aspect-ratio: 1;
  background: url(./figma/assets/bead-ring.png) center / contain no-repeat;
}
.manufacturing__media img {
  position: relative; width: auto; max-width: 78%; height: auto; max-height: 100%;
  object-fit: contain; display: block;
}
.manufacturing__copy { color: var(--body); margin: var(--sp-24) 0 var(--sp-48); }
.stat-list { display: grid; gap: var(--sp-32); }
.stat { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-32); align-items: center; }
.stat__icon {
  width: 140px; aspect-ratio: 1; clip-path: var(--hex);
  background: linear-gradient(90deg, #656768 0%, #1E1E1E 100%);
  display: grid; place-items: center;
}
.stat__icon img { width: 60px; height: 60px; }
.stat__label { font-size: var(--fs-body); font-weight: 700; text-transform: uppercase; color: var(--ink-soft); }
.stat__rule { width: 44px; height: 6px; background: var(--gold); margin: var(--sp-8) 0 var(--sp-8); }
.stat__figure { font-size: 56px; font-weight: 900; line-height: 1; color: var(--ink-soft); }
.stat__unit { font-size: var(--fs-body); font-weight: 400; color: var(--ink-soft); margin-left: var(--sp-8); }

/* 10. Trust / Why Jalon -------------------------------------------------- */
.trust { background: var(--surface); }
.trust__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-64); align-items: start; margin-bottom: var(--sp-64); }
.trust__head p { color: var(--body); }
.trust__title em { font-style: normal; color: var(--gold); }
/* Five per row, each logo in its own hairline card — the same treatment as
   the partner wall on Our Story. flex, not grid, inside the card: a grid
   card's auto row is sized BY the logo, so a percentage cap never clamps. */
.logo-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-24); align-items: center; }
.logo-wall li {
  display: flex; align-items: center; justify-content: center;
  height: 138px; padding: 18px; overflow: hidden;
  border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline);
}
.logo-wall img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; transition: transform 220ms var(--ease);
}
.logo-wall li:hover img { transform: scale(1.08); }

/* Two large gold hexagons bleed off each edge behind the features
   (.fig: Polygon 44/45, 689×697, rotated 90° → flat-top 697×689) */
.why { background: var(--page); position: relative; }
.why__decor { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.why__decor::before, .why__decor::after {
  content: ""; position: absolute; width: 697px; height: 689px;
  background: var(--gold);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.why__decor::before { left: -419px; top: 126px; }
.why__decor::after { right: -406px; top: 26px; }
.why .container { position: relative; z-index: 1; }
.feature__icon, .feature__title, .feature__copy { position: relative; }
.why__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-48) var(--sp-32);
  align-items: start; /* cards size to content — stretching merges the staggered rows */
}
/* Each feature is an elongated white hexagon with the icon overhanging its
   right point, and the two columns stagger against each other. */
.feature { position: relative; padding-right: 90px; display: flex; }
.feature:nth-child(even) { margin-top: -72px; }
.feature:nth-child(odd) { margin-top: 72px; }
.feature:first-child { margin-top: 0; }
.feature__card {
  background: var(--surface); min-height: 180px; flex: 1;
  padding: var(--sp-32) 30% var(--sp-32) 12.5%;
  display: flex; flex-direction: column; justify-content: center;
  clip-path: polygon(12.5% 0, 87.5% 0, 100% 50%, 87.5% 100%, 12.5% 100%, 0 50%);
}
.feature__icon {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 179px; aspect-ratio: 1;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: var(--grey-panel); display: grid; place-items: center;
}
.feature__icon img { width: 68px; height: 68px; }
.feature__title { font-size: 20px; font-weight: 700; margin-bottom: var(--sp-8); }
.feature__copy { color: var(--ink); }

/* 11. Knowledge hub ------------------------------------------------------ */
.knowledge { background: var(--surface); }
.knowledge__grid { display: grid; grid-template-columns: 400px 1fr; gap: var(--sp-64); align-items: start; }
.knowledge__title { display: flex; align-items: center; gap: var(--sp-16); }
.knowledge__badge { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.knowledge__badge img { width: 30px; height: 30px; }
.knowledge__copy { color: var(--body); margin: var(--sp-24) 0 var(--sp-32); }
/* ==========================================================================
   Responsive — homepage sections. These MUST live here, not in
   jalon-shell.css: media queries add no specificity, and jalon-home.css
   loads after the shell, so a base rule here would beat a shell override.
   ========================================================================== */

@media (max-width: 1280px) {
  .product-band__grid { grid-template-columns: 1fr 1fr; }
  .credentials__grid, .company__grid, .manufacturing__grid { grid-template-columns: 1fr 1fr; }
  .manufacturing__grid { grid-template-columns: 1fr 1fr; }
  .knowledge__grid { grid-template-columns: 320px 1fr; }
  .feature { padding-right: 64px; }
  .feature__icon { width: 128px; }
  .feature__icon img { width: 52px; height: 52px; }
}

@media (max-width: 1024px) {
  .hero__media { height: 420px; }
  .product-band__grid { grid-template-columns: 1fr; }
  .product-band__photo { height: 420px; }
  .product-card { padding: var(--sp-32); }
  .product-card__title { font-size: 38px; }
  .product-card__index { font-size: 40px; }
  .credentials__grid, .company__grid, .manufacturing__grid, .trust__head, .knowledge__grid { grid-template-columns: 1fr; }
  .manufacturing__media { max-width: 460px; margin-bottom: 0; }
  .application-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; row-gap: 144px; }
  .solutions__list { margin-top: 240px; }
  .logo-wall { grid-template-columns: repeat(3, 1fr); }
  .why__grid { grid-template-columns: 1fr; gap: var(--sp-24); }
  .why:nth-child(n) .feature, .feature:nth-child(even), .feature:nth-child(odd) { margin-top: 0; }
  .why__decor { display: none; }
  .company__sphere { display: none; }
}

@media (max-width: 768px) {
  .hero__media { height: 300px; }
  .product-card__head { flex-wrap: wrap; gap: var(--sp-8); }
  .product-card__apps { grid-template-columns: 1fr; }
  .product-card__hex { width: 160px; margin: 0 auto; }
  .certified { flex-direction: column; align-items: stretch; gap: 0; }
  .certified__label { flex: 0 0 auto; width: 100%; border-radius: var(--radius-card) var(--radius-card) 0 0; padding: var(--sp-16) var(--sp-24); }
  .certified__marks { padding: var(--sp-24); justify-content: center; flex-wrap: wrap; }
  .certified__marks img { max-height: 72px; }
  .credentials__media { grid-template-columns: 1fr 1fr; }
  .credentials__media figure:nth-child(2) { grid-row: auto; }
  .solutions__list { margin-top: 160px; }
  .stat { grid-template-columns: 96px 1fr; gap: var(--sp-16); }
  .stat__icon { width: 96px; }
  .stat__icon img { width: 40px; height: 40px; }
  .stat__figure { font-size: 40px; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .logo-wall li { height: 112px; }
  .feature__icon { width: 110px; }
  .feature__icon img { width: 44px; height: 44px; }
  .feature__card { padding: var(--sp-24) 96px var(--sp-24) 40px; min-height: 150px;
    clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 40px 100%, 0 50%); }
  .feature { padding-right: 55px; }
  /* Application cards: hexagon overhang scales with the card */
  .application-grid { padding-top: 64px; row-gap: 112px; }
  .application-card__plate { margin-top: -64px; }
  .application-card { border-radius: 200px 200px 0 0; padding-bottom: var(--sp-32); }
  /* Feature cards: the elongated hexagon leaves too little text column on a
     phone, so stack icon over copy in a plain card. */
  .feature { padding-right: 0; display: block; }
  .feature:nth-child(even), .feature:nth-child(odd) { margin-top: 0; }
  .feature-grid, .why__grid { row-gap: 72px; }
  .feature__card {
    clip-path: none; border-radius: var(--radius-card);
    padding: 88px var(--sp-24) var(--sp-24); min-height: 0; text-align: center;
  }
  .feature__icon {
    position: absolute; top: 0; left: 50%; right: auto;
    transform: translate(-50%, -34px); width: 110px;
  }
  .why__grid { padding-top: 40px; }
  /* Manufacturing: ring backdrop + cut-out figure are too tall for a phone column */
  .manufacturing__media { display: none; }
  /* Solutions band */
  .solutions { padding: var(--sp-64) 0; }
  .solution-chip { font-size: 13px; padding: 10px 10px 10px 18px; }
}


@media (max-width: 480px) {
  .credentials__media { grid-template-columns: 1fr; }
  .hero__media { height: 220px; }
  .product-card { padding: var(--sp-24); }
  .product-card__title { font-size: 28px; }
  .product-card__index { font-size: 30px; }
  .product-band__photo { height: 280px; }
  .solutions__list { margin-top: 120px; }
  .stat { grid-template-columns: 72px 1fr; }
  .stat__icon { width: 72px; }
  .stat__icon img { width: 32px; height: 32px; }
  .stat__figure { font-size: 32px; }
  .logo-wall { grid-template-columns: repeat(2, 1fr); gap: var(--sp-16); }
  .logo-wall li { height: 96px; padding: 14px; }
  .certified__marks { gap: var(--sp-16); }
  .certified__marks img { max-height: 60px; }
  .company__collage { min-height: 0; }
  .knowledge__badge { width: 52px; height: 52px; }
  .knowledge__badge img { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature:hover .feature__icon { transform: translateY(-50%); }
}