/* ═══════════════════════════════════════════════════════════
   JMAC — free-layout blocks for the service page
   (Service Reference Cards, Service Compare Table).

   No page in design/ draws these, so every value is taken from a part of the
   site that already exists rather than invented:

     navy → cyan bar      the timeline card gradient      about.css:474
     cyan-soft chip       .cs-tag                          case-study-factory.css:97
     white ringed node    the timeline dot                 about.css:449
     icon tile            .art-avatar                      article-detail.css:79
     cut corner (14px)    buttons, timeline cards          about.css:490

   No font-family anywhere: the blocks take the typeface of the container they
   sit in, so a `jmac-sarabun` container gives them TH Sarabun New.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────── Reference cards ───────────────────────── */

.svc-refs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.svc-refs--cols-1 { grid-template-columns: minmax(0, 1fr); }
.svc-refs--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.svc-ref {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-2);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

/* The brand bar along the top edge — the slide's plain box, told apart from
   the page's other bordered boxes the way the timeline tells its cards apart. */
.svc-ref::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--cyan) 100%);
}

.svc-ref-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 136px;
  margin: 0;
  padding: 30px 28px 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  color: var(--navy);
}
.svc-ref-title a {
  color: inherit;
  text-decoration: none;
}

.svc-ref--link:hover {
  border-color: var(--cyan);
  box-shadow: 0 14px 32px rgba(35, 57, 105, .12);
}
.svc-ref--link:hover .svc-ref-title { color: var(--cyan-deep); }

/* With a description the title stops filling the card — it sits above the text
   instead of being centred in the empty space, and the description takes the
   room that is left so every card's client row still lines up. */
.svc-ref--has-desc .svc-ref-title {
  flex: 0 0 auto;
  min-height: 0;
  padding-bottom: 10px;
}
.svc-ref-desc {
  flex: 1 1 auto;
  padding: 0 28px 24px;
  text-align: center;
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-700);
}
.svc-ref-desc > p { margin: 0 0 12px; }
.svc-ref-desc > p:last-child,
.svc-ref-desc > ul:last-child,
.svc-ref-desc > ol:last-child { margin-bottom: 0; }
.svc-ref-desc > ul,
.svc-ref-desc > ol {
  margin: 0 0 12px;
  padding-left: 20px;
  text-align: start;
}

.svc-ref-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.svc-ref-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--navy);
  white-space: nowrap;
}
.svc-ref-client {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--gray-700);
}
.svc-ref-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cyan-deep);
  background: var(--cyan-soft);
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .svc-refs--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .svc-refs,
  .svc-refs--cols-3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .svc-ref-title { min-height: 0; padding: 26px 20px 20px; font-size: 21px; }
}

/* ───────────────────────── Compare table ───────────────────────── */

/* The cut corner is on the wrapper: a table cannot take clip-path reliably,
   and cutting the wrapper trims the last row the same way the buttons are cut. */
