/* ===========================================================================
   VISIT MARAMUREȘ — FRONTEND MODULES V2 / CATALOG
   F1.8 — Presentation rules for the interactive content catalog.

   Ownership:
   - This file owns only .event-catalog* layout and controls.
   - module.css owns shared card anatomy, typography, image treatment and CTA.
   - The catalog Blade view owns markup; PHP services own data and filtering.
   - Load conditionally when a Catalog module is rendered.

   A later shared Catalog V2 extraction can generalize these selectors when
   another source adopts the same interactive catalog contract.
   =========================================================================== */

.event-catalog {
    --catalog-ink: var(--color-text, #172019);
    --catalog-muted: var(--color-text-muted, #59645c);
    --catalog-border: rgba(74, 82, 73, 0.16);
    --catalog-surface: #ffffff;
    --catalog-warm-surface: #fbf8f1;
    --catalog-accent: var(--color-primary, #244331);
    --catalog-focus: var(--editorial-accent, #8e4a3a);

    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    container-type: inline-size;
    color: var(--catalog-ink);
    font-family: var(--type-font-body, var(--frontend-design-font-body, "Manrope", Arial, sans-serif));
}

.event-catalog *,
.event-catalog *::before,
.event-catalog *::after {
    box-sizing: border-box;
}

/* Native GET URLs target the beginning of the results Catalog placement.
   Leave room for the site's sticky header on anchor navigation. */
.event-catalog[id^="event-catalog-results-"] {
    scroll-margin-top: 112px;
}

/* ---------------------------------------------------------------------------
   01. Search and filter toolbar
   --------------------------------------------------------------------------- */

.event-catalog__filters {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 14px;
    align-items: end;
    min-width: 0;
    margin: 0;
    padding: clamp(18px, 2.4cqi, 28px);
    border: 1px solid var(--catalog-border);
    border-radius: 18px;
    background: var(--catalog-surface);
    box-shadow: 0 9px 28px rgba(23, 32, 25, 0.045);
}

/* F2.5.3 — Two-row desktop toolbar for the existing F2.5.2 Blade markup.
   Row 1: quick scopes + search + submit. Row 2: current date fields + reset.
   Future taxonomy selectors require their own markup/data contract. */
.event-catalog__quick-filters {
    display: flex;
    grid-column: 1 / span 6;
    grid-row: 1;
    align-items: center;
    flex-wrap: wrap;
    align-self: end;
    gap: 8px;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 0;
}

.event-catalog__quick-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 15px;
    border: 1px solid var(--catalog-border);
    border-radius: 999px;
    background: var(--catalog-warm-surface);
    color: var(--catalog-ink);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.event-catalog__quick-filter:hover {
    border-color: var(--catalog-accent);
    background: #f0ece3;
    color: var(--catalog-accent);
    text-decoration: none;
}

.event-catalog__quick-filter:is(.is-active, [aria-current="true"]) {
    border-color: var(--catalog-accent);
    background: var(--catalog-accent);
    color: #fff;
    text-decoration: none;
}

.event-catalog__quick-filter:is(.is-active, [aria-current="true"]):hover {
    border-color: var(--frontend-design-color-brand-dark, #0d3327);
    background: var(--frontend-design-color-brand-dark, #0d3327);
    color: #fff;
}

.event-catalog__field {
    display: flex;
    flex-direction: column;
    grid-column: span 3;
    gap: 8px;
    min-width: 0;
}

.event-catalog__field--search {
    position: relative;
    grid-column: 7 / span 4;
    grid-row: 1;
}

.event-catalog__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--catalog-muted);
    font-size: 0.92rem;
    line-height: 1;
    pointer-events: none;
}

/* F2.5.8: outrank the generic field input padding declared below.
   Reserve enough room for the magnifying-glass icon and its spacing. */
.event-catalog__field--search > input[type="search"] {
    padding-inline-start: 44px;
}

.event-catalog__field > label {
    display: block;
    margin: 0;
    color: var(--catalog-ink);
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.4;
}

.event-catalog__field > :is(input, select) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid rgba(66, 79, 66, 0.23);
    border-radius: 10px;
    background: #fbfaf7;
    color: var(--catalog-ink);
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.35;
}

.event-catalog__field > input::placeholder {
    color: #758078;
    opacity: 1;
}

.event-catalog__field > :is(input, select):hover {
    border-color: rgba(66, 79, 66, 0.42);
}

.event-catalog :is(input, select, button, a):focus-visible {
    outline: 3px solid var(--catalog-focus);
    outline-offset: 3px;
}

/* F2.5.6 — One real second-row grid: dates, zone, town, category,
   Apply and a compact clear button. Search remains separate on row one.
   Width is based on the Composition slot, not the viewport. */
.event-catalog__filter-fields {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns:
        minmax(0, 1.2fr) minmax(0, 1.2fr)
        minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr)
        minmax(112px, .95fr) 46px;
    gap: 10px;
    align-items: end;
    min-width: 0;
}

.event-catalog__filter-fields > .event-catalog__field {
    grid-column: auto;
    min-width: 0;
    gap: 7px;
}

.event-catalog__filter-fields > .event-catalog__field > :is(input, select) {
    height: 46px;
    min-width: 0;
    padding-inline: 9px;
    font-size: 0.80rem;
}

.event-catalog__filter-fields > .event-catalog__field > label {
    font-size: 0.75rem;
}

/* F2.5.7 — compact, accessible native multi-select facets. Each facet
   retains its slot in the seven-element desktop row. */
.event-catalog__facet-label {
    display: block;
    margin: 0;
    color: var(--catalog-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}

.event-catalog__facet {
    position: relative;
    width: 100%;
    min-width: 0;
}

.event-catalog__facet-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 46px;
    min-width: 0;
    padding: 10px 10px;
    border: 1px solid rgba(66, 79, 66, 0.23);
    border-radius: 10px;
    background: #fbfaf7;
    color: var(--catalog-ink);
    font: inherit;
    font-size: 0.80rem;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
}

.event-catalog__facet-summary::-webkit-details-marker { display: none; }
.event-catalog__facet-summary > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.event-catalog__facet-summary > i {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--catalog-muted);
}
.event-catalog__facet-summary:hover,
.event-catalog__facet[open] > .event-catalog__facet-summary {
    border-color: rgba(66, 79, 66, 0.48);
}
.event-catalog__facet-summary:focus-visible {
    outline: 3px solid var(--catalog-focus);
    outline-offset: 3px;
}
.event-catalog__facet[open] > .event-catalog__facet-summary > i {
    transform: rotate(180deg);
}

.event-catalog__facet-options {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: max(100%, 240px);
    max-width: min(320px, calc(100vw - 36px));
    max-height: 272px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    border: 1px solid var(--catalog-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 15px 32px rgba(19, 42, 34, 0.16);
}
.event-catalog__field--category .event-catalog__facet-options {
    left: auto;
    right: 0;
}
.event-catalog__facet-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--catalog-ink);
    cursor: pointer;
}
.event-catalog__facet-option:hover { background: var(--catalog-warm-surface); }
.event-catalog__facet-option[hidden] { display: none; }
.event-catalog__facet-option > input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 1px 0 0;
    accent-color: var(--catalog-accent);
}
.event-catalog__facet-option > span { min-width: 0; }

