/* Jib OS webinar pages.
   Tokens, fonts and the framed dusk hero are taken from the main site
   (hdmall.co.th/jib-os) so the two read as one brand. */

@font-face { font-family: "Jib Sans"; font-weight: 400; font-display: swap; src: url("fonts/jib-sans-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jib Sans"; font-weight: 600; font-display: swap; src: url("fonts/jib-sans-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jib Sans"; font-weight: 700; font-display: swap; src: url("fonts/jib-sans-700-normal.woff2") format("woff2"); }
@font-face { font-family: "LINE Seed Sans TH"; font-weight: 400; font-display: swap; src: url("fonts/line-seed-th-Rg.woff2") format("woff2"); }
@font-face { font-family: "LINE Seed Sans TH"; font-weight: 700; font-display: swap; src: url("fonts/line-seed-th-Bd.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Thai"; font-weight: 400 700; font-display: swap; src: url("fonts/noto-sans-thai-var.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

:root {
  --paper: #f3f1ea;
  --paper-2: #faf9f5;
  --white: #fff;
  --ink: #1d1c1a;
  --ink-2: #4a4944;
  --muted: #6e6c64;
  --line: #e4e0d6;
  --dusk: #171029;
  --blue: #2563eb;
  --blue-soft: #e8efff;
  --error: #b42318;

  --font-head: "LINE Seed Sans TH", "Jib Sans", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "Noto Sans Thai", "Jib Sans", system-ui, -apple-system, sans-serif;
  --font-ui: var(--font-head);          /* buttons, tile month */
  --head-weight: 700;
  --head-tracking: 0;

  /* the hero card and the page content share one measure */
  --measure: 1080px;
  --hero-pad: clamp(20px, 5vw, 56px);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-hero: 2rem;
  --shadow-card: 0 1px 2px rgb(28 25 23 / .04), 0 8px 24px -8px rgb(28 25 23 / .10);
  --shadow-cta: 0 2px 4px rgb(10 6 20 / .18), 0 14px 40px -8px rgb(10 6 20 / .45);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
strong { font-weight: 700; }
h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); line-height: 1.3; letter-spacing: var(--head-tracking); }

/* English: the main site's pairing, new-kansas headings (Adobe Fonts) over
   Jib Sans text. Thai keeps LINE Seed + Noto Sans Thai. */
html[lang="en"] {
  --font-head: "new-kansas", Georgia, serif;
  --font-body: "Jib Sans", system-ui, -apple-system, sans-serif;
  --font-ui: "Jib Sans", system-ui, sans-serif;
  --head-weight: 500;
  --head-tracking: -0.02em;
}
html[lang="en"] body { line-height: 1.6; }
html[lang="en"] .hero__title { line-height: 1.08; }
html[lang="en"] .section__title, html[lang="en"] .speaker__name { line-height: 1.15; }
html[lang="en"] .register__title, html[lang="en"] .when__date { font-family: var(--font-ui); font-weight: 600; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 40px, 1080px); margin-inline: auto; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 26px; border-radius: var(--r-md); border: 1px solid transparent;
  font: 700 1.0625rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease;
}
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: #33312d; }
.btn--primary:disabled { background: #6b6963; cursor: progress; }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: #f1efe9; }
.btn--outline { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn--outline:hover { background: var(--paper-2); }
.btn--xl { padding: 18px 40px; font-size: 1.1875rem; border-radius: var(--r-lg); box-shadow: var(--shadow-cta); }
.btn--block { display: flex; width: 100%; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; }

/* ── hero ────────────────────────────────────────────────────────────────── */
/* The card is as wide as the content column, so its edges line up with the
   section text below and the headline never drifts to the screen edge. */
.frame {
  padding: 14px; padding-top: max(14px, env(safe-area-inset-top, 0px));
  max-width: calc(var(--measure) + 28px); margin-inline: auto;
}
@media (min-width: 1100px) { .frame { padding-top: 24px; } }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-hero);
  color: var(--white);
  background-color: var(--dusk);
  background-position: center bottom; background-size: cover; background-repeat: no-repeat;
}
/* keeps the copy readable where the sky is brightest */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(23 16 41 / .62) 0%, rgb(23 16 41 / .28) 50%, rgb(23 16 41 / 0) 75%);
}
.hero__inner { padding: 22px var(--hero-pad) 0; }
.hero__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--white); }
.brand__logo { width: auto; height: 35px; }
.brand__by { font: 400 .875rem/1 "Jib Sans", system-ui, sans-serif; color: rgb(255 255 255 / .72); padding-top: 4px; }

