/* ═══════════════════════════════════════════════════════════
   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); }

.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%);
}
.svc-compare th.svc-compare-a { width: 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; }
  /* 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; }
}

/* ───────────────────────── 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;
}

.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;
}

/* Stacked: the arrow drops into the gap below each card and turns to point down. */
@media (max-width: 900px) {
  .svc-steps {
    --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);
  }
}