/* CCS_SECTIONS_MARKER
   Chamathka Cab Service — section primitives.
   Snippet: "CCS Section Primitives" | group: Shared Styles | type: css | run_at: wp_head
   Ported from the design's layout.css + the chip component. Every section block
   leans on these, so they ship once rather than inside each section stylesheet. */

/* --- 1. Section shell ---------------------------------------------------- */
.ccs-section {
  position: relative;
  padding-block: var(--wp--custom--section-padding-y);
}

.ccs-section.ccs-section--tight {
  padding-block: var(--wp--custom--section-padding-y-tight);
}

.ccs-section.ccs-section--flush-top {
  padding-top: 0;
}

.ccs-section.ccs-section--muted {
  background-color: var(--wp--preset--color--surface-muted);
}

.ccs-section.ccs-section--inverse {
  background-color: var(--wp--preset--color--surface-inverse);
  color: var(--wp--preset--color--base);
}

.ccs-section.ccs-section--black {
  background-color: var(--wp--preset--color--black);
  color: var(--wp--preset--color--base);
}

.ccs-section--inverse h2,
.ccs-section--inverse h3,
.ccs-section--inverse h4,
.ccs-section--black h2,
.ccs-section--black h3,
.ccs-section--black h4 {
  color: var(--wp--preset--color--base);
}

/* A hairline that separates two same-colour sections. */
.ccs-section.ccs-section--ruled {
  border-top: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
}

/* --- 2. Section headings ------------------------------------------------- */
.ccs-section-head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}

.ccs-section-head.ccs-section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Heading on the left, supporting paragraph on the right. */
.ccs-section-head.ccs-section-head--split {
  display: grid;
  gap: var(--wp--preset--spacing--50) var(--wp--custom--grid-gap);
  max-width: none;
  align-items: end;
}

@media (min-width: 900px) {
  .ccs-section-head.ccs-section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.ccs-section-head__title {
  margin: 0 0 var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: var(--wp--custom--weight-black);
  letter-spacing: var(--wp--custom--tracking-tight);
  line-height: var(--wp--custom--leading-heading);
  color: var(--wp--preset--color--contrast);
}

.ccs-section-head__lead {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--lg);
  line-height: var(--wp--custom--leading-relaxed);
  max-width: 58ch;
}

.ccs-section--inverse .ccs-section-head__lead,
.ccs-section--black .ccs-section-head__lead {
  color: var(--wp--custom--text-inverse-muted);
}

.ccs-section-head--center .ccs-section-head__lead {
  margin-inline: auto;
}

/* On dark sections the brand red is lightened so the small uppercase label
   keeps a readable contrast ratio. The rule before it stays brand red. */
.ccs-section--inverse .ccs-eyebrow,
.ccs-section--black .ccs-eyebrow {
  color: var(--wp--preset--color--accent-ink-inverse);
}

.ccs-eyebrow.ccs-eyebrow--center {
  justify-content: center;
}

/* --- 3. Chips ------------------------------------------------------------ */
.ccs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
  padding: 0.4rem var(--wp--preset--spacing--30);
  border: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius-pill);
  background-color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--weight-medium);
  line-height: 1.2;
  color: var(--wp--preset--color--muted);
}

.ccs-chip.ccs-chip--inverse {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--wp--custom--border-inverse);
  color: var(--wp--custom--text-inverse-muted);
}

.ccs-chip.ccs-chip--accent {
  border-color: transparent;
  background-color: var(--wp--preset--color--accent-fill);
  color: var(--wp--preset--color--base);
}

.ccs-chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20);
}

/* --- 4. Generic grids ---------------------------------------------------- */
.ccs-grid {
  display: grid;
  gap: var(--wp--custom--grid-gap);
}

@media (min-width: 640px) {
  .ccs-grid.ccs-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .ccs-grid.ccs-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .ccs-grid.ccs-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ccs-grid.ccs-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Two columns where one side can be made the wider of the pair. */
.ccs-split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .ccs-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ccs-split.ccs-split--text-narrow {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  }
  .ccs-split.ccs-split--media-narrow {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
  .ccs-split.ccs-split--reverse > :first-child {
    order: 2;
  }
}

/* --- 5. Scroll reveal ---------------------------------------------------
   Progressive enhancement: without the .ccs-js class on <html> the content
   is simply visible, so the page never depends on JavaScript to be read. */
.ccs-js .ccs-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--wp--custom--duration-reveal) var(--wp--custom--ease-out),
    transform var(--wp--custom--duration-reveal) var(--wp--custom--ease-out);
}

.ccs-js .ccs-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .ccs-js .ccs-reveal {
    opacity: 1;
    transform: none;
  }
}