.langs { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .18); }
.langs__item { min-width: 44px; padding: 6px 12px; border-radius: 999px; text-align: center; font: 600 .875rem/1.2 "Jib Sans", system-ui, sans-serif; letter-spacing: .02em; color: rgb(255 255 255 / .78); text-decoration: none; }
.langs__item[aria-current] { background: var(--white); color: var(--ink); }
a.langs__item:hover { color: var(--white); background: rgb(255 255 255 / .12); }

.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
.hero--art .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: 24px; }
.hero__body { padding: clamp(40px, 7vw, 76px) 0 clamp(48px, 7vw, 80px); display: flex; flex-direction: column; align-items: flex-start; align-self: center; }
.hero__art { width: 100%; max-width: 480px; justify-self: end; margin-bottom: 16px; }

/* ── scene hero (light) ──
   The illustration is shown whole in the lower right and feathered on its
   top and left edges into a sky matched to its own, so the copy has clean
   space on the left without covering or cropping any character. */
.hero--scene {
  color: var(--ink);
  background: linear-gradient(165deg, #f1f7ff 0%, #e2eefc 55%, #d7e7fb 100%);
  min-height: min(620px, 80svh);
  display: flex; flex-direction: column;
}
.hero--scene .hero__scrim { display: none; }
.hero--scene .hero__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; }
.hero--scene .hero__grid { flex: 1; align-items: center; }
.hero--scene .hero__body { max-width: 46%; padding-bottom: clamp(56px, 8vw, 96px); }
.hero__scene {
  position: absolute; right: 0; bottom: 0; z-index: 0;
  width: 70%; height: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%), linear-gradient(to bottom, transparent 0, #000 14%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 16%), linear-gradient(to bottom, transparent 0, #000 14%);
          mask-composite: intersect;
}
.hero--scene .brand { color: var(--ink); }
.hero--scene .brand__by { color: var(--muted); }
.hero--scene .langs { background: rgb(255 255 255 / .6); border-color: rgb(29 28 26 / .1); }
.hero--scene .langs__item { color: var(--ink-2); }
.hero--scene .langs__item[aria-current] { background: var(--ink); color: var(--white); }
.hero--scene a.langs__item:hover { color: var(--ink); background: rgb(29 28 26 / .06); }
.hero--scene .when__tile { box-shadow: 0 10px 24px -12px rgb(30 50 90 / .45); }
.hero--scene .when__time { color: var(--ink-2); }
.hero--scene .when__audience { color: var(--muted); }
.hero--scene .hero__sub { color: var(--ink-2); }
.hero--scene .hero__ended { background: rgb(29 28 26 / .06); }

