/*
 * Sub-section card — Figma "card-signa_plv" (4449:2930).
 *
 * The decorative illustration sits in the bottom-right corner and bleeds past the top and bottom
 * edges of the card; it is purely ornamental, so it sits under the text and never takes space from
 * it. It is not one fixed illustration — each gallery of `website/resource/index.html.twig` supplies
 * its own file, measured 66.7% of the card's width and 131.5% of its height on the trade-poster
 * illustration (`resources-trade-posters.png`, 4569:5213) and 108.7% of the height on the brand
 * mark (`favicon-default.svg`, 4569:5222) — close enough a height to share, and `object-fit: contain`
 * keeps either asset's own aspect ratio rather than stretching it to fill a box sized for the other.
 */

.mo-card-section {
    position: relative;
    display: flex;
    height: 100%;
    min-height: 184px;
    align-items: flex-start;
    gap: var(--mo-spacing-sm);
    overflow: hidden;
    padding: calc(var(--mo-spacing-md) - var(--mo-border-width-xs));
    border: var(--mo-border-width-xs) solid transparent;
    border-radius: var(--mo-radius-md);
    background-color: var(--mo-surface-default-white);
    color: inherit;
    text-decoration: none;
    transition: border-color 120ms ease, color 120ms ease;
}

/* Hover (4449:2928): outline, and everything written on the card turns pink. */
.mo-card-section:hover,
.mo-card-section:focus-visible {
    border-color: var(--mo-border-action);
}

.mo-card-section:hover .mo-card-section__title,
.mo-card-section:focus-visible .mo-card-section__title,
.mo-card-section:hover .mo-card-section__subtitle,
.mo-card-section:focus-visible .mo-card-section__subtitle,
.mo-card-section:hover .mo-card-section__icon,
.mo-card-section:focus-visible .mo-card-section__icon,
.mo-card-section:hover .mo-card-section__arrow,
.mo-card-section:focus-visible .mo-card-section__arrow {
    color: var(--mo-text-action);
}

.mo-card-section__text {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: 55%;
    flex-direction: column;
    gap: var(--mo-spacing-xxs);
}

/* Black in the default state (4449:2929); the hover rule above turns it pink. */
.mo-card-section__icon {
    width: var(--mo-scale-400);
    height: var(--mo-scale-400);
    margin-bottom: var(--mo-spacing-xs);
    color: var(--mo-icon-default-dark);
}

.mo-card-section__title {
    color: var(--mo-text-heading);
    font-size: var(--mo-font-size-h3);
    font-weight: var(--mo-font-weight-semibold);
    line-height: var(--mo-line-height-h3);
}

.mo-card-section__subtitle {
    color: var(--mo-text-body);
    font-size: var(--mo-font-size-body-md);
    line-height: var(--mo-line-height-body-md);
}

.mo-card-section__arrow {
    position: absolute;
    z-index: 1;
    top: var(--mo-spacing-sm);
    right: var(--mo-spacing-sm);
    width: var(--mo-scale-300);
    height: var(--mo-scale-300);
    color: var(--mo-icon-default-dark);
}

.mo-card-section__decor {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 66.7%;
    max-width: 360px;
    height: 130%;
    object-fit: contain;
    object-position: bottom right;
    pointer-events: none;
}