/* =============================================================================
   Brand logo — monochrome via CSS mask-image
   SVG sources live in /assets/img/. Fill follows --color-ink (DESIGN.md Ink
   #1d1d1f) on light surfaces; --dark and --azure modifiers re-color the mask.
   Email templates keep direct <img> with PNG fallbacks (mask-image is not
   reliable across mail clients).
   ============================================================================= */

.brand-logo {
    display: inline-block;
    background-color: var(--color-ink, var(--app-text, #1d1d1f));
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    width: 200px;
    height: 42px;
}

/* Variant: text lockup with icon (logo_testo_icona) — default */
.brand-logo,
.brand-logo--lockup {
    -webkit-mask-image: url(/assets/img/logo_testo_icona.svg);
            mask-image: url(/assets/img/logo_testo_icona.svg);
    aspect-ratio: 490 / 100;
}

/* Variant: wordmark only (logo_testo) */
.brand-logo--text {
    -webkit-mask-image: url(/assets/img/logo_testo.svg);
            mask-image: url(/assets/img/logo_testo.svg);
    aspect-ratio: 640 / 100;
}

/* Variant: icon mark only (logo_icona) */
.brand-logo--mark {
    -webkit-mask-image: url(/assets/img/logo_icona.svg);
            mask-image: url(/assets/img/logo_icona.svg);
    aspect-ratio: 1 / 1;
    width: 42px;
    height: 42px;
}

/* Color modifiers */
.brand-logo--dark   { background-color: #ffffff; }
.brand-logo--azure  { background-color: var(--app-brand, #0071e3); }

/* Size modifiers */
.brand-logo--sm { width: 140px; height: 30px; }
.brand-logo--lg { width: 280px; height: 58px; }
.brand-logo--xl { width: 360px; height: 76px; }

/* Context-specific size overrides (paired with admin.css surfaces) */
.brand-band__logo  { height: 36px; width: 176px; }     /* invite/accept + unsubscribe */
.public-hero__logo { height: 80px; width: 392px; }     /* home hero, 490/100 at 80px */
.login-brand .brand-logo { height: 44px; width: 216px; } /* auth login */