/* ============================================================================
   Visit Maramures / Frontend Modules V2 / Event categories / F2.8.20

   Compact TOP 6 category cards. Everything is left aligned except the existing
   arrow, centered at the bottom. The solar rosette is the isolated Design System
   SVG, not the 900x64 decorative separator. Only this card type is styled.

   Grid column counts, sorting, public eligibility, links and localized copy
   remain owned by shared Grid, resolver, builder and Blade respectively.
   ============================================================================ */

.event-category-card {
    --event-category-accent: var(--editorial-accent, #b24737);
    --event-category-ink: #151c19;
    --event-category-green: #154a36;
    --event-category-muted: var(--color-text-muted, #66716b);
    --event-category-border: rgba(105, 79, 57, .14);

    position: relative;
    box-sizing: border-box;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--event-category-border);
    border-radius: 13px;
    background: #fffdf9;
    box-shadow: 0 3px 15px rgba(45, 37, 24, .05);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.event-category-card:hover,
.event-category-card:focus-within {
    border-color: rgba(178, 71, 55, .35);
    box-shadow: 0 7px 21px rgba(45, 37, 24, .09);
}

/* Solar rosette alone (48x48 viewBox), subtly clipped by the top/right edges. */
.event-category-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -18px;
    right: -18px;
    width: 96px;
    height: 96px;
    background-image: url('/images/design-system/background/rosette-symbol.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .12;
    pointer-events: none;
}

.event-category-card .event-category-card__link {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 150px;
    height: 100%;
    padding: 13px 13px 10px;
    color: inherit;
    text-align: left;
    text-decoration: none;
}

.event-category-card .event-category-card__link:hover {
    color: inherit;
    text-decoration: none;
}

.event-category-card .event-category-card__link:focus-visible {
    outline: 2px solid var(--event-category-accent);
    outline-offset: -4px;
    border-radius: 12px;
}

/* Source-neutral category icon: preserve the existing iconography contract. */
.event-category-card .event-category-card__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0 0 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--event-category-accent);
    font-size: 1.2rem;
    line-height: 1.05;
}

.event-category-card .event-category-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-align: left;
}

.event-category-card .event-category-card__title {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    color: var(--event-category-ink);
    font-family: var(--type-font-body, var(--frontend-design-font-body, 'Manrope', Arial, sans-serif));
    font-size: .91rem;
    font-weight: 700;
    line-height: 1.28;
    text-align: left;
    overflow-wrap: break-word;
}

/* Count is emphasized but does not inflate the compact category card. */
.event-category-card .event-category-card__count {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    align-self: flex-start;
    gap: 0;
    width: 100%;
    min-width: 0;
    margin: 8px 0 3px;
    padding: 2px 0 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--event-category-ink);
    font-size: .73rem;
    line-height: 1.18;
    text-align: left;
    -webkit-line-clamp: unset;
}

.event-category-card .event-category-card__count-number {
    display: block;
    color: var(--event-category-green);
    font-family: var(--type-font-heading, var(--frontend-design-font-heading, 'Source Serif 4', Georgia, serif));
    font-size: 2.5rem;
    font-weight: 750;
    line-height: .96;
    letter-spacing: -.035em;
    font-variant-numeric: lining-nums tabular-nums;
}

.event-category-card .event-category-card__count-label {
    display: block;
    color: var(--event-category-ink);
    font-family: var(--type-font-body, var(--frontend-design-font-body, 'Manrope', Arial, sans-serif));
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.18;
    margin-top: 1px;
}

/* Optional editorial description remains below the count when supplied. */
.event-category-card .event-category-card__description:not(.event-category-card__count) {
    display: -webkit-box;
    width: 100%;
    min-width: 0;
    margin: 5px 0 0;
    overflow: hidden;
    color: var(--event-category-muted);
    font-size: .7rem;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* The arrow is the sole centered element, at the bottom of the card. */
.event-category-card .event-category-card__arrow {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 100%;
    height: auto;
    min-height: 11px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--event-category-accent);
    font-size: .92rem;
    line-height: 1;
    transition: transform 170ms ease, color 170ms ease;
}

.event-category-card:hover .event-category-card__arrow,
.event-category-card:focus-within .event-category-card__arrow {
    transform: translateX(4px);
    color: var(--event-category-green);
}

@media (max-width: 640px) {
    .event-category-card .event-category-card__link {
        min-height: 148px;
        padding: 12px 11px 9px;
    }

    .event-category-card::before {
        top: -12px;
        right: -12px;
        width: 92px;
        height: 92px;
        opacity: .08;
    }

    .event-category-card .event-category-card__title {
        font-size: .85rem;
    }

    .event-category-card .event-category-card__count-number {
        font-size: 2.34rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-category-card,
    .event-category-card .event-category-card__arrow {
        transition: none;
    }
}