/* ==========================================================================
 * Proje: HIZIRBEY Portal
 * Paket: HIZIRBEY Design System
 * Bileşen: SectionHeader
 * Dosya: themes/default/assets/css/hds/components/section-header/base.css
 * Açıklama: Canonical section heading composition; page ve Inspector
 *           header yüzeyleri ayrı owner'lardır.
 * Ownership: Public HDS SectionHeader component presentation
 * Root: .hds-section-header
 * Children: copy, eyebrow, title, description, actions
 * Dependency: HDS ActionGroup
 * Güncellendi: 12.08.2026
 * Sürüm: 1.0.0
 * ========================================================================= */

/* =========================================================================
 * >>> Section Header Base
 * ========================================================================= */

.hds-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
  padding-block: 0.75rem;
}

.hds-section-header__copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.hds-section-header__eyebrow {
  color: var(--color-primary, #176da6);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  line-height: 1.25;
  text-transform: uppercase;
}

.hds-section-header__title {
  margin: 0;
  min-width: 0;
  color: var(--color-text, #24384a);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.hds-section-header__description {
  margin: 0;
  max-width: 70ch;
  color: var(--color-text-muted, #66757f);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.hds-section-header__actions {
  flex: 0 0 auto;
  min-width: 0;
}

.hds-section-header__actions .hds-action-group {
  flex-wrap: wrap;
}

/* <<< Section Header Base */

/* =========================================================================
 * >>> Compact Section Header
 * ========================================================================= */

.hds-section-header--compact {
  gap: 0.65rem;
  padding-block: 0.5rem;
}

.hds-section-header--compact .hds-section-header__title { font-size: 0.9rem; }
.hds-section-header--compact .hds-section-header__description { font-size: 0.75rem; }

/* <<< Compact Section Header */

/* =========================================================================
 * >>> Section Header Responsive
 * ========================================================================= */

@media (max-width: 640px) {
  .hds-section-header { flex-direction: column; }
  .hds-section-header__actions { width: 100%; }
  .hds-section-header__actions .hds-action-group { width: 100%; }
}

/* <<< Section Header Responsive */