/* ============================================================
   Eggbeater Wordmark Lockup
   Pairs the photographic app icon (squircle) with "eggbeater"
   wordtype. Designed to replace the legacy logo_large.svg in
   nav/headers/footers across the system.

   Usage:
     <a class="eb-lockup">
       <img src="../assets/icon-512.png" alt="" class="eb-lockup__icon">
       <span class="eb-lockup__type">
         <span class="eb-lockup__word">eggbeater</span>
         <span class="eb-lockup__sub">water polo</span>
       </span>
     </a>

   Variants (apply to .eb-lockup):
     .eb-lockup--sm   compact (28px icon)  — app header, footer-small
     .eb-lockup--md   default (44px icon)  — marketing nav
     .eb-lockup--lg   hero (64px icon)     — splash, hero feature
     .eb-lockup--on-dark   white wordtype  — for use on royal/teal bg
     .eb-lockup--stacked   icon above type — splash screen treatment
   ============================================================ */

.eb-lockup,
a.eb-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--gray-900, #1a202c);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.eb-lockup__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 22.5%;       /* iOS squircle approximation */
  display: block;
  object-fit: cover;
  /* Subtle ring + drop on light backgrounds */
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.08),
    0 2px 6px rgba(13, 110, 114, 0.22),
    0 6px 18px rgba(13, 110, 114, 0.12);
}

.eb-lockup__type {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.eb-lockup__word {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.6px;
  color: var(--royal, #002868);
}

.eb-lockup__sub {
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-mid, #0d8a93);
}

/* ── Sizes ─────────────────────────────────────────────── */
.eb-lockup--sm { gap: 9px; }
.eb-lockup--sm .eb-lockup__icon { width: 28px; height: 28px; }
.eb-lockup--sm .eb-lockup__word { font-size: 16px; letter-spacing: -0.4px; }
.eb-lockup--sm .eb-lockup__sub  { font-size: 8.5px; letter-spacing: 0.2em; margin-top: 1px; }

.eb-lockup--md { gap: 12px; }
.eb-lockup--md .eb-lockup__icon { width: 44px; height: 44px; }
.eb-lockup--md .eb-lockup__word { font-size: 22px; letter-spacing: -0.6px; }
.eb-lockup--md .eb-lockup__sub  { font-size: 10.5px; }

.eb-lockup--lg { gap: 16px; }
.eb-lockup--lg .eb-lockup__icon {
  width: 64px; height: 64px;
  box-shadow:
    0 0 0 0.5px rgba(0,0,0,0.1),
    0 8px 22px rgba(15, 64, 68, 0.28);
}
.eb-lockup--lg .eb-lockup__word { font-size: 32px; letter-spacing: -1px; }
.eb-lockup--lg .eb-lockup__sub  { font-size: 12px; letter-spacing: 0.22em; margin-top: 2px; }

/* ── On-dark variant (royal/teal background) ───────────── */
.eb-lockup--on-dark .eb-lockup__word { color: #ffffff; }
.eb-lockup--on-dark .eb-lockup__sub  { color: var(--teal-bright, #4dd6d2); letter-spacing: 0.22em; opacity: 0.95; }
.eb-lockup--on-dark .eb-lockup__icon {
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.18),
    0 2px 8px rgba(0,0,0,0.25),
    0 8px 24px rgba(0,0,0,0.32);
}

/* ── Stacked variant (centered, icon above) ────────────── */
.eb-lockup--stacked {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.eb-lockup--stacked .eb-lockup__type {
  align-items: center;
  gap: 4px;
}

/* ── Wordmark only (no icon) ───────────────────────────── */
.eb-lockup--type-only .eb-lockup__icon { display: none; }