/**
 * Styling for the two site-owned sections Jobbmat's editorial rules depend on:
 *   design/sections/comparison.section.json  — the A-vs-B table
 *   design/sections/passar.section.json      — "passar / passar inte"
 *
 * Every value reads a token defined by the template or by 10-ljus.css. No literal
 * colours here — a knob or palette change must re-skin both sections with it.
 */

/* ── comparison ───────────────────────────────────────────────────── */

.dw-band--compare {
  padding-block: var(--dw-section-y);
}

/* The table is the one element allowed to exceed the reading measure; the page
   itself must never scroll sideways. tabindex on the wrapper makes the overflow
   reachable by keyboard, which is why the focus ring below is not optional. */
.dw-compare__scroll {
  max-width: 100%;
  overflow-x: auto;
  /* Scroll affordance. On a phone the table is ~550px inside a ~350px wrapper and
     nothing signalled that it continued, so the right-hand columns were invisible
     to anyone who did not think to swipe. The two `local` gradients scroll WITH the
     content and mask the two `scroll` shadows when that edge is reached, so the
     shadow appears only on the side there is more content. No JS, and it costs
     nothing on desktop where the table fits and both shadows stay covered. */
  background:
    linear-gradient(to right, var(--dw-surface, #FBF8F3) 30%, rgba(251, 248, 243, 0)) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--dw-surface, #FBF8F3) 30%, rgba(251, 248, 243, 0)) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(28, 26, 23, 0.13), rgba(28, 26, 23, 0)) left center / 0.9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(28, 26, 23, 0.13), rgba(28, 26, 23, 0)) right center / 0.9rem 100% no-repeat scroll;
}

@media (prefers-reduced-motion: no-preference) {
  .dw-compare__scroll { scroll-behavior: smooth; }
}

.dw-compare__scroll:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 3px;
  border-radius: var(--dw-r-sm);
}

.dw-compare {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-family: var(--dw-body);
  /* Comparison tables are read down a column, so digits must align. */
  font-variant-numeric: tabular-nums;
  font-size: 0.9375rem;
  text-align: left;
}

.dw-compare th,
.dw-compare td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--dw-line);
  vertical-align: baseline;
}

.dw-compare thead th {
  font-family: var(--dw-display);
  font-weight: 600;
  color: var(--dw-ink);
  border-bottom-width: 2px;
}

/* The row label carries the question; the cells carry the answers. Keeping the
   label from wrapping is what makes the table scannable at a glance. */
.dw-compare tbody th {
  font-weight: 600;
  color: var(--dw-ink);
  white-space: nowrap;
}

.dw-compare td {
  color: var(--dw-dis);
}

.dw-compare tbody tr:last-child th,
.dw-compare tbody tr:last-child td {
  border-bottom: 0;
}

.dw-compare__note {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  color: var(--dw-dis);
}

/* ── passar / passar inte ─────────────────────────────────────────── */

.dw-band--passar {
  padding-block: var(--dw-section-y);
}

.dw-passar {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .dw-passar {
    grid-template-columns: 1fr 1fr;
  }
}

.dw-passar__col {
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  border: 1px solid var(--dw-line);
  border-radius: var(--dw-r-md);
  background: var(--dw-panel);
}

/* The whole point of this section is that the two sides carry equal weight — the
   "skip it" column is the one competitors omit, so it is styled as a peer, not as
   a warning. Only the marker colour distinguishes them. */
.dw-passar__label {
  margin: 0 0 0.75rem;
  font-family: var(--dw-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--dw-ink);
}

.dw-passar__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.dw-passar__item {
  position: relative;
  padding-left: 1.6rem;
  color: var(--dw-dis);
  line-height: 1.55;
}

/* Markers are decorative and drawn in CSS so no glyph reaches the accessibility
   tree — the column heading already says which list this is. */
.dw-passar__item::before {
  position: absolute;
  left: 0;
  top: 0.1em;
  font-weight: 700;
}

.dw-passar__col--fits .dw-passar__item::before {
  content: "\2713";
  color: var(--wp--preset--color--primary);
}

.dw-passar__col--skips .dw-passar__item::before {
  content: "\2014";
  color: var(--wp--preset--color--accent);
}