/**
 * Title Section - Base Structure
 *
 * Component-specific layout for title headers.
 * Uses universal bg-layers system for background rendering.
 *
 * Layers are now provided by the shared bg-layers system:
 * - .bg-layers__base (z-index: 0)
 * - .bg-layers__pattern (z-index: 1)
 * - .bg-layers__overlay (z-index: 2)
 * - .bg-layers__content (z-index: 3)
 */
/* ==========================================================================
   Container
   ========================================================================== */
.title-section {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Minimum Heights
   ========================================================================== */
.title-section--min-height-sm {
  min-height: 200px;
}

.title-section--min-height-md {
  min-height: 250px;
}

.title-section--min-height-lg {
  min-height: 300px;
}

/* ==========================================================================
   Content Alignment (Horizontal)
   ========================================================================== */
.title-section--align-left .bg-layers__content {
  text-align: left;
}

.title-section--align-center .bg-layers__content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   Vertical Alignment
   ========================================================================== */
.title-section .bg-layers__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: inherit;
}

.title-section--valign-top .bg-layers__content {
  justify-content: flex-start;
  padding-top: 2rem;
}

.title-section--valign-center .bg-layers__content {
  justify-content: center;
}

.title-section--valign-bottom .bg-layers__content {
  justify-content: flex-end;
  padding-bottom: 2rem;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .title-section .bg-layers__base,
  .title-section .bg-layers__pattern,
  .title-section .bg-layers__overlay {
    transition: none;
  }
}

/*# sourceMappingURL=title-section.css.map */