/* ==========================================================================
 * 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
 * Hooks: --hds-section-header-copy-min (eylemler bu genişlikten önce alt satıra iner),
 *        --hds-section-header-eyebrow-color, --hds-section-header-panel-* (panel bölümünde)
 * Güncellendi: 23.10.2026 · eylemler yer yoksa alt satıra (flex-wrap) · 26.10.2026 dar ekranda metin payı yüksekliğe dönmez
 * Sürüm: 1.4.1
 * ========================================================================= */

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

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

/* Opt-in media slot (SectionHeader::media): başlık grubunun solunda. */
.hds-section-header__media {
  display: flex;
  flex: none;
  align-self: center;
}

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

/* Media varken metin bloğu esner; eylemler (varsa) sağda kalır (T5.3c düzeltmesi:
   önceden space-between metni ortaya / sağa itiyordu). */
.hds-section-header__media + .hds-section-header__copy {
  flex: 1 1 calc(var(--hds-section-header-copy-min, 14rem) - 4rem);
}

/* Yer yetmezse eylemler metni ezmez, alt satıra iner (23.10.2026): metin en az
   --hds-section-header-copy-min genişliğini korur. */
.hds-section-header__copy {
  flex: 1 1 var(--hds-section-header-copy-min, 14rem);
}

.hds-section-header__eyebrow {
  color: var(--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: var(--hds-section-header-title-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: var(--hds-section-header-description-size, 0.82rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.hds-section-header__actions {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.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 */

/* =========================================================================
 * >>> Field Section Header (SectionHeader::field() · T3.7, 2026-10-19)
 * Etiket / değer çifti: başlık küçük ve soluk (etiket), açıklama belirgin
 * (gerçek bilgi). compact ile birlikte kullanılabilir; ondan sonra gelir.
 * ========================================================================= */

.hds-section-header--field {
  padding-block: 0;
  gap: 0.15rem;
  min-width: 0;
}

.hds-section-header--field .hds-section-header__title {
  color: #66757f;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.hds-section-header--field .hds-section-header__description {
  margin: 0;
  overflow-wrap: anywhere;
  color: #16283a;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

/* <<< Field Section Header */

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

@media (max-width: 640px) {
  .hds-section-header { flex-direction: column; }
  /* Dikey dizilişte metnin genişlik payı (copy-min) yüksekliğe dönüşmesin (26.10.2026: boş 224px). */
  .hds-section-header__copy,
  .hds-section-header__media + .hds-section-header__copy { flex-basis: auto; }
  .hds-section-header__actions { width: 100%; }
  .hds-section-header__actions .hds-action-group { width: 100%; }
}

/* <<< Section Header Responsive */

/* =========================================================================
 * >>> Panel / Detail Section Header (SectionHeader::panel() / detail() · T4.4, 2026-10-19)
 * panel : yumuşak zeminli kutu (çalışma alanı başlığı). Hook:
 *         --hds-section-header-panel-surface (#f4f8fc); 25.10.2026: -panel-background (degrade de
 *         olabilir), -panel-border, -panel-accent (sol çizgi), -panel-radius; başlık üstü yazı
 *         rengi --hds-section-header-eyebrow-color.
 * detail: panel üstüne ızgara — üstte eyebrow, solda media (varsa), ortada
 *         başlık + açıklama, sağda eylemler dikey ortada; ince çerçeve.
 *         Hook: --hds-section-header-detail-border. Dar kapsayıcıda
 *         (tüketicinin container'ı ≤ 34rem) eylemler alta iner.
 * Dosya sonunda: base / compact / responsive kurallarından sonra gelir.
 * ========================================================================= */

.hds-section-header--panel {
  margin: 0;
  padding: 1rem 1.25rem;
  border: var(--hds-section-header-panel-border, 0);
  border-left: var(--hds-section-header-panel-accent, var(--hds-section-header-panel-border, 0));
  border-radius: var(--hds-section-header-panel-radius, 0.75rem);
  background: var(--hds-section-header-panel-background, var(--hds-section-header-panel-surface, #f4f8fc));
}

.hds-section-header--detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow actions"
    "title actions"
    "description actions";
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hds-section-header-detail-border, color-mix(in srgb, var(--color-primary, #176da6) 12%, #dce4ea));
}

.hds-section-header--detail:has(> .hds-section-header__media) {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow eyebrow actions"
    "media title actions"
    "media description actions";
}

.hds-section-header--detail .hds-section-header__copy {
  display: contents;
}

.hds-section-header--detail .hds-section-header__eyebrow {
  grid-area: eyebrow;
  margin-bottom: 0.45rem;
}

.hds-section-header--detail .hds-section-header__media {
  grid-area: media;
  margin-right: 0.15rem;
}

.hds-section-header--detail .hds-section-header__media .hds-visual {
  --hds-visual-size: 3rem;
}

.hds-section-header--detail .hds-section-header__title {
  grid-area: title;
  align-self: end;
  font-size: 1.3rem;
}

.hds-section-header--detail .hds-section-header__description {
  grid-area: description;
  align-self: start;
}

.hds-section-header--detail .hds-section-header__actions {
  grid-area: actions;
  align-self: center;
}

@container (max-width: 34rem) {
  .hds-section-header--detail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "description"
      "actions";
  }

  .hds-section-header--detail:has(> .hds-section-header__media) {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "eyebrow eyebrow"
      "media title"
      "media description"
      "actions actions";
  }

  .hds-section-header--detail .hds-section-header__actions {
    margin-top: 0.75rem;
  }
}

/* <<< Panel / Detail Section Header */

/* =========================================================================
 * >>> Tone (SectionHeader::tone() · T5.3c, 2026-10-19)
 * Panel yüzeyi ve media'daki IconControl rozeti ton paletinden
 * (core/variables.css --hds-tone-*).
 * ========================================================================= */

.hds-section-header--tone-neutral { --hds-section-header-panel-surface: var(--hds-tone-neutral-surface); --hds-icon-control-badge-surface: var(--hds-tone-neutral-soft); --hds-icon-control-badge-ink: var(--hds-tone-neutral-ink); }
.hds-section-header--tone-info    { --hds-section-header-panel-surface: var(--hds-tone-info-surface); --hds-icon-control-badge-surface: var(--hds-tone-info-soft); --hds-icon-control-badge-ink: var(--hds-tone-info-ink); }
.hds-section-header--tone-success { --hds-section-header-panel-surface: var(--hds-tone-success-surface); --hds-icon-control-badge-surface: var(--hds-tone-success-soft); --hds-icon-control-badge-ink: var(--hds-tone-success-ink); }
.hds-section-header--tone-warning { --hds-section-header-panel-surface: var(--hds-tone-warning-surface); --hds-icon-control-badge-surface: var(--hds-tone-warning-soft); --hds-icon-control-badge-ink: var(--hds-tone-warning-ink); }
.hds-section-header--tone-danger  { --hds-section-header-panel-surface: var(--hds-tone-danger-surface); --hds-icon-control-badge-surface: var(--hds-tone-danger-soft); --hds-icon-control-badge-ink: var(--hds-tone-danger-ink); }
.hds-section-header--tone-accent  { --hds-section-header-panel-surface: var(--hds-tone-accent-surface); --hds-icon-control-badge-surface: var(--hds-tone-accent-soft); --hds-icon-control-badge-ink: var(--hds-tone-accent-ink); }

/* <<< Tone */