.event-catalog__filter-actions {
    display: contents;
}

.event-catalog__filter-actions > .event-catalog__apply,
.event-catalog__filter-actions > .event-catalog__reset {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding-inline: 9px;
}

.event-catalog__filter-actions > .event-catalog__apply {
    white-space: nowrap;
    font-size: 0.77rem;
}

.event-catalog__filter-actions > .event-catalog__reset {
    font-size: 17px;
}

/* Visible icon, descriptive aria-label/title retained in Blade. */
.event-catalog__reset-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.event-catalog__filters .event-catalog__submit {
    grid-column: 11 / -1;
    grid-row: 1;
    align-self: end;
    width: 100%;
    min-height: 46px;
}

.event-catalog__submit,
.event-catalog__apply,
.event-catalog__reset,
.event-catalog__empty > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    max-width: 100%;
    padding: 10px 17px;
    border-radius: 10px;
    font: inherit;
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.event-catalog__submit {
    border: 1px solid var(--catalog-accent);
    background: var(--catalog-accent);
    color: #ffffff;
}

.event-catalog__submit:hover {
    border-color: #1a3526;
    background: #1a3526;
    color: #ffffff;
}

/* Secondary action, visually distinct from the primary text-search button. */
.event-catalog__apply {
    border: 1px solid var(--catalog-accent);
    background: #edf2ee;
    color: var(--catalog-accent);
}

