/* ============================================================
   AXIS WEBPRO | PAGES/SERVICE-DETAIL.CSS
   Shared by services-hub + 4 service-detail templates.
   References tokens.css + base.css + components.css.
   ============================================================ */

/* Hero styling lives in components/hero.css (unified across all pages).
   The legacy .hero-service side-by-side block was removed at the
   2026-05-20 unified-hero pass. Slug classes (.hero-services-hub,
   .hero-wordpress-development, etc.) remain available as per-page hooks. */

/* ----------------------------------------
   FULL-BLEED SERVICE CARDS (services-hub)
   ---------------------------------------- */
.services-grid-bleed {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-block-start: var(--space-6);
}

@media (min-width: 48em) {
  .services-grid-bleed {
    grid-template-columns: 1fr 1fr;
  }
}

.service-card-bleed {
  padding: 0;
  overflow: hidden;
}

.service-card-bleed picture,
.service-card-bleed img {
  border-radius: 0;
  margin: 0;
  inline-size: 100%;
}

.service-card-bleed .service-card-body {
  padding: var(--space-5);
}

/* ----------------------------------------
   DELIVERABLES LIST
   ---------------------------------------- */
.includes-section {
  background: var(--color-base);
}

.deliverables-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  padding-inline-start: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .deliverables-list {
    grid-template-columns: 1fr 1fr;
  }
}

.deliverables-list li {
  padding-inline-start: var(--space-5);
  position: relative;
  color: var(--color-text-body);
}

.deliverables-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

/* ----------------------------------------
   FOUR-COL GRID (used by SEO / Maintenance includes)
   ---------------------------------------- */
.four-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.col-card {
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: var(--card-border);
}

.col-card h3 {
  font-size: var(--fs-h4);
  margin-block-end: var(--space-3);
}

.col-card p {
  color: var(--color-text-muted);
  margin-block-end: 0;
}

/* ----------------------------------------
   PROCESS (re-used from home.css)
   ---------------------------------------- */
.process-section {
  background: var(--color-surface);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
  counter-reset: step;
  padding-inline-start: 0;
  list-style: none;
}

.process-step {
  counter-increment: step;
  background: var(--color-base);
  padding: var(--space-5);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-1);
}

.process-step::before {
  content: counter(step, decimal-leading-zero);
  display: inline-block;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  margin-block-end: var(--space-3);
}

.process-step p {
  max-inline-size: 60ch;
}

@media (min-width: 64em) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-7);
  }
}

/* ----------------------------------------
   KPI BAND (re-used)
   ---------------------------------------- */
.kpi-band {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.kpi-band h2 {
  color: var(--color-text-on-primary);
  text-align: center;
}

.kpi-band .eyebrow {
  display: block;
  text-align: center;
  color: var(--color-accent);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
  padding-inline-start: 0;
  list-style: none;
}

.kpi-item {
  text-align: center;
}

.kpi-metric {
  display: block;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  line-height: 1;
}

.kpi-label {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--fs-small);
  opacity: 0.9;
}

/* ----------------------------------------
   PERFORMANCE SECTION
   ---------------------------------------- */
.perf-section {
  background: var(--color-base);
}

/* ----------------------------------------
   FAQ (no FAQPage schema; display only)
   ---------------------------------------- */
.faq-section {
  background: var(--color-surface);
}

.faq-list {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  max-inline-size: 56rem;
  margin-inline: auto;
}

.faq-item {
  background: var(--color-base);
  border-radius: var(--radius-md);
  border: var(--card-border);
  padding: var(--space-4) var(--space-5);
}

.faq-item summary {
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
  padding-block: var(--space-2);
  color: var(--color-primary);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  float: inline-end;
  font-size: var(--fs-h3);
  color: var(--color-accent);
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
}

/* ----------------------------------------
   COMPARISON (services-hub)
   ---------------------------------------- */
.comparison-section {
  background: var(--color-base);
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

@media (min-width: 48em) {
  .comparison-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.comparison-col {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.comparison-col-axis {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
}

.comparison-col-axis h3 {
  color: var(--color-accent);
}

.comparison-list {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}

.comparison-list li {
  padding-block: var(--space-2);
  padding-inline-start: var(--space-5);
  position: relative;
  font-size: var(--fs-body);
}

.comparison-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

/* ----------------------------------------
   CITY / COUNTY / UNIQUENESS sections (programmatic-seo)
   ---------------------------------------- */
.city-section,
.county-section {
  background: var(--color-base);
}

.uniqueness-section {
  background: var(--color-surface);
}

.city-section p,
.county-section p,
.uniqueness-section p {
  max-inline-size: 60ch;
}

/* ----------------------------------------
   RETAINER (maintenance-repair)
   ---------------------------------------- */
.retainer-section {
  background: var(--color-base);
}

.retainer-section p {
  max-inline-size: 60ch;
}

.retainer-section .card-cta {
  margin-block-start: var(--space-5);
}