.svc-compare-wrap {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.svc-compare {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: auto;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* One continuous gradient across both headings — navy into the site's cyan —
   rather than two separate bars. */
.svc-compare thead th {
  padding: 14px 22px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: #fff;
  background: var(--navy);
}
.svc-compare thead th.svc-compare-b {
  background: linear-gradient(90deg, var(--navy) 0%, var(--cyan-deep) 100%);
}
/* On both cells, so the column keeps its width when the heading row is left
   out (both headings empty). The widget's Left column width control sets the
   property; 40% is the design's own split. */
.svc-compare th.svc-compare-a,
.svc-compare td.svc-compare-a { width: var(--svc-compare-a, 40%); }

.svc-compare td {
  position: relative;
  padding: 16px 22px;
  line-height: 1.7;          /* on the cell: Hello sets 1.5 there, beating inheritance */
  vertical-align: middle;
  text-align: left;
}
.svc-compare td.svc-compare-a {
  font-weight: 600;
  color: var(--navy);
}

/* ── Against Hello Elementor's table reset ──
   hello-elementor/assets/css/reset.css (3.5.1) styles every table on the site:

     table td, table th                     border: 1px solid grey        (0,0,2)
     table thead:first-child tr:first-child th
                                            border-block-start: grey      (0,2,4)
     table tbody>tr:nth-child(odd)>td       background-color: grey 7%     (0,1,4)
     table tbody tr:hover>td                background-color: grey 10%   (0,1,4)

   The last two paint over every other row and any hovered row, and the heading
   rule beats a plain `.svc-compare thead th`. So borders and backgrounds go
   through the wrapper, which lifts them to three classes — past all four
   without !important, so the Style tab's colour controls (written by Elementor
   with five) still win over these. */
.svc-compare-wrap .svc-compare thead th.svc-compare-a,
.svc-compare-wrap .svc-compare thead th.svc-compare-b {
  border: 0;
}
.svc-compare-wrap .svc-compare td.svc-compare-a,
.svc-compare-wrap .svc-compare td.svc-compare-b {
  border: 0;
  border-bottom: 1px solid var(--border);
}
.svc-compare-wrap .svc-compare td.svc-compare-a { background-color: var(--navy-soft); }
.svc-compare-wrap .svc-compare td.svc-compare-b { background-color: #fff; }
.svc-compare-wrap .svc-compare--striped tbody tr:nth-child(even) td.svc-compare-b {
  background-color: var(--paper, #F7F8FA);
}

.svc-compare-cell {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Row icon: the article avatar tile ── */
.svc-compare-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 22px;
  color: var(--cyan-deep);
  background: #fff;
  border: 1px solid var(--border);
}
.svc-compare-icon-mask {
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask: var(--jmac-icon) center / contain no-repeat;
  mask: var(--jmac-icon) center / contain no-repeat;
}

/* ── Arrow: the timeline's white ringed node, sitting on the column seam ── */
.svc-compare-arrow {
  position: absolute;
  top: 50%;
  right: -17px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 18px;
  color: var(--cyan);
  background: #fff;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.svc-compare--arrow td.svc-compare-b { padding-left: 38px; }

/* ── Phone: each row becomes a card ──
   A two-column table squeezed to 360px leaves a few words per line in each
   column. Stacked, the need sits on top, the arrow turns to point down at the
   answer, and each cell names its column because the heading row is hidden. */
@media (max-width: 700px) {
  .svc-compare-wrap { clip-path: none; }

  .svc-compare,
  .svc-compare tbody,
  .svc-compare tr,
  .svc-compare td {
    display: block;
    width: 100%;
  }
  .svc-compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .svc-compare tr {
    margin-bottom: 14px;
    border: 1px solid var(--border-2);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  }
  .svc-compare td { padding: 14px 18px; }
  /* Stacked, the cells are full width — the column split above is per-cell and
     would otherwise still hold here. */
  .svc-compare td.svc-compare-a { width: 100%; }
  /* The need keeps its bottom rule — it is the line the arrow sits on. */
  .svc-compare-wrap .svc-compare td.svc-compare-b { border-bottom: 0; }
  .svc-compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--cyan-deep);
  }
  .svc-compare td[data-label=""]::before { display: none; }
  .svc-compare-wrap .svc-compare--striped tbody tr:nth-child(even) td.svc-compare-b { background-color: #fff; }

  .svc-compare-arrow {
    top: auto;
    right: auto;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
  .svc-compare--arrow td.svc-compare-b { padding-left: 18px; padding-top: 24px; }
}

/* ───────────────────────── Data table ─────────────────────────
   The compare table above with any number of columns: same classes, so the
   colours, borders and phone cards all come from there. Only what a third
   column changes is here. */

/* One gradient across the whole heading row, however many columns — on the
   row, with the cells clear, so it doesn't restart in every `th.svc-compare-b`.
   Kept at two classes so the widget's Heading background control wins. */
.svc-dtable thead tr {
  background: linear-gradient(90deg, var(--navy) 0%, var(--navy) 20%, var(--cyan-deep) 100%);
}
.svc-compare-wrap .svc-dtable thead th.svc-compare-a,
.svc-compare-wrap .svc-dtable thead th.svc-compare-b {
  background: transparent;
}
/* Widths come from the <col>s; the compare table's 40% first column doesn't apply. */
.svc-dtable th.svc-compare-a,
.svc-dtable td.svc-compare-a { width: auto; }

/* Two white columns side by side need a line between them. */
.svc-compare-wrap .svc-dtable td.svc-compare-b + td.svc-compare-b {
  border-left: 1px solid var(--border);
}
.svc-compare-wrap .svc-dtable thead th + th.svc-compare-b {
  border-left: 1px solid rgba(255, 255, 255, .18);
}

@media (max-width: 700px) {
  /* Stacked, the cells sit one above another: a rule under each but the last,
     and no side rule. */
  .svc-compare-wrap .svc-dtable td.svc-compare-b + td.svc-compare-b { border-left: 0; }
  .svc-compare-wrap .svc-dtable td.svc-compare-b:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }
}

/* ───────────────────────── Process steps ─────────────────────────
   Numbered cards joined by arrows. The number takes the navy→cyan gradient of
   the band's number tile, and the arrow is a filled gradient circle for the
   same reason — one pair of colours for "this is a sequence" across the site. */

.svc-steps {
  --svc-steps-gap: 56px;
  display: flex;
  align-items: stretch;
  gap: var(--svc-steps-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  margin: 0;
}

/* Grid layout: the steps are a set, not a sequence, so they wrap onto as many
   rows as the column count needs and carry no arrows. Cards keep their own
   height from the tallest in each row. */
.svc-steps--grid {
  --svc-steps-gap: 24px;
  display: grid;
  grid-template-columns: repeat(var(--svc-steps-cols, 2), minmax(0, 1fr));
}
.svc-steps--grid .svc-step { flex: 1 1 auto; }

.svc-step-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 30px;
  text-align: center;
  background: var(--navy-soft);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

/* The number and the icon share one row: number pinned top-left, icon centred.
   With no icon the row still holds the number, so the title never runs into it. */
.svc-step-head {
  position: relative;
  align-self: stretch;
  display: flex;
  justify-content: center;
  min-height: 34px;
  margin-bottom: 18px;
}

.svc-step-num {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
  color: var(--navy);   /* fallback where text clipping is unsupported */
  background: linear-gradient(135deg, var(--navy) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.svc-step-icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  font-size: 38px;
  color: var(--cyan-deep);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(35, 57, 105, .10);
}
.svc-step-icon-mask {
  display: block;
  width: 40px;
  height: 40px;
  background-color: currentColor;
  -webkit-mask: var(--jmac-icon) center / contain no-repeat;
  mask: var(--jmac-icon) center / contain no-repeat;
}

.svc-step-title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--navy);
}

.svc-step-desc {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
  color: var(--gray-700);
}

/* Sits in the gap between two cards, centred on it. */
.svc-step-arrow {
  position: absolute;
  top: 50%;
  right: calc(-0.5 * var(--svc-steps-gap) - 20px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--cyan) 100%);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(35, 57, 105, .18);
  transform: translateY(-50%);
  pointer-events: none;
}

/* One column on a phone: two columns of Thai body text at 400px leave four or
   five characters a line. */
@media (max-width: 700px) {
  .svc-steps--grid { grid-template-columns: minmax(0, 1fr); }
}

/* Stacked: the arrow drops into the gap below each card and turns to point down. */
@media (max-width: 900px) {
  .svc-steps--row {
    --svc-steps-gap: 48px;
    flex-direction: column;
  }
  .svc-step-arrow {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(-0.5 * var(--svc-steps-gap) - 20px);
    transform: translateX(-50%) rotate(90deg);
  }
}