/* Business hub + business page. Requires tokens.css and category.css first.
   The business chat reuses consergeria.css chat classes inside .business-chat. */

/* ---------- Hub category chips ---------- */

.filters {
    margin: 0 0 28px;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.filter-label {
    flex-shrink: 0;
    color: var(--gold);
    font-size: var(--fs-xs, 11px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        color var(--motion-fast) ease,
        border-color var(--motion-fast) ease,
        background var(--motion-fast) ease;
}

.filter-btn:hover {
    color: var(--gold-light);
    border-color: var(--gold-border-strong);
    background: linear-gradient(180deg, rgba(184, 148, 106, .16), rgba(184, 148, 106, .06));
}

.filter-btn.active {
    color: var(--text-on-gold, #111);
    border-color: rgba(184, 148, 106, .55);
    background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
}

/* ---------- Business page hero ---------- */

.business-hero {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 36px;
}

.business-hero-main {
    min-width: 0;
}

.business-hero h1 {
    margin: 14px 0 10px;
    font-size: clamp(40px, 5.4vw, 68px);
}

.business-hero .subtitle {
    margin-bottom: 18px;
}

.business-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.business-meta .status-pill {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: rgba(255, 255, 255, .78);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.business-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.business-hero-logo {
    flex-shrink: 0;
    width: 180px;
    height: 180px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.business-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Gallery ---------- */

.business-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 44px;
}

.business-gallery-item {
    margin: 0;
    height: 220px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

.business-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease-out);
}

.business-gallery-item:hover img {
    transform: scale(1.05);
}

/* ---------- Sections ---------- */

.business-section {
    margin-bottom: 48px;
}

.business-section .eyebrow {
    margin-bottom: 14px;
}

.business-description p {
    max-width: 760px;
    color: var(--muted-soft);
    font-size: 16px;
    line-height: 1.75;
}

/* ---------- Team ---------- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.team-card {
    padding: 22px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #1A1C20, #111316);
}

.team-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(184, 148, 106, .3);
    margin-bottom: 14px;
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-card h3 {
    margin: 0 0 4px;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 600;
}

.team-role {
    color: var(--gold-light);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.team-card p {
    margin: 0;
    font-size: 14px;
}

/* ---------- Offerings ---------- */

.offerings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.offering-card {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, #1A1C20, #111316);
    scroll-margin-top: 96px;
    transition:
        transform var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out);
}

.offering-business-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: var(--gold-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
}

.offering-business-line .offering-flag {
    font-size: 9px;
}

.offering-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold-border);
}

.offering-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.offering-card h3 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
}

.offering-flag {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(184, 148, 106, .4);
    color: var(--gold-light);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.offering-card p {
    margin: 0 0 16px;
    font-size: 14px;
}

.offering-card .offering-rates {
    margin: 0 0 16px;
}

.offering-foot {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-top: auto;
    margin-bottom: 4px;
}

.offering-foot .price {
    margin-bottom: 0;
}

.offering-duration {
    color: var(--muted);
    font-size: 13px;
}

.offering-ask {
    align-self: flex-start;
}

/* ---------- Business chat ---------- */

.business-chat-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 40px);
}

.business-chat-intro {
    max-width: 640px;
    margin: 0 0 22px;
    color: var(--muted);
    line-height: 1.7;
}

.business-chat-shell {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top left, rgba(184, 148, 106, .05), transparent 42%),
        linear-gradient(180deg, rgba(16, 17, 20, .92), rgba(8, 9, 11, .98));
    overflow: hidden;
}

.business-thread {
    max-height: 480px;
    min-height: 220px;
    padding: 26px 28px 18px;
}

.business-composer {
    padding: 14px 28px 22px;
}

.business-chat-consent {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .38);
    font-size: 12px;
    line-height: 1.5;
}

/* Offering cards inside the chat thread */

.chat-offering-rail {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.chat-offering-card {
    flex: 1 1 240px;
    max-width: 340px;
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(184, 148, 106, .25);
    background: rgba(21, 23, 26, .92);
}

.chat-offering-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.chat-offering-card h3 {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.chat-offering-card p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.chat-offering-foot {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.chat-offering-foot .price {
    margin-bottom: 0;
    font-size: 14px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .business-hero {
        flex-direction: column-reverse;
    }

    .business-hero-logo {
        width: 120px;
        height: 120px;
    }

    .business-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid,
    .offerings-grid {
        grid-template-columns: 1fr;
    }

    .business-thread {
        padding: 20px 16px 14px;
    }

    .business-composer {
        padding: 12px 16px 18px;
    }
}

@media (max-width: 560px) {
    .business-gallery {
        grid-template-columns: 1fr;
    }

    .business-gallery-item {
        height: 180px;
    }
}