/* ============================================================
   V2 — Card head (Pattern 02 head)
   ============================================================
   Заголовкова зона картки сутності: eyebrow → h1 → meta-row, з action-кнопками
   справа. Сидить над .v2-tabs у Pattern 02.

   Структура:
     <header class="v2-card-head">
       <div class="v2-card-head-row">
         <div class="v2-card-title-group">
           <div class="v2-card-eyebrow">
             <a href="...">← Назад</a>
             <span class="v2-card-eyebrow-sep">·</span>
             <span>ID 0193-fa…</span>
           </div>
           <h1 class="v2-card-title">Ковальчук Софія Олександрівна</h1>
           <div class="v2-card-meta">
             <span class="v2-card-meta-item"><span class="k">Заклад:</span><span class="v">SGE</span></span>
             …
             <span class="v2-badge v2-badge-success"><span class="v2-badge-dot"></span>Активний</span>
           </div>
         </div>
         <div class="v2-card-actions">
           <button class="v2-btn v2-btn-secondary">Скасувати</button>
           <button class="v2-btn v2-btn-primary">Зберегти</button>
         </div>
       </div>
     </header>
   ============================================================ */

/* box-sizing reset */
.v2-card-head,
.v2-card-head *,
.v2-card-head *::before,
.v2-card-head *::after {
    box-sizing: border-box;
}

/* === Container === */
.v2-card-head {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--s-6);
}

/* === Row: title group + actions === */
.v2-card-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-7);
    flex-wrap: wrap;
}

/* === Title group (eyebrow + h1 + meta) === */
.v2-card-title-group {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-width: 0;
    flex: 1;
}

/* === Eyebrow (back-link / ID / breadcrumb hint) === */
.v2-card-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    line-height: var(--leading-tight);
}

.v2-card-eyebrow a {
    color: var(--text-tertiary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 4px;
    margin: -1px -4px;
    border-radius: var(--r-xs);
    transition: background 0.12s, color 0.12s;
}
.v2-card-eyebrow a:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.v2-card-eyebrow .v2-i {
    width: 11px;
    height: 11px;
}

.v2-card-eyebrow-sep {
    color: var(--text-muted);
    user-select: none;
}

/* === Title (h1) === */
.v2-card-title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    line-height: var(--leading-tight);
    color: var(--text-primary);
    /* overflow-wrap для довгих імен/назв без розпирання row */
    overflow-wrap: anywhere;
}

/* === Meta row (k/v + бейджі) === */
.v2-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3) var(--s-6);
    margin-top: var(--s-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.v2-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
}

.v2-card-meta-item .k {
    color: var(--text-tertiary);
}

.v2-card-meta-item .v {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
}

/* Розділювач між k/v-парами (не обов'язковий, тільки коли явно вставлений) */
.v2-card-meta-sep {
    color: var(--border-default);
    user-select: none;
}

/* === Actions (справа) === */
.v2-card-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
}

/* === Variant: borderless (без нижньої розділової лінії) === */
.v2-card-head-borderless {
    border-bottom: none;
    padding-bottom: 0;
}

/* === Variant: with-tabs — менший margin-bottom бо нижче .v2-tabs === */
.v2-card-head-with-tabs {
    margin-bottom: 0;
    padding-bottom: var(--s-5);
    border-bottom: 0;
}

/* === Density === */
[data-v2-density="compact"] .v2-card-head {
    gap: var(--s-4);
    padding-bottom: var(--s-5);
    margin-bottom: var(--s-5);
}
[data-v2-density="compact"] .v2-card-title {
    font-size: var(--text-xl);
}
[data-v2-density="compact"] .v2-card-meta {
    font-size: var(--text-xs);
    gap: var(--s-2) var(--s-5);
}

[data-v2-density="spacious"] .v2-card-head {
    gap: var(--s-6);
    padding-bottom: var(--s-7);
    margin-bottom: var(--s-7);
}
[data-v2-density="spacious"] .v2-card-title {
    font-size: var(--text-3xl);
}

@media (max-width: 720px) {
    .v2-card-head-row {
        gap: var(--s-3);
    }

    .v2-card-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--s-2);
        justify-content: flex-start;
    }
}