/* ═══════════════════════════════════════════════════════════════════════
   BLOOS ECOSYSTEM — LOCKUP COMPONENT
   Single source of truth for "Mark + Wordmark" across every surface.

   Anatomy:
     [mark]  WORDMARK  italic-suffix
       │       │           └─ Fraunces italic, navy (ruhig im Multi-Brand-Setup)
       │       └─ Fraunces 500, navy
       └─ Favicon-PNG, runde Ecken, Domain-Akzent als Schimmer-Ring optional

   Sizes (height of mark):
     · sm = 24px   — utility, footer, dense lists
     · md = 28px   — site header (default)
     · lg = 40px   — section header, hero subline
     · xl = 64px   — brand-marks-card, marketing tiles

   Italic colour rule:
     Wir bleiben bei Navy für italic auf hellem Background.
     Auf dunklem Background (data-on="dark") schaltet italic auf accent-glow,
     damit es nicht absäuft. Das ist ein Kontrast-Move, kein Brand-Move.
   ═══════════════════════════════════════════════════════════════════════ */

.lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: inherit;
    line-height: 1;
}

.lockup__mark {
    flex: 0 0 auto;
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: cover;
    background: var(--navy);
    /* very subtle inner highlight to keep favicon edge crisp on cloud bg */
    box-shadow: 0 0 0 1px rgba(13, 35, 64, 0.06);
}

.lockup__word {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: -0.018em;
    color: var(--navy);
    font-variation-settings: 'opsz' 36, 'SOFT' 30;
    white-space: nowrap;
}

.lockup__word em {
    font-style: italic;
    font-weight: 400;
    color: var(--navy);
    font-variation-settings: 'opsz' 36, 'SOFT' 100;
}

/* ── Sizes ───────────────────────────────────────────────────────────── */

.lockup--sm .lockup__mark   { width: 24px; height: 24px; border-radius: 6px; }
.lockup--sm .lockup__word   { font-size: 0.95rem; }
.lockup--sm                 { gap: 0.5rem; }

.lockup--md .lockup__mark   { width: 28px; height: 28px; border-radius: 7px; }
.lockup--md .lockup__word   { font-size: 1.1rem; }

.lockup--lg .lockup__mark   { width: 40px; height: 40px; border-radius: 9px; }
.lockup--lg .lockup__word   { font-size: 1.4rem; font-variation-settings: 'opsz' 60, 'SOFT' 30; }
.lockup--lg                 { gap: 0.75rem; }

.lockup--xl                 { flex-direction: column; align-items: center; gap: 0.85rem; }
.lockup--xl .lockup__mark   { width: 64px; height: 64px; border-radius: 12px; box-shadow: var(--shadow-card); }
.lockup--xl .lockup__word   { font-size: 1.15rem; font-variation-settings: 'opsz' 36, 'SOFT' 30; }

/* ── Dark surfaces ───────────────────────────────────────────────────── */
/* Use [data-on="dark"] when the lockup sits on navy/navy-deep.
   Italic gets accent-glow to keep contrast; word goes white. */

.lockup[data-on="dark"] .lockup__word    { color: white; }
.lockup[data-on="dark"] .lockup__word em { color: var(--accent-glow); }
.lockup[data-on="dark"] .lockup__mark    { box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }

/* ── Optional sub-line (only used in card/spec contexts) ─────────────── */
/* Lockup itself has no subtitle. The subtitle is *context*, rendered as
   sibling .lockup-meta — kept here so card layouts share one styling.   */

.lockup-meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fg3);
    letter-spacing: 0.04em;
    margin-top: 6px;
    text-align: center;
}