/* =================================
   Space Vanta Theme 1.0
   DNA: mobile extension strip (Vision / Privilege)
   Path: public/header/dna/mobile-strip.css

   Extension of the header on mobile. Hidden on desktop, and hidden when
   the header condenses on scroll (follow state) to save screen height.
   The Privilege shard / shape reuse the .sv-priv__* rules in featured.css.
   ================================= */

.sv-header__strip { display: none; }

@media (max-width: 900px) {

  .sv-header__strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    padding: 2px 12px 10px;
  }

  .sv-header.is-condensed .sv-header__strip { display: none; }

  .sv-strip__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--sv-ink);
    white-space: nowrap;
  }
  .sv-strip__item > :not(.sv-priv__shape):not(.sv-priv__shard) { position: relative; z-index: 2; }

  /* Vision: silver plate with cut corners */
  .sv-strip__vision::before,
  .sv-strip__vision::after {
    content: "";
    position: absolute;
    z-index: 0;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  }
  .sv-strip__vision::before {
    inset: 0;
    background: linear-gradient(135deg, #ffffff 0%, #c9cbd1 45%, #f6f4f0 100%);
  }
  .sv-strip__vision::after {
    inset: 1px;
    background: linear-gradient(135deg, #fffefc 0%, #f6f1e8 60%, #ebe4d7 100%);
  }
  .sv-strip__vision .sv-icon-vision { width: 34px; height: 21px; }

  /* Privilege: same chamfered metal tag as desktop */
  .sv-strip__privilege {
    filter: drop-shadow(0 5px 9px rgba(29, 107, 255, 0.16)) drop-shadow(0 1px 1px rgba(70, 48, 24, 0.12));
  }
  .sv-strip__privilege .sv-icon-gem { width: 16px; height: 16px; flex: none; }
  .sv-strip__tag {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sv-muted);
  }
  .sv-strip__privilege[data-state="member"] .sv-strip__label { display: none; }
  .sv-strip__privilege[data-state="member"] .sv-strip__tag {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--sv-ink);
  }
  .sv-strip__privilege[data-state="member"] .sv-priv__shape::after {
    box-shadow: 0 0 14px var(--sv-blue-glow), 0 0 4px var(--sv-blue);
  }
}