/**
 * services.css — Services / Service Portfolio page template.
 * Loaded via inc/enqueue.php ($css_files array, handle 'services').
 * BEM-like prefix: .services-page__
 *
 * Accent colours for the four work packages are scoped locally to this
 * page so they don't touch the global red/gold token set.
 */

.services-page {
  /* Local WP accent palette (scoped to this template only). */
  --wp-blue:    #2f6db0;
  --wp-blue-bg: #eef4fb;
  --wp-green:   #3f9d6d;
  --wp-green-bg:#ecf7f1;
  --wp-coral:   #d9633f;
  --wp-coral-bg:#fceee8;
  --wp-violet:  #6b57c4;
  --wp-violet-bg:#f0edfa;
}

/* ── Hero / intro ──────────────────────────────────────────── */
.services-page__hero {
  background: var(--clr-bg-primary);
  padding-bottom: var(--sp-8);
}

.services-page__subtitle {
  margin-top: var(--sp-3);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--clr-text-muted);
  line-height: var(--lh-snug);
}

.services-page__intro {
  margin-top: var(--sp-5);
  color: var(--clr-text-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}
.services-page__intro p { margin: 0 0 var(--sp-3); }
.services-page__intro p:last-child { margin-bottom: 0; }

/* How to read */
.services-page__howto {
  margin-top: var(--sp-8);
  padding: var(--sp-5) var(--sp-6);
  background: var(--clr-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--clr-border);
}
.services-page__howto-title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-primary);
}
.services-page__howto-list {
  margin: 0;
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
  color: var(--clr-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

/* ── Work package cards ────────────────────────────────────── */
.services-page__packages {
  padding-top: 0;
}

.services-page__pkg {
  --pkg-accent: var(--wp-blue);
  --pkg-bg:     var(--wp-blue-bg);
  background: var(--pkg-bg);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--pkg-accent);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.services-page__pkg:last-child { margin-bottom: 0; }

.services-page__pkg--blue   { --pkg-accent: var(--wp-blue);   --pkg-bg: var(--wp-blue-bg); }
.services-page__pkg--green  { --pkg-accent: var(--wp-green);  --pkg-bg: var(--wp-green-bg); }
.services-page__pkg--coral  { --pkg-accent: var(--wp-coral);  --pkg-bg: var(--wp-coral-bg); }
.services-page__pkg--violet { --pkg-accent: var(--wp-violet); --pkg-bg: var(--wp-violet-bg); }

.services-page__pkg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--clr-border);
}
.services-page__pkg-heading {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.services-page__pkg-code {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  color: var(--pkg-accent);
  background: var(--clr-white);
  border: 1px solid var(--pkg-accent);
  border-radius: var(--radius-full);
  padding: 0.15em 0.7em;
  white-space: nowrap;
}
.services-page__pkg-title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--clr-text-primary);
  line-height: var(--lh-snug);
}
.services-page__pkg-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  white-space: nowrap;
}
.services-page__pkg-count {
  color: var(--clr-text-muted);
  font-size: var(--fs-sm);
}
.services-page__pkg-value {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--pkg-accent);
  font-variant-numeric: tabular-nums;
}

/* Service list inside a package */
.services-page__svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.services-page__svc {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--clr-border);
}
.services-page__svc:last-child { border-bottom: none; padding-bottom: 0; }

.services-page__svc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
}
.services-page__svc-name {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--clr-text-primary);
  line-height: var(--lh-snug);
}
.services-page__svc-price {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--clr-red);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.services-page__svc-unit {
  display: block;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  margin-top: 2px;
}
.services-page__svc-desc {
  margin: var(--sp-2) 0 0;
  color: var(--clr-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  max-width: 62ch;
}

/* ── Portfolio at a glance ─────────────────────────────────── */
.services-page__summary {
  background: var(--clr-bg-section);
}
.services-page__summary-title {
  text-align: center;
  margin-bottom: var(--sp-8);
}

/* Budget-share bar chart */
.services-page__chart {
  margin-bottom: var(--sp-8);
}
.services-page__chart-caption {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--clr-text-primary);
  margin: 0 0 var(--sp-3);
}
.services-page__chart-item {
  --pkg-accent: var(--wp-blue);
  --pkg-bg:     var(--wp-blue-bg);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.services-page__chart-item.services-page__pkg--blue   { --pkg-accent: var(--wp-blue);   --pkg-bg: var(--wp-blue-bg); }
.services-page__chart-item.services-page__pkg--green  { --pkg-accent: var(--wp-green);  --pkg-bg: var(--wp-green-bg); }
.services-page__chart-item.services-page__pkg--coral  { --pkg-accent: var(--wp-coral);  --pkg-bg: var(--wp-coral-bg); }
.services-page__chart-item.services-page__pkg--violet { --pkg-accent: var(--wp-violet); --pkg-bg: var(--wp-violet-bg); }

.services-page__chart-bar {
  height: 1.5rem;
  min-width: 4px;
  flex-shrink: 0;
  background: var(--pkg-bg);
  border: 1px solid var(--pkg-accent);
  border-left: 4px solid var(--pkg-accent);
  border-radius: var(--radius-sm);
}
.services-page__chart-label {
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  white-space: nowrap;
}

/* Summary table */
.services-page__table-wrap {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--clr-white);
}
.services-page__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-primary);
  font-size: var(--fs-base);
}
.services-page__table th {
  background: var(--clr-dark);
  color: var(--clr-white);
  text-align: left;
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.services-page__th--num { text-align: right !important; white-space: nowrap; }
.services-page__table td {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--clr-border);
  color: var(--clr-text-primary);
}
.services-page__td--num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.services-page__row-total td {
  border-top: 2px solid var(--clr-dark);
  font-weight: var(--fw-bold);
  background: var(--clr-light);
}

.services-page__summary-note {
  margin-top: var(--sp-6);
  text-align: center;
  color: var(--clr-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
.services-page__summary-note p { margin: 0; }

.services-page__empty {
  text-align: center;
  color: var(--clr-text-muted);
  padding-block: var(--sp-12);
}

/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .services-page__pkg { padding: var(--sp-4); }

  .services-page__pkg-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .services-page__pkg-meta { gap: var(--sp-2); }

  .services-page__svc-row {
    flex-direction: column;
    gap: 2px;
  }

  /* Summary table → stacked cards */
  .services-page__table-wrap {
    border: none; box-shadow: none; background: transparent; overflow: visible;
  }
  .services-page__table,
  .services-page__table tbody,
  .services-page__table tfoot,
  .services-page__table tr,
  .services-page__table td { display: block; width: 100%; }
  .services-page__table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
  }
  .services-page__table tr {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    background: var(--clr-white);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) 0;
    box-shadow: var(--shadow-sm);
  }
  .services-page__table td {
    border-top: none;
    text-align: left !important;
    padding: var(--sp-2) var(--sp-4);
  }
  .services-page__td--num::before {
    content: attr(data-label) ": ";
    font-weight: var(--fw-semibold);
    color: var(--clr-text-muted);
    text-transform: none;
    letter-spacing: 0;
  }
  .services-page__chart-label { white-space: normal; }
}