/* Triple Goddess presentation and shared advice responsive rules. */

.bhw-goddess {
    background:
        linear-gradient(180deg, rgba(9, 12, 16, 0.72), rgba(12, 9, 16, 0.92)),
        url("../../media/master/triple-goddess-hero.jpg") center / cover fixed;
}

.bhw-goddess__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
    gap: var(--bhw-layout-grid-gap);
}

.bhw-goddess-tabs {
    display: flex;
    gap: var(--bhw-space-2);
}

.bhw-goddess-tabs button {
    min-height: var(--bhw-control-min-size);
    padding: var(--bhw-space-2) var(--bhw-space-4);
    border: var(--bhw-border-thin) solid var(--bhw-color-border);
    border-radius: var(--bhw-radius-pill);
    background: transparent;
    color: var(--bhw-color-text-secondary);
    font: inherit;
    cursor: pointer;
}

.bhw-goddess-tabs button[aria-selected="true"],
.bhw-goddess-tabs button:hover {
    border-color: var(--bhw-color-accent);
    background: var(--bhw-color-gold-wash);
    color: var(--bhw-color-text-primary);
}

.bhw-goddess-detail {
    display: grid;
    gap: var(--bhw-space-3);
    padding: var(--bhw-space-5);
    border: var(--bhw-border-thin) solid rgba(200, 167, 106, 0.24);
    border-radius: var(--bhw-radius-panel);
    background: rgba(6, 8, 11, 0.76);
}

.bhw-goddess-detail > * {
    margin: 0;
}

.bhw-goddess-detail > p:last-child {
    display: grid;
    gap: var(--bhw-space-1);
    padding-block-start: var(--bhw-space-3);
    border-block-start: var(--bhw-border-thin) solid var(--bhw-color-border);
}

.bhw-goddess-detail > p:last-child span {
    color: var(--bhw-color-text-secondary);
}

@media (max-width: 63.999rem) {
    .bhw-advice-portal__grid,
    .bhw-advice-chat__grid,
    .bhw-goddess__grid {
        grid-template-columns: 1fr;
    }

    .bhw-advice-portal__media {
        width: min(34rem, 100%);
        justify-self: center;
    }
}

@media (max-width: 51.249rem) {
    .bhw-advice-console > header,
    .bhw-advice-form__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .bhw-advice-form__meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 34.999rem) {
    .bhw-advice-message {
        max-width: 95%;
    }

    .bhw-goddess-tabs {
        flex-direction: column;
    }
}