/* the calendar tile: the page's one bold element */
.when { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.when__tile {
  flex: none; width: 92px; border-radius: 18px; overflow: hidden; text-align: center;
  background: var(--white); color: var(--ink); box-shadow: 0 12px 30px -10px rgb(0 0 0 / .5);
}
.when__month { display: block; background: var(--blue); color: var(--white); font: 700 .9375rem/1 var(--font-ui); padding: 8px 0 7px; }
.when__day { display: block; font: 700 3.25rem/1 "Jib Sans", var(--font-head); padding: 10px 0 12px; letter-spacing: -.02em; }
.when__text { display: flex; flex-direction: column; line-height: 1.45; }
.when__date { font: 700 1.125rem/1.4 var(--font-head); }
.when__time { font-size: 1.0625rem; color: rgb(255 255 255 / .9); }
.when__audience { font-size: .9375rem; color: rgb(255 255 255 / .72); margin-top: 2px; }

.hero__title { font-size: clamp(2.125rem, 5vw, 3.5rem); line-height: 1.22; max-width: 16ch; }
.hero__sub { text-wrap: balance; margin-top: 16px; font-size: clamp(1.125rem, 2vw, 1.3125rem); line-height: 1.6; color: rgb(255 255 255 / .86); max-width: 40ch; }
.hero .btn { margin-top: 34px; }
.hero__ended { margin-top: 30px; padding: 10px 16px; border-radius: var(--r-sm); background: rgb(255 255 255 / .12); font-weight: 600; }

/* ── sections ────────────────────────────────────────────────────────────── */
.section { padding: clamp(56px, 9vw, 104px) 0; }
.section + .section { padding-top: 0; }
.section__title { font-size: clamp(1.625rem, 3.4vw, 2.25rem); margin-bottom: clamp(24px, 4vw, 40px); }

/* benefits: columns divided by rules, not boxed */
.benefits { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.benefit { padding: 4px 28px 4px 0; }
.benefit + .benefit { border-left: 1px solid var(--line); padding-left: 28px; }
.benefit__n { display: block; font: 700 2.75rem/1 "Jib Sans", var(--font-head); color: var(--blue); margin-bottom: 14px; }
.benefit p { font-size: 1.125rem; line-height: 1.7; color: var(--ink-2); }
.benefit strong { color: var(--ink); }

/* speaker */
.speaker { display: flex; align-items: center; gap: clamp(20px, 4vw, 36px); max-width: 760px; }
.speaker__photo { flex: none; width: 198px; height: 198px; border-radius: 50%; object-fit: cover; background: var(--white); }
.speaker__photo--initials {
  /* Noto's looped Thai: LINE Seed's loopless forms read as Latin at this size */
  display: grid; place-items: center; font: 600 4.5rem/1 "Noto Sans Thai", var(--font-head);
  color: var(--white); background: radial-gradient(circle at 30% 25%, #6aa2ff, var(--blue) 60%, #1d4fd8);
}
.speaker__name { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.speaker__headline { margin-top: 6px; font-weight: 600; font-size: 1.125rem; line-height: 1.55; }
.speaker__bio { margin-top: 8px; color: var(--ink-2); }
.speaker + .speaker { margin-top: 32px; }

/* ── register ────────────────────────────────────────────────────────────── */
.section--register { background: var(--paper-2); border-top: 1px solid var(--line); padding-top: clamp(56px, 9vw, 104px) !important; }
.register { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 80px); align-items: start; }
.register__title { font: 700 1.25rem/1.5 var(--font-head); margin-top: -12px; }
.register__facts { margin-top: 24px; display: grid; gap: 14px; }
.register__facts div { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.register__facts dt { color: var(--muted); }
.register__facts dd { font-weight: 600; }
.register__art { width: 100%; max-width: 460px; margin-top: 44px; }

.register__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-card); }

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 1rem; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  padding: 12px 14px; min-height: 50px;
  border: 1px solid #d6d2c7; border-radius: var(--r-sm); background: var(--white);
  appearance: none; -webkit-appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a4944' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.field [aria-invalid=true] { border-color: var(--error); }
.field__hint { font-size: .875rem; color: var(--muted); }
.field__err, .form__err { font-size: .9375rem; color: var(--error); line-height: 1.5; }
.field__err:empty, .form__err:empty { display: none; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--check { grid-template-columns: 24px 1fr; column-gap: 12px; align-items: start; }
.field--check input { width: 22px; height: 22px; margin-top: 3px; accent-color: var(--ink); }
.field--check label { font-weight: 400; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.field--check label a { color: var(--blue); }
.field--check .field__err { grid-column: 2; }
.form .btn { margin-top: 4px; padding-block: 16px; font-size: 1.125rem; }

.success { text-align: center; display: grid; gap: 12px; outline: none; }
.success__icon { font-size: 2.75rem; line-height: 1; }
.success__title { font-size: 1.625rem; }
.success__lede { color: var(--ink-2); }
.success__to { font-weight: 600; word-break: break-all; }
.success__when { list-style: none; padding: 14px 0; margin: 4px 0; border-block: 1px solid var(--line); display: grid; gap: 4px; font-weight: 600; }
.success__join { word-break: break-all; }
.success__join a { color: var(--blue); }
.success__ics { font-size: .9375rem; color: var(--muted); }

.closed { text-align: center; display: grid; gap: 14px; justify-items: center; }
.closed h3 { font-size: 1.375rem; }
.closed p { color: var(--ink-2); max-width: 40ch; }

.footer { padding: 32px 0 48px; color: var(--muted); font-size: .875rem; }
.footer a { color: var(--ink-2); }
.footer__legal { margin-top: 8px; font-size: .8125rem; max-width: 70ch; }

.stickycta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgb(250 249 245 / .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.stickycta[hidden] { display: none; }
@media (min-width: 861px) { .stickycta { display: none !important; } }

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .benefits { grid-template-columns: 1fr; }
  .benefit, .benefit + .benefit { border-left: 0; padding: 22px 0; }
  .benefit + .benefit { border-top: 1px solid var(--line); }
  .benefit:first-child { padding-top: 0; }
  .benefit { display: grid; grid-template-columns: 44px 1fr; gap: 6px; }
  .benefits--plain .benefit { grid-template-columns: 1fr; }
  .benefit__n { font-size: 2rem; margin: 0; }
  .register { grid-template-columns: 1fr; }
  .register__art { display: none; }
  /* hero: copy first, art underneath */
  .hero--art .hero__grid { grid-template-columns: 1fr; }
  .hero__body { padding-bottom: 8px; }
  .hero__art { justify-self: center; max-width: min(400px, 92%); margin: 8px auto 10px; }
  /* scene: copy first, the whole illustration underneath */
  .hero--scene { min-height: 0; }
  .hero--scene .hero__body { max-width: none; padding-bottom: 20px; }
  .hero__scene {
    position: relative; width: 100%; margin-top: -8px;
    /* trim the image's own empty sky on the left so the cast is larger */
    aspect-ratio: 4 / 3; object-fit: cover; object-position: 96% 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 18%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
}
@media (max-width: 720px) {
  .frame { padding: 8px; }
  .hero { border-radius: 1.5rem; }
  .hero__scrim { background: linear-gradient(180deg, rgb(23 16 41 / .5) 0%, rgb(23 16 41 / .25) 55%, rgb(23 16 41 / 0) 100%); }
  .hero__body { padding-top: 28px; }
  .langs__item { min-width: 40px; padding: 6px 10px; }
  .brand__logo { height: 30px; }
  .brand__by { font-size: .8125rem; }
  .when { gap: 14px; margin-bottom: 24px; }
  .when__tile { width: 74px; border-radius: 14px; }
  .when__month { font-size: .8125rem; padding: 6px 0 5px; }
  .when__day { font-size: 2.5rem; padding: 7px 0 9px; }
  .when__date { font-size: 1rem; }
  .when__time, .when__audience { font-size: .9375rem; }
  .hero .btn { align-self: stretch; }
  .speaker { flex-direction: column; align-items: flex-start; }
  .speaker__photo { width: 156px; height: 156px; }
  .speaker__photo--initials { font-size: 3.6rem; }
  body:has(.stickycta:not([hidden])) .footer { padding-bottom: 110px; }
}