/* ============================================================================
   PUBLIC SERVICES & SERVICE DETAIL STYLES
   ============================================================================

   Styles for services.html and service_detail.html.
   Built on design-system.css and public/base.css.

   ========================================================================== */

@import url('../design-system.css');

/* ============================================================================
   SERVICES LIST
   ============================================================================ */

/* Summary bar above the services grid */
.services-summary {
  max-width: 980px;
  margin-bottom: 14px;
}

.services-summary-text {
  margin-top: 10px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Pricing options applied banner */
.services-pricing-bar {
  margin-bottom: 14px;
  max-width: 980px;
}

.services-pricing-bar-title {
  font-size: 17px;
}

.services-pricing-pills {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Service row layout */
.service-row-layout {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Pricing in service card */
.service-price-amount {
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
  margin-top: 3px;
}

.service-price-discount {
  margin-top: 6px;
  color: var(--color-text-secondary);
}

.service-price-discount-gap {
  margin-left: 8px;
}

.service-price-enquiry {
  color: var(--color-text-secondary);
}

.service-card-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Category group header */
.service-group-header {
  margin-bottom: 0;
}

.service-group-header:first-of-type {
  margin-top: 0;
}

.service-group-header + * {
  margin-top: 0;
}

.service-group-title {
  font-size: 28px;
}

/* ============================================================================
   SERVICE DETAIL
   ============================================================================ */

/* Back button spacing */
.service-detail-back {
  margin-bottom: 14px;
}

/* Two-column layout */
.service-detail-layout {
  align-items: start;
}

/* Title in detail panel */
.service-detail-title {
  margin-top: 14px;
  font-size: clamp(28px, 4vw, 40px);
}

/* Aside: muted external booking note */
.service-aside-note {
  margin-top: 12px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Price block in aside */
.service-price-block {
  margin-top: 12px;
}

.service-price-large {
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  margin-top: 4px;
}

.service-price-struck {
  margin-top: 8px;
  color: var(--color-text-secondary);
}

.service-price-struck-gap {
  margin-left: 8px;
}

.service-price-pills {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.service-price-enquiry-aside {
  margin-top: 12px;
  color: var(--color-text-secondary);
}

.service-aside-actions {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}