/**
 * Hero Card Component
 */

.c-hero-card {
    height: var(--c-hero-card-height, 100svh);
    min-height: var(--c-hero-card-min-height, 0);
    max-height: var(--c-hero-card-max-height, none);
    position: relative;
    overflow: hidden;
}

.c-hero-card__background {
    position: absolute;
    inset: var(--c-hero-card-background-inset, 0.5em);
    overflow: hidden;
    border-radius: var(--c-hero-card-background-radius, 0.375em);
    z-index: 0;
}

.c-hero-card__background-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-hero-card__card {
    width: var(--c-hero-card-card-width, 23.5em);
    height: var(--c-hero-card-card-height, auto);
    min-height: var(--c-hero-card-card-min-height, 0);
    background: var(--c-hero-card-card-background, var(--color-6));
    color: var(--c-hero-card-card-color, var(--color-2));
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: var(--c-hero-card-card-radius, 0.375em);
    display: var(--c-hero-card-card-display, flex);
    flex-direction: var(--c-hero-card-card-flex-direction, column);
    will-change: var(--c-hero-card-card-will-change, auto);
}

.c-hero-card__card-figure,
.c-hero-card__card-spacer {
    display: block;
    width: var(--c-hero-card-image-frame-width, calc(22.5em + 1em));
    height: var(--c-hero-card-image-frame-height, calc(28.125em + 1em));
    margin: var(--c-hero-card-image-frame-margin, 0 auto);
    padding: var(--c-hero-card-image-frame-padding, 0.5em);
}

.c-hero-card__card-figure {
    color: inherit;
    text-decoration: none;
}

.c-hero-card__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--c-hero-card-image-radius, 0.375em);
}

.c-hero-card__card-copy {
    flex: var(--c-hero-card-copy-flex, 0 0 auto);
    min-height: var(--c-hero-card-copy-min-height, 0);
    padding: var(--c-hero-card-copy-padding, 1.25em 1.25em 1em);
    display: flex;
    align-items: var(--c-hero-card-copy-align-items, center);
    justify-content: center;
    text-align: center;
}

.c-hero-card__card-copy:not(:has(.c-hero-card__card-eyebrow)):not(:has(.c-hero-card__card-button)) {
    align-items: var(--c-hero-card-copy-title-only-align-items, flex-end);
    min-height: var(--c-hero-card-copy-title-only-min-height, 7em);
}

.c-hero-card__card-copy:not(:has(.c-hero-card__card-eyebrow)):not(:has(.c-hero-card__card-button)) .c-hero-card__card-title {
    max-width: var(--c-hero-card-title-only-max-width, 11em);
}

.c-hero-card__card-copy-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625em;
    max-width: var(--c-hero-card-copy-inner-max-width, 18em);
}

.c-hero-card__card-title {
    max-width: var(--c-hero-card-title-max-width, 18em);
}

.c-hero-card__card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--color-2);
    color: var(--color-1);
    text-decoration: none;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.c-hero-card__card-button:hover,
.c-hero-card__card-button:focus-visible {
    background: #383B3D;
}

.c-hero-card__card-button:focus-visible {
    outline: 2px solid var(--color-5);
    outline-offset: 2px;
}

@media screen and (max-width: 1024px) {
    .c-hero-card {
        --c-hero-card-background-inset: 0.1875em;
        --c-hero-card-background-radius: 0.375em;
        --c-hero-card-card-width: 12.5em;
        --c-hero-card-card-height: auto;
        --c-hero-card-card-min-height: 0;
        --c-hero-card-image-frame-width: calc(12em + 0.5em);
        --c-hero-card-image-frame-height: calc(15em + 0.5em);
        --c-hero-card-image-frame-padding: 0.25em;
        --c-hero-card-image-radius: 0.25em;
        --c-hero-card-copy-min-height: 0;
        --c-hero-card-copy-title-only-min-height: 4.5em;
        --c-hero-card-title-only-max-width: 9em;
        --c-hero-card-copy-inner-max-width: 10em;
        --c-hero-card-title-max-width: 10em;
        --c-hero-card-copy-padding: 1em 0.75em 0.75em;
    }
}