/* =========================================================
   BRANDING SYSTEM — Logo marks, dividers, and visual assets
   ========================================================= */

/* ─────────────────────────────────────────────────────────
   Logo Components
   ───────────────────────────────────────────────────────── */

.brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.brand-logo img {
    height: auto;
    width: 100%;
    max-width: 100%;
}

/* Header logo (small, clean) */
.brand-logo--header {
    width: min(180px, 34vw);
    max-width: 180px;
    height: auto;
    flex: 0 0 auto;
}

.brand-logo--header img {
    width: 100%;
    max-height: 36px;
    object-fit: contain;
}

/* Footer logo (small, refined) */
.brand-logo--footer {
    max-width: 160px;
    height: auto;
}

.brand-logo--footer img {
    max-height: 32px;
    opacity: 0.88;
    transition: opacity var(--transition);
}

.brand-logo--footer:hover img {
    opacity: 1;
}

/* Post-centered logo (prominent, readable) */
.brand-logo--post {
    max-width: 140px;
    height: auto;
    margin: 0 auto;
}

.brand-logo--post img {
    max-height: 72px;
    filter: opacity(0.9);
    transition: filter var(--transition);
}

/* Full-size primary logo (for about, feature sections) */
.brand-logo--primary {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
}

.brand-logo--primary img {
    max-height: 400px;
}

/* Secondary logo (for book/preorder pages) */
.brand-logo--secondary {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
}

.brand-logo--secondary img {
    max-height: 400px;
}

/* Logo with tagline (for CTA sections, join pages) */
.brand-logo--tagline {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
}

.brand-logo--tagline img {
    max-height: 420px;
}

/* ─────────────────────────────────────────────────────────
   Symbol Marks (decorative and functional)
   ───────────────────────────────────────────────────────── */

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.brand-mark img {
    width: 100%;
    height: auto;
}

/* Hero mark (centered, medium size) */
.brand-mark--hero {
    max-width: 280px;
    width: 100%;
    margin: 0 auto 48px;
}

.brand-mark--hero img {
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}

/* Divider mark (small, inline) */
.brand-mark--divider {
    max-width: 140px;
    height: auto;
    margin: 48px auto;
    display: flex;
    justify-content: center;
}

.brand-mark--divider img {
    max-height: 120px;
    opacity: 0.72;
}

/* Events/classes mark (medium, statement) */
.brand-mark--events {
    max-width: 240px;
    height: auto;
    margin: 36px auto;
}

.brand-mark--events img {
    max-height: 220px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}

/* Floating/ambient mark (very subtle, background-adjacent) */
.brand-mark--ambient {
    position: absolute;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.brand-mark--ambient img {
    width: 100%;
    height: auto;
}

/* ─────────────────────────────────────────────────────────
   Section Dividers and Transitions
   ───────────────────────────────────────────────────────── */

.brand-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 64px 0;
    gap: 24px;
}

.brand-divider__mark {
    flex: 0 0 auto;
}

.brand-divider__line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--color-border) 20%,
        var(--color-border) 80%,
        transparent 100%
    );
}

/* ─────────────────────────────────────────────────────────
   CTA / Feature Artwork Block
   ───────────────────────────────────────────────────────── */

.brand-cta-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 64px 24px;
    background: linear-gradient(
        135deg,
        rgba(232,160,18,0.05) 0%,
        rgba(232,160,18,0.02) 100%
    );
    border: 1.5px solid rgba(232,160,18,0.15);
    border-radius: var(--radius-lg);
    text-align: center;
    margin: 64px 0;
}

.brand-cta-block__artwork {
    max-width: 480px;
    width: 100%;
}

.brand-cta-block__artwork img {
    max-height: 380px;
}

.brand-cta-block__content {
    max-width: 600px;
}

.brand-cta-block__title {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 16px;
}

.brand-cta-block__text {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 24px;
}

.brand-cta-block__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ─────────────────────────────────────────────────────────
   Responsive Behavior
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .brand-logo--header {
        width: min(140px, 45vw);
        max-width: 140px;
    }

    .brand-logo--header img {
        max-height: 28px;
    }

    .brand-logo--primary,
    .brand-logo--secondary,
    .brand-logo--tagline {
        max-width: 100%;
    }

    .brand-logo--primary img,
    .brand-logo--secondary img,
    .brand-logo--tagline img {
        max-height: 300px;
    }

    .brand-mark--hero {
        max-width: 200px;
        margin: 36px auto;
    }

    .brand-mark--divider {
        max-width: 100px;
        margin: 36px auto;
    }

    .brand-mark--divider img {
        max-height: 100px;
    }

    .brand-divider {
        margin: 48px 0;
    }

    .brand-cta-block {
        padding: 48px 20px;
        gap: 24px;
        margin: 48px 0;
    }

    .brand-cta-block__artwork img {
        max-height: 280px;
    }

    .brand-cta-block__title {
        font-size: clamp(1.3rem, 3.5vw, 1.75rem);
    }

    .brand-cta-block__actions {
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .brand-logo--header {
        width: min(120px, 50vw);
        max-width: 120px;
    }

    .brand-logo--primary,
    .brand-logo--secondary,
    .brand-logo--tagline {
        max-width: 100%;
    }

    .brand-logo--primary img,
    .brand-logo--secondary img,
    .brand-logo--tagline img {
        max-height: 240px;
    }

    .brand-mark--hero {
        max-width: 160px;
        margin: 28px auto;
    }

    .brand-mark--divider {
        max-width: 90px;
        margin: 28px auto;
    }

    .brand-cta-block {
        padding: 36px 16px;
        gap: 20px;
        margin: 36px 0;
    }

    .brand-cta-block__artwork img {
        max-height: 220px;
    }

    .brand-cta-block__title {
        font-size: 1.3rem;
    }

    .brand-cta-block__text {
        font-size: 0.95rem;
    }

    .brand-cta-block__actions {
        flex-direction: column;
        gap: 12px;
    }

    .brand-cta-block__actions .btn {
        width: 100%;
    }
}