.event-catalog__apply:hover {
    border-color: #1a3526;
    background: #dce9df;
    color: #1a3526;
}

.event-catalog__reset,
.event-catalog__empty > a {
    border: 1px solid rgba(36, 67, 49, 0.25);
    background: var(--catalog-warm-surface);
    color: #244331;
}

.event-catalog__reset:hover,
.event-catalog__empty > a:hover {
    border-color: rgba(36, 67, 49, 0.48);
    background: #eee8dc;
    color: #244331;
}

/* ---------------------------------------------------------------------------
   F2.3.6 — Catalog module presentation / editorial separator

   Title/subtitle follow the placement locale's existing presentation settings.
   Like Zone V2, the header uses the shared rope.svg asset as a decorative
   background; styling is scoped to Catalog and does not affect other consumers.
   Grid/card/pagination remain unchanged.
   --------------------------------------------------------------------------- */

/* F2.3.9 — Full-width editorial rope in its OWN layout row.
   With the background on the entire intro, the artwork overlapped the subtitle
   and sort controls at wider widths. A flex item after both controls isolates
   the ornament without adding a separate Blade element or arbitrary offsets. */
.event-catalog__section-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    column-gap: clamp(20px, 3cqi, 40px);
    row-gap: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.event-catalog__section-intro::after {
    content: "";
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: clamp(18px, 2.2cqi, 28px);
    margin-top: 12px;
    background-image: url('/images/design-system/separators/rope.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    pointer-events: none;
}

.event-catalog__section-heading {
    display: flex;
    flex: 1 1 440px;
    align-items: flex-start;
    min-width: 0;
}

/* Title and icon share one grid row, so the icon aligns with the title's
   lower edge regardless of how many lines the title occupies. */
.event-catalog__heading-copy {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: clamp(12px, 1.5cqi, 18px);
    row-gap: 8px;
    align-items: end;
    min-width: 0;
    width: 100%;
}

.event-catalog__heading-copy--description-only {
    grid-template-columns: minmax(0, 1fr);
}

.event-catalog__heading-copy--description-only .event-catalog__section-description {
    grid-column: 1;
    grid-row: 1;
}

.event-catalog__heading-icon {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border: 1px solid var(--frontend-design-color-border, #ded8cc);
    border-radius: 12px;
    background: var(--frontend-design-color-surface-muted, #f1ece2);
    color: var(--editorial-eyebrow-color, #8e4a3a);
    font-size: 18px;
    line-height: 1;
}

.event-catalog__section-title {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    color: var(--color-text, #192923);
    font-family: var(--type-font-heading, var(--frontend-design-font-heading, "Source Serif 4", Georgia, serif));
    font-size: var(--type-h3-desktop-size, 1.75rem);
    font-weight: var(--type-h2-weight, 700);
    line-height: var(--type-h2-line-height, 1.2);
    letter-spacing: var(--type-h3-letter-spacing, normal);
    text-wrap: balance;
    overflow-wrap: break-word;
}

.event-catalog__section-description {
    grid-column: 2;
    grid-row: 2;
    max-width: 68ch;
    margin: 0;
    color: var(--color-text-muted, #495951);
    font-family: var(--type-font-body, var(--frontend-design-font-body, "Manrope", Arial, sans-serif));
    font-size: var(--type-body-size, 1rem);
    font-weight: var(--type-body-weight, 400);
    line-height: var(--type-body-line-height, 1.7);
}

.event-catalog__sort-form {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 10px;
    min-width: 0;
    padding-bottom: 2px;
}

/* A small optical drop makes the sort controls sit below the title baseline,
   while keeping them inside the same responsive editorial row. */
.event-catalog__section-heading + .event-catalog__sort-form {
    transform: translateY(9px);
}

.event-catalog__sort-form label {
    margin: 0;
    color: var(--frontend-design-color-text-muted, #667069);
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.event-catalog__sort-form select {
    min-width: 170px;
    min-height: 42px;
    padding: 8px 34px 8px 12px;
    border: 1px solid var(--frontend-design-color-border, #ded8cc);
    border-radius: 10px;
    background: var(--frontend-design-color-surface, #fff);
    color: var(--frontend-design-color-text, #1c2520);
    font: inherit;
    font-size: 0.86rem;
    line-height: 1.3;
    cursor: pointer;
}

.event-catalog__sort-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 15px;
    border: 1px solid var(--frontend-design-color-brand, #174936);
    border-radius: 10px;
    background: var(--frontend-design-color-brand, #174936);
    color: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease;
}

.event-catalog__sort-submit:hover {
    border-color: var(--frontend-design-color-brand-dark, #0d3327);
    background: var(--frontend-design-color-brand-dark, #0d3327);
}

/* Tight visual continuity: ornament -> result count -> cards.
   This overrides the generic results summary margin only within Catalog. */
.event-catalog__section-intro + .event-catalog__results-header {
    margin-top: 6px;
    margin-bottom: 12px;
}

@container (max-width: 820px) {
    .event-catalog__section-intro {
        align-items: flex-start;
        column-gap: 18px;
        row-gap: 18px;
    }

    .event-catalog__section-intro::after {
        margin-top: 0;
    }

    .event-catalog__section-heading {
        flex-basis: 100%;
    }

    .event-catalog__sort-form {
        justify-content: flex-start;
        width: 100%;
    }

    .event-catalog__section-heading + .event-catalog__sort-form {
        transform: none;
    }

    .event-catalog__section-title {
        font-size: var(--type-h3-tablet-size, var(--type-h3-desktop-size, 1.5rem));
    }
}

@container (max-width: 520px) {
    .event-catalog__heading-copy {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .event-catalog__heading-copy--description-only {
        grid-template-columns: minmax(0, 1fr);
    }

    .event-catalog__heading-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .event-catalog__section-title {
        font-size: var(--type-h3-mobile-size, 1.35rem);
    }

    .event-catalog__sort-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .event-catalog__sort-form label {
        grid-column: 1 / -1;
    }

    .event-catalog__sort-form select {
        min-width: 0;
        width: 100%;
    }
}

/* Older browsers use viewport queries as a fallback for the editorial header. */
@supports not (container-type: inline-size) {
    @media (max-width: 767px) {
        .event-catalog__section-heading { flex-basis: 100%; }
        .event-catalog__sort-form { justify-content: flex-start; width: 100%; }
        .event-catalog__heading-copy { grid-template-columns: 36px minmax(0, 1fr); }
        .event-catalog__heading-copy--description-only { grid-template-columns: minmax(0, 1fr); }
        .event-catalog__section-title { font-size: var(--type-h3-mobile-size, 1.35rem); }
    }
}

/* ---------------------------------------------------------------------------
   02. Count / range summary
   --------------------------------------------------------------------------- */

.event-catalog__results-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 20px;
    margin: 26px 0 18px;
    padding: 0 2px;
}

.event-catalog__results-count,
.event-catalog__results-range {
    margin: 0;
    color: var(--catalog-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.event-catalog__results-count {
    color: var(--catalog-ink);
    font-weight: 700;
}

.event-catalog__results-range {
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   03. Responsive results — cards remain owned by module.css
   --------------------------------------------------------------------------- */

/* Density is chosen in Admin per placement and locale (Grid V2 contract).
   Container queries below select the correct profile for the available slot.
   CSS only applies validated values emitted by CatalogModuleResolver / Blade. */
.event-catalog__grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-desktop-columns, 4), minmax(0, 1fr));
    gap: clamp(16px, 1.75cqi, 22px);
    align-items: stretch;
    min-width: 0;
}

.event-catalog__grid > * {
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   F2.4.3 — Event Catalog / Compact cards (shared Zone typography)

   Catalog-only presentation: preserve shared card anatomy, all other
   display variants, Admin-controlled grid density, URL-safe CTA behavior,
   and the independent Zone/Featured consumers. No event data is changed.
   --------------------------------------------------------------------------- */

/* Compact catalog cards have a quieter editorial surface. */
.event-catalog__grid > .event-frontend-card--compact {
    border: 1px solid var(--frontend-design-color-border, #ded8cc);
    border-radius: 13px;
    background: var(--frontend-design-color-surface, #fff);
    box-shadow: 0 5px 14px rgba(19, 42, 34, 0.055);
}

/* Keep Compact's shared photographic geometry; do not crop posters further. */
.event-catalog__grid > .event-frontend-card--compact > .event-frontend-card__media {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
}

/* Date remains a truthful, localized full date. Unlike the mockup, no
   shortened multi-day interval is manufactured at the CSS layer. */
.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__date-badge {
    top: 10px;
    left: 10px;
    max-width: min(140px, calc(100% - 20px));
    padding: 7px 10px;
    border: 1px solid rgba(142, 74, 58, 0.14);
    border-radius: 9px;
    background: rgba(255, 252, 247, 0.97);
    box-shadow: 0 2px 10px rgba(21, 30, 24, 0.09);
    backdrop-filter: none;
    color: var(--editorial-eyebrow-color, #8e4a3a);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__date-badge :is(time, span) {
    display: block;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.event-catalog__grid > .event-frontend-card--compact > .event-frontend-card__content {
    min-width: 0;
    padding: 14px 15px 16px;
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__meta {
    gap: 6px;
    margin: 0 0 10px;
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__meta > span {
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 999px;
    background: #f8f0e6;
    color: var(--frontend-design-color-heading, #132a22);
    font-size: 0.70rem;
    font-weight: 650;
    line-height: 1.3;
    white-space: normal;
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__meta > .event-frontend-card__recommended {
    background: #fff2d8;
    color: #75501f;
}

/* Compact card title uses the shared module.css anatomy (Manrope,
   1.08rem, #111827); no local Catalog typography override. */

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__schedule {
    margin: 0 0 9px;
    color: var(--frontend-design-color-text-muted, #667069);
    font-size: 0.80rem;
    line-height: 1.4;
}

/* Title and excerpt typography belong to shared module.css, as in Zone V2.
   Catalog owns only its three-line fallback for the excerpt-length control. */
.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__excerpt {
    -webkit-line-clamp: var(--frontend-card-excerpt-lines, 3);
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__location {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    min-width: 0;
    margin: auto 0 0;
    padding-top: 13px;
    color: var(--frontend-design-color-text-muted, #667069);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__location-icon {
    flex: 0 0 auto;
    color: var(--editorial-eyebrow-color, #8e4a3a);
    font-size: 0.78rem;
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__location-separator {
    color: var(--frontend-design-color-border, #ded8cc);
}

/* This footer exists only when the builder supplied a real public URL.
   Do not draw a fake "Vezi detalii" link for events without a detail route. */
.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__footer {
    margin-top: 0;
    padding-top: 12px;
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--editorial-eyebrow-color, #8e4a3a);
    border-radius: 999px;
    background: transparent;
    color: var(--editorial-eyebrow-color, #8e4a3a);
    font: inherit;
    font-size: 0.79rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 180ms ease, color 180ms ease;
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__cta:hover {
    background: var(--editorial-eyebrow-color, #8e4a3a);
    color: #fff;
}

.event-catalog__grid > .event-frontend-card--compact .event-frontend-card__cta:focus-visible {
    outline: 3px solid var(--frontend-design-color-accent, #b88a3b);
    outline-offset: 3px;
}

@container (max-width: 520px) {
    .event-catalog__grid > .event-frontend-card--compact > .event-frontend-card__content {
        padding: 15px 16px 18px;
    }

}

/* ---------------------------------------------------------------------------
   04. No-result state
   --------------------------------------------------------------------------- */

.event-catalog__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 240px;
    padding: clamp(24px, 4cqi, 48px);
    border: 1px dashed rgba(74, 82, 73, 0.28);
    border-radius: 16px;
    background: var(--catalog-warm-surface);
    text-align: center;
}

.event-catalog__empty > h3 {
    margin: 0;
    color: var(--catalog-ink);
    font-family: var(--type-font-heading, "Source Serif 4", Georgia, serif);
    font-size: clamp(1.3rem, 2.4cqi, 1.75rem);
    font-weight: var(--type-h3-weight, 700);
    line-height: 1.25;
}

.event-catalog__empty > p {
    max-width: 55ch;
    margin: 0;
    color: var(--catalog-muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

.event-catalog__empty > a {
    margin-top: 8px;
}

/* ---------------------------------------------------------------------------
   05. Pagination V2 — Event Catalog "Incarca mai multe" button (F2.1.14)

   Presentation only. Pagination links, URLs, loading state and append logic
   remain in shared pagination.blade.php / pagination-load-more.js.
   Other consumers, including numeric pagination, are not changed.
   --------------------------------------------------------------------------- */

.event-catalog nav.pagination--load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    margin: clamp(24px, 3cqi, 36px) 0 0;
}

.event-catalog nav.pagination--load-more a.pagination-item--load-more {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: auto;
    min-width: 258px;
    max-width: 100%;
    min-height: 50px;
    padding: 13px 25px;
    border: 1px solid var(--frontend-design-color-brand, #174936);
    border-radius: var(--frontend-design-radius-pill, 999px);
    background: var(--frontend-design-color-brand, #174936);
    color: #fff;
    font-family: var(--frontend-design-button-font-family, "Manrope", Arial, sans-serif);
    font-size: var(--frontend-design-button-font-size, 14px);
    font-weight: var(--frontend-design-button-font-weight, 700);
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(13, 51, 39, 0.14);
    transition: transform 200ms ease, background-color 200ms ease,
                border-color 200ms ease, box-shadow 200ms ease;
}

/* Decorative arrow; no icon font or markup dependency. */
.event-catalog nav.pagination--load-more a.pagination-item--load-more::after {
    content: "";
    display: block;
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms ease;
}

/* Outrank the shared numeric pagination hover selector explicitly. */
.event-catalog nav.pagination--load-more a.pagination-item--load-more:hover {
    transform: translateY(-2px);
    border-color: var(--frontend-design-color-brand-dark, #0D3327);
    background: var(--frontend-design-color-brand-dark, #0D3327);
    color: #fff;
    box-shadow: 0 11px 23px rgba(13, 51, 39, 0.21);
    text-decoration: none;
}

.event-catalog nav.pagination--load-more a.pagination-item--load-more:hover::after {
    transform: translateY(2px) rotate(45deg);
}

.event-catalog nav.pagination--load-more a.pagination-item--load-more:focus-visible {
    outline: 3px solid var(--frontend-design-color-accent, #B88A3B);
    outline-offset: 4px;
}

.event-catalog nav.pagination--load-more a.pagination-item--load-more:active {
    transform: translateY(0);
    box-shadow: 0 4px 11px rgba(13, 51, 39, 0.13);
}

/* Shared JS adds this attribute during loading. */
.event-catalog nav.pagination--load-more[data-pagination-loading] a.pagination-item--load-more {
    opacity: 0.78;
    cursor: progress;
    pointer-events: none;
}

.event-catalog nav.pagination--load-more[data-pagination-loading] a.pagination-item--load-more::after {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
    margin-top: 0;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: event-catalog-load-more-spin 750ms linear infinite;
}

@keyframes event-catalog-load-more-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
   F2.2.2a — Progressive catalog disclosure after the editorial Grid.

   Native <details>/<summary>: no second AJAX controller, no hiding by JS,
   no changes to the shared numeric/Load More pagination contract.
   The companion Blade opt-in will open the results on a filtered URL.
   --------------------------------------------------------------------------- */

.event-catalog__disclosure {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.event-catalog__disclosure-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: fit-content;
    max-width: 100%;
    min-height: 50px;
    margin: clamp(24px, 3cqi, 38px) auto 0;
    padding: 13px 25px;
    list-style: none;
    border: 1px solid var(--frontend-design-color-brand, #174936);
    border-radius: var(--frontend-design-radius-pill, 999px);
    background: var(--frontend-design-color-brand, #174936);
    color: #ffffff;
    font-family: var(--frontend-design-button-font-family, "Manrope", Arial, sans-serif);
    font-size: var(--frontend-design-button-font-size, 14px);
    font-weight: var(--frontend-design-button-font-weight, 700);
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(13, 51, 39, 0.14);
    transition: transform 200ms ease, background-color 200ms ease,
                border-color 200ms ease, box-shadow 200ms ease;
}

.event-catalog__disclosure-trigger::-webkit-details-marker {
    display: none;
}

.event-catalog__disclosure-trigger:hover {
    transform: translateY(-2px);
    border-color: var(--frontend-design-color-brand-dark, #0d3327);
    background: var(--frontend-design-color-brand-dark, #0d3327);
    box-shadow: 0 11px 23px rgba(13, 51, 39, 0.21);
}

.event-catalog__disclosure-trigger:focus-visible {
    outline: 3px solid var(--frontend-design-color-accent, #b88a3b);
    outline-offset: 4px;
}

.event-catalog__disclosure-trigger-icon {
    display: inline-block;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: -3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 200ms ease, margin-top 200ms ease;
}

.event-catalog__disclosure-label--open {
    display: none;
}

.event-catalog__disclosure[open] .event-catalog__disclosure-label--closed {
    display: none;
}

.event-catalog__disclosure[open] .event-catalog__disclosure-label--open {
    display: inline;
}

.event-catalog__disclosure[open] .event-catalog__disclosure-trigger-icon {
    margin-top: 3px;
    transform: rotate(225deg);
}

.event-catalog__disclosure-content {
    min-width: 0;
}

/* Filtered/search/sorted requests reveal the results automatically and have
   no redundant 'View all' control above the filtered results. */
.event-catalog__disclosure--filtered > .event-catalog__disclosure-trigger {
    display: none;
}

.event-catalog__disclosure--filtered > .event-catalog__disclosure-content {
    margin-top: 0;
}

@container (max-width: 520px) {
    .event-catalog__disclosure-trigger {
        width: 100%;
        padding-inline: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-catalog__disclosure-trigger,
    .event-catalog__disclosure-trigger-icon {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   06. Composition-aware sizing: actual slot width, not viewport width
   --------------------------------------------------------------------------- */

@container (max-width: 980px) {
    /* Quick links, search and filters keep that order even when wrapping. */
    .event-catalog__quick-filters {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .event-catalog__field--search {
        grid-column: 1 / span 9;
        grid-row: 2;
    }

    .event-catalog__filters .event-catalog__submit {
        grid-column: 10 / -1;
        grid-row: 2;
    }

    .event-catalog__filter-fields {
        grid-row: 3;
    }
}

@container (max-width: 900px) {
    .event-catalog__filter-fields {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container (max-width: 700px) {
    .event-catalog__field--search {
        grid-column: 1 / span 8;
    }

    .event-catalog__filters .event-catalog__submit {
        grid-column: 9 / -1;
    }

    .event-catalog__filter-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Medium-width Composition slots use the configured tablet profile. */
@container (max-width: 1080px) {
    .event-catalog__grid {
        grid-template-columns: repeat(var(--grid-tablet-columns, 2), minmax(0, 1fr));
    }
}

/* Narrow Composition slots use the configured mobile profile. */
@container (max-width: 640px) {
    .event-catalog__grid {
        grid-template-columns: repeat(var(--grid-mobile-columns, 1), minmax(0, 1fr));
    }
}

@container (max-width: 520px) {
    .event-catalog__filters {
        gap: 14px;
        padding: 16px;
        border-radius: 14px;
    }

    .event-catalog__quick-filters { gap: 7px; }
    .event-catalog__quick-filter {
        flex: 1 1 auto;
        padding: 9px 12px;
        font-size: 0.79rem;
    }

    .event-catalog__field--search {
        grid-column: 1 / span 8;
    }

    .event-catalog__filters .event-catalog__submit {
        grid-column: 9 / -1;
    }

    .event-catalog__filter-fields {
        gap: 12px;
    }

    .event-catalog__filter-fields > .event-catalog__field--category {
        grid-column: 1 / -1;
    }

    .event-catalog__results-header { margin: 22px 0 14px; }
    .event-catalog .pagination--load-more { margin-top: 26px; }
    .event-catalog .pagination--load-more .pagination-item--load-more {
        width: 100%;
        min-width: 0;
        padding: 12px 18px;
        white-space: normal;
    }
}

@container (max-width: 360px) {
    .event-catalog__field--search,
    .event-catalog__filters .event-catalog__submit {
        grid-column: 1 / -1;
    }

    .event-catalog__filters .event-catalog__submit {
        grid-row: 3;
    }

    .event-catalog__filter-fields {
        grid-row: 4;
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Responsive fallback when CSS Container Queries are unavailable.
   These media queries use viewport width but honor the same Admin values. */
@supports not (container-type: inline-size) {
    @media (max-width: 1180px) {
        .event-catalog__grid {
            grid-template-columns: repeat(var(--grid-tablet-columns, 2), minmax(0, 1fr));
        }
        .event-catalog__quick-filters { grid-column: 1 / -1; grid-row: 1; }
        .event-catalog__field--search { grid-column: 1 / span 9; grid-row: 2; }
        .event-catalog__filters .event-catalog__submit { grid-column: 10 / -1; grid-row: 2; }
        .event-catalog__filter-fields { grid-row: 3; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    @media (max-width: 760px) {
        .event-catalog__filter-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .event-catalog__filter-fields > .event-catalog__field--category { grid-column: 1 / -1; }
    }

    @media (max-width: 640px) {
        .event-catalog__grid {
            grid-template-columns: repeat(var(--grid-mobile-columns, 1), minmax(0, 1fr));
        }
        .event-catalog__field--search { grid-column: 1 / span 8; }
        .event-catalog__filters .event-catalog__submit { grid-column: 9 / -1; }
    }

    @media (max-width: 390px) {
        .event-catalog__field--search,
        .event-catalog__filters .event-catalog__submit { grid-column: 1 / -1; }
        .event-catalog__filters .event-catalog__submit { grid-row: 3; }
        .event-catalog__filter-fields { grid-row: 4; grid-template-columns: minmax(0, 1fr); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-catalog :is(button, a),
    .event-catalog .pagination-item--load-more::after {
        transition: none;
        animation: none;
    }
}