/*
 * .c-container and .c-section: the page frame. One pair of equal outer margins (--md-gutter) everywhere;
 * sections are separated by space and by a step in tone, never by a line.
 *
 *   <section class="c-section c-section--alt" aria-labelledby="cat-title">
 *     <div class="c-container">
 *       <div class="c-section__header">
 *         <h2 class="c-section__title" id="cat-title">Todo lo que hay en tu comuna</h2>
 *         <p class="c-section__lede">Barberías, fritos, tiendas y más, a un toque de WhatsApp.</p>
 *       </div>
 *       ...content...
 *     </div>
 *   </section>
 *
 * Surfaces: default (white), --alt (surface-alt: cards flip to white), --dark (deep green brand block,
 * set data-surface="dark" so the focus ring turns yellow). Section heading hierarchy: title (Nunito
 * black), then one lede; no label above the title.
 */
.c-container {
  inline-size: 100%;
  max-inline-size: calc(var(--md-container) + 2 * var(--md-gutter));
  margin-inline: auto;
  padding-inline: var(--md-gutter);
}

.c-container--narrow {
  max-inline-size: calc(var(--md-container-narrow) + 2 * var(--md-gutter));
}

.c-section {
  padding-block: var(--md-space-8);
  background: var(--md-color-surface);
  color: var(--md-color-ink);
}

@media (min-width: 64em) {
  .c-section {
    padding-block: var(--md-space-9);
  }
}

.c-section--alt {
  background: var(--md-color-surface-alt);
}

.c-section--dark {
  background: var(--md-color-primary);
  color: var(--md-color-on-primary);
}

.c-section--tight {
  padding-block: var(--md-space-7);
}

.c-section__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--md-space-3);
  max-inline-size: 40rem;
  margin-block-end: var(--md-space-7);
}

.c-section__title {
  /* Two lines or fewer at every width. */
  max-inline-size: 16ch;
}

/* The accent trazo under a title: a short rounded stroke, decorative. */
.c-section__title::after {
  content: '';
  display: block;
  inline-size: 3.5rem;
  block-size: 0.5rem;
  margin-block-start: var(--md-space-3);
  border-radius: var(--md-radius-full);
  background: var(--md-color-accent);
}

.c-section--dark .c-section__title::after {
  background: var(--md-color-action);
}

.c-section__lede {
  max-inline-size: 36rem;
  font-size: var(--md-font-size-lg);
  color: var(--md-color-ink-soft);
}

.c-section--dark .c-section__lede {
  color: var(--md-color-on-primary);
}

/* Vertical rhythm helper for the content of a section. */
.c-stack {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-4);
}

.c-stack--loose {
  gap: var(--md-space-6);
}