/* =============================================================================
   section-title-bar.css — reusable mobile section header bar
   Visible below 1024px only. Hidden on desktop (sidebar handles section nav).

   Usage: add .section-title-bar as the first child of .page-body on each
   section page. Populate .section-title with the current section name.

   Pages that use this component:
     Collection · Turn your route into art · About me · FAQs · Contact
   ============================================================================= */


/* ── Component shell ─────────────────────────────────────────────────────────── */

.section-title-bar {
  height: var(--layout-page-title-height);      /* 72px — enforced */
  width: 100%;
  background-color: var(--color-carbon);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                             /* prevent long titles from pushing height */
}

/* NOTE: an earlier pass added a `.section-title-bar--content` modifier here
 * (auto height + tight line-height) to close the gap below the title on
 * Commission/About/FAQs/Contact/The Artistic Process. That modifier has
 * been removed — it changed the title's own box height, which shifted the
 * title's *vertical position* relative to Collection (same component,
 * same markup, meant to render identically). The title's position on
 * these five pages must match Collection exactly, so this component now
 * has no per-page variants at all: every page that uses .section-title-bar
 * gets the same fixed 72px zone and the same centered title. The
 * title→first-content spacing requirement (32px, see page-header.css /
 * process.css / commission.css / contact.css / faq.css) is handled
 * entirely below the title, on the first content element itself — it
 * never touches this component. */


/* ── Title ───────────────────────────────────────────────────────────────────── */

.section-title {
  font-family: var(--font-family-base);
  font-size: 1.5rem;                            /* 24px */
  font-weight: 400;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-inline: var(--layout-margin);         /* 24px — prevents edge overflow */
}

/* ── Modifier: accent color (Collection, About me, Turn your route into art) ──
 * Opt-in per page — add "section-title--accent" alongside the base class on
 * only those three pages' <h1>. FAQs and Contact are NOT included and keep
 * the default white above. Matches .artwork-card__title /
 * .artwork-detail__title's gray-50 (#D2D2D2), one step lighter than the
 * Grey 100 (#B8B8B8) used for CTAs/metadata/dimensions, per the site-wide
 * typography color hierarchy pass.
 * ─────────────────────────────────────────────────────────────────────── */
.section-title--accent {
  color: var(--color-gray-50);                  /* #D2D2D2 */
}


/* ── Desktop: hidden (section identity handled by the sidebar) ───────────────── */

@media (min-width: 1024px) {
  .section-title-bar {
    display: none;
  }
}