
.skd-blog-new .skd-module-table {
  padding-top: 60px;
  padding-bottom: 0;
}

/* — Table wrapper — horizontal scroll safety net — */
.skd-blog-new .skd-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* — Table — */
.skd-blog-new .skd-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

/* — Header row — */
.skd-blog-new .skd-table thead tr {
  background-color: #0055FF;
}

.skd-blog-new .skd-table thead th {
  /* H5 rules: Inter Semi Bold, 20px, 160% LH — white */
  font-family: var(--skd-font-body);
  font-weight: var(--skd-fw-semibold);
  font-size: var(--skd-fs-h5);
  line-height: 1.2;
  letter-spacing: var(--skd-ls-h5);
  color: #ffffff;
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* — Body rows — alternating white / #EEF4FA — */
.skd-blog-new .skd-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

.skd-blog-new .skd-table tbody tr:nth-child(even) {
  background-color: #EEF4FA;
}

/* — Body cells — body copy rules — */
.skd-blog-new .skd-table tbody td {
  font-family: var(--skd-font-body);
  font-weight: var(--skd-fw-regular);
  font-size: var(--skd-fs-body);
  line-height: var(--skd-lh-body);
  letter-spacing: var(--skd-ls-body);
  color: var(--skd-color-text);
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
}

/* Dividers: #EEF4FA on white rows, white on grey rows */
.skd-blog-new .skd-table tbody tr:nth-child(odd) td {
  border: 1px solid #EEF4FA;
}

.skd-blog-new .skd-table tbody tr:nth-child(even) td {
  border: 1px solid #ffffff;
}

/* — Optional modifier: center-align value columns (add to <table> in WP) — */
.skd-blog-new .skd-table--center-values thead th:not(:first-child),
.skd-blog-new .skd-table--center-values tbody td:not(:first-child) {
  text-align: center;
}

/* ── Responsive: stack layout at mobile ──────────────────────────────────────
   Each <tr> becomes a self-contained card.
   - First <td> (the row label) becomes the card heading — blue bg, white text.
   - All other <td>s stack as label / value pairs using data-label attributes.
   WP: ensure every non-first <td> has data-label="[column header]"
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Cancel desktop border rules — they have higher specificity than generic
     mobile overrides and paint white borders onto the grey cells otherwise.
     Match the exact desktop selectors so specificity is equal and source
     order (mobile = later) wins. */
  .skd-blog-new .skd-table tbody tr:nth-child(odd) td,
  .skd-blog-new .skd-table tbody tr:nth-child(even) td {
    border: none;
  }

  /* Disable horizontal scroll — not needed in stack mode */
  .skd-blog-new .skd-table-wrap {
    overflow-x: visible;
  }

  /* Break table model — everything becomes block */
  .skd-blog-new .skd-table,
  .skd-blog-new .skd-table tbody,
  .skd-blog-new .skd-table tr,
  .skd-blog-new .skd-table td {
    display: block;
    width: 100%;
  }

  /* Hide the header row — labels come from data-label instead */
  .skd-blog-new .skd-table thead {
    display: none;
  }

  /* Each row = a card with spacing between — 1px grey stroke.
     Using box-shadow instead of border so it renders outside the element
     and doesn't create white edge artefacts against the cell backgrounds. */
  .skd-blog-new .skd-table tbody tr {
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 0 0 1px #EEF4FA;
    background-color: #ffffff; /* reset desktop tr striping */
  }

  /* First cell = card heading — blue bar matching the desktop header row */
  .skd-blog-new .skd-table tbody td:first-child {
    background-color: #0055FF;
    color: #ffffff;
    font-family: var(--skd-font-body);
    font-weight: var(--skd-fw-semibold);
    font-size: 16px;
    padding: 12px 16px;
    border: none;
  }

  /* Value cells — flex row: label on left, value on right */
  .skd-blog-new .skd-table tbody td:not(:first-child) {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 10px 16px;
    border: none;
    border-top: 1px solid #EEF4FA;
    font-size: 15px;
  }

  /* Alternating row stripes within each card —
     td:nth-child counts from 1 (blue header), so value rows start at 2:
     2nd = white, 3rd = grey, 4th = white … */
  .skd-blog-new .skd-table tbody td:not(:first-child):nth-child(even) {
    background-color: #ffffff;
  }
  .skd-blog-new .skd-table tbody td:not(:first-child):nth-child(odd) {
    background-color: #EEF4FA;
  }

  /* data-label prefix — Inter SemiBold, navy */
  .skd-blog-new .skd-table tbody td:not(:first-child)::before {
    content: attr(data-label);
    font-weight: var(--skd-fw-semibold);
    color: var(--skd-color-heading);
    min-width: 130px;
    flex-shrink: 0;
  }
}

/* .skd-blog-new table tr:nth-child(even) {
	background-color: #EEF4FA;
	border-color: #EEF4FA;
}
.skd-blog-new .table-list-wrap {
	padding-top: 40px;
	padding-bottom: 40px;
}
.skd-blog-new table tr th {
	font-weight: 600;
	color: #ffffff;
	background: #0055FF;
	padding: 10px 20px;
	border: 2px solid #ffffff;
}
.skd-blog-new table tbody tr:hover td {
	background-color: #0055FF;
	color: #ffffff;
}
.skd-blog-new table tr td:first-child,
.skd-blog-new table tr th:first-child {
    width: 500px;
}
.skd-blog-new table tr td {
	padding: 10px 20px;
    border: 2px solid #ffffff;
    cursor:pointer;
	transition: all 0.25s ease-in-out 0s;
}
.skd-blog-new .table-wrapper table {width: 100%;} */