/* ASE v0.3.2 hero, supporting, and featured-resource media. */
.ase-site .ase-hero {
    padding-block: clamp(3.5rem, 6.5vw, 6.25rem);
    background: var(--ase-surface);
}

.ase-site .ase-hero--tonal {
    overflow: hidden;
    background: var(--ase-surface);
    background:
        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--ase-soft) 82%, transparent) 0, transparent 31%),
        radial-gradient(circle at 72% 104%, color-mix(in srgb, var(--ase-accent) 9%, transparent) 0, transparent 35%),
        linear-gradient(135deg, color-mix(in srgb, var(--ase-surface) 92%, var(--ase-card)), var(--ase-surface));
}

.ase-site .ase-hero--tonal::before,
.ase-site .ase-hero--tonal::after {
    position: absolute;
    border-radius: 999px;
    content: "";
    pointer-events: none;
}

.ase-site .ase-hero--tonal::before {
    top: -9rem;
    right: -7rem;
    width: clamp(18rem, 35vw, 34rem);
    height: clamp(18rem, 35vw, 34rem);
    border: 1px solid color-mix(in srgb, var(--ase-accent) 12%, transparent);
}

.ase-site .ase-hero--tonal::after {
    right: 18%;
    bottom: -11rem;
    width: 23rem;
    height: 23rem;
    background: color-mix(in srgb, var(--ase-soft) 48%, transparent);
    filter: blur(1px);
}

.ase-site .ase-hero--tonal .ase-container,
.ase-site .ase-hero--tonal .ase-hero__copy {
    position: relative;
    z-index: 1;
}

.ase-site .ase-hero--tonal .ase-hero__copy {
    max-width: 940px;
}

.ase-site .ase-hero--tonal .ase-hero__title {
    max-width: 16ch;
}

.ase-site .ase-hero__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}

.ase-site .ase-hero__media {
    position: relative;
    z-index: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    isolation: isolate;
}

.ase-site .ase-hero__media::before {
    position: absolute;
    inset: 7% -5% -7% 8%;
    z-index: -1;
    border-radius: 28px;
    content: "";
    background: var(--ase-soft);
}

.ase-site .ase-hero__image,
.ase-site .ase-resource__image {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: clamp(20px, 3vw, 30px);
    background: var(--ase-card);
    box-shadow: var(--ase-shadow);
}

.ase-site .ase-hero__image img {
    display: block;
    width: 100%;
    min-height: clamp(340px, 48vw, 590px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.ase-site .ase-resource__image {
    max-width: 340px;
    margin-inline: auto;
    border-radius: 16px;
}

.ase-site .ase-resource__image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 390px;
    object-fit: contain;
}

.ase-site .ase-purpose__media {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    isolation: isolate;
}

.ase-site .ase-purpose__media::before {
    position: absolute;
    inset: 8% -4% -7% 8%;
    z-index: -1;
    border-radius: clamp(18px, 2.5vw, 28px);
    content: "";
    background: var(--ase-soft);
}

.ase-site .ase-purpose__image {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: clamp(18px, 2.5vw, 28px);
    background: var(--ase-surface);
    box-shadow: var(--ase-shadow);
}

.ase-site .ase-purpose__image img {
    display: block;
    width: 100%;
    min-height: clamp(300px, 38vw, 500px);
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.ase-site .ase-hero--text-only .ase-hero__copy {
    max-width: 850px;
}

.ase-site .ase-hero--text-only .ase-hero__title {
    max-width: 18ch;
}

@media (max-width: 960px) {
    .ase-site .ase-hero__image img {
        min-height: 0;
        max-height: 620px;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 680px) {
    .ase-site .ase-hero {
        padding-block: 3.5rem;
    }

    .ase-site .ase-hero__media::before {
        inset: 6% -3% -5% 6%;
    }

    .ase-site .ase-hero__image img {
        aspect-ratio: 4 / 3;
    }
}

/* v0.3.2 image-side and focal-position controls. */
.ase-site .ase-grid--hero-image-left .ase-hero__media {
    order: 1;
}

.ase-site .ase-grid--hero-image-left .ase-hero__copy {
    order: 2;
}

.ase-site .ase-grid--hero-image-right .ase-hero__copy {
    order: 1;
}

.ase-site .ase-grid--hero-image-right .ase-hero__media {
    order: 2;
}

.ase-site .ase-hero__image img,
.ase-site .ase-purpose__image img,
.ase-site .ase-featured-card__image img,
.ase-site .ase-post-card__image img {
    object-position: 50% 50%;
}

.ase-site .ase-resource__visual--image {
    background: transparent;
}

@media (max-width: 960px) {
    .ase-site .ase-grid--hero-image-left .ase-hero__copy,
    .ase-site .ase-grid--hero-image-left .ase-hero__media,
    .ase-site .ase-grid--hero-image-right .ase-hero__copy,
    .ase-site .ase-grid--hero-image-right .ase-hero__media {
        order: initial;
    }
}