/* Filterable cards | ACF module | Prefix: uq-filterable-cards */
.uq-filterable-cards,
.uq-filterable-cards *,
.uq-filterable-cards *::before,
.uq-filterable-cards *::after { box-sizing: border-box; }

.uq-filterable-cards {
    --uq-fc-primary: var(--uq-theme-primary, #104e8b);
    --uq-fc-accent: var(--uq-theme-accent, #fdbb2f);
    --uq-fc-text: var(--uq-theme-text, #3f4b58);
    --uq-fc-ink: #111827;
    --uq-fc-border: var(--uq-theme-border, #e5e5e5);
    width: 100%;
    padding: var(--uq-fc-space-top, 64px) 20px var(--uq-fc-space-bottom, 64px);
    background: #fff;
    color: var(--uq-fc-text);
    font-family: var(--uq-site-font-body, Arial, sans-serif);
}

.uq-filterable-cards__container { width: 100%; max-width: 1200px; margin-inline: auto; }
.uq-filterable-cards__header { max-width: 760px; margin: 0 auto 32px; text-align: center; }
.uq-filterable-cards__eyebrow {
    display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px;
    padding: 5px 13px; border-radius: 999px; background: var(--uq-fc-accent);
    color: #111; font-size: 14px; font-weight: 600; line-height: 1.4;
}
.uq-filterable-cards__eyebrow svg,
.uq-filterable-cards__feature svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uq-filterable-cards__eyebrow svg { width: 16px; height: 16px; }
.uq-filterable-cards__title {
    margin: 0 auto 14px; color: var(--uq-fc-primary) !important;
    font-family: var(--uq-site-font-heading, var(--uq-site-font-body, Arial, sans-serif)); font-weight: 500; line-height: 1.02;
    letter-spacing: -.045em; text-wrap: balance;
}
.uq-filterable-cards__intro { margin: 0; color: var(--uq-fc-text); font-size: 18px; line-height: 1.55; }
.uq-filterable-cards__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.uq-filterable-cards__filter {
    min-height: 42px; padding: 9px 17px; border: 1px solid var(--uq-fc-border);
    border-radius: 7px; background: #fff; color: var(--uq-fc-ink); font: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.uq-filterable-cards__filter:hover { border-color: var(--uq-fc-accent); transform: translateY(-1px); }
.uq-filterable-cards__filter.is-active { border-color: var(--uq-fc-primary); background: var(--uq-fc-primary); color: #fff; }
.uq-filterable-cards__filter.is-active:hover { border-color: var(--uq-fc-accent); background: var(--uq-fc-accent); color: #111; }
.uq-filterable-cards__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Cards panel: one visible surface holding a filter toolbar and the cards, so the
   two read as a single component. The surface is applied only when filters exist,
   so filter-less sections keep rendering exactly as before. */
.uq-filterable-cards__panel { width: 100%; }
.uq-filterable-cards__panel--has-filters {
    padding: 0;                       /* the bar and the card body own their padding */
    border: 1px solid var(--uq-fc-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    overflow: hidden;                 /* clips the toolbar strip to the panel radius */
}

/* Filter toolbar: a full-bleed strip at the top of the panel, divided from the
   cards by a rule. The strip plus the divider is what ties it to the panel, so
   the buttons themselves stay centred. Stated explicitly rather than inherited
   from the base rule so the alignment cannot drift if that base rule changes. */
.uq-filterable-cards__panel--has-filters .uq-filterable-cards__filters {
    margin: 0;
    padding: 14px 20px;
    justify-content: center;
    border-bottom: 1px solid var(--uq-fc-border);
    background: #f7f6f5;              /* the module's existing surface colour */
}

.uq-filterable-cards__panel--has-filters .uq-filterable-cards__grid { padding: 20px; }
.uq-filterable-cards__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.uq-filterable-cards__card {
    display: flex; min-width: 0; flex-direction: column; overflow: hidden;
    border-radius: 16px; background: #f7f6f5;
    transition: background-color .25s, box-shadow .25s, transform .25s;
}
.uq-filterable-cards__card[hidden] { display: none; }
.uq-filterable-cards__card:hover { background: var(--uq-fc-card-hover); box-shadow: 0 16px 40px rgba(0,0,0,.07); transform: translateY(-3px); }
.uq-filterable-cards__visual { width: calc(100% - 32px); height: auto; aspect-ratio: var(--uq-module-media-ratio, 4 / 3); margin: 16px 16px 0; overflow: hidden; border-radius: 12px; background: #e9e8e5; }
.uq-filterable-cards__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.uq-filterable-cards__card:hover .uq-filterable-cards__image { transform: scale(1.035); }
.uq-filterable-cards__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 24px 24px; }
.uq-filterable-cards__badge {
    margin-bottom: 13px; padding: 5px 12px; border-radius: 999px;
    background: var(--uq-fc-card-soft); color: var(--uq-fc-card-ink);
    font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: .035em; text-transform: uppercase;
}
.uq-filterable-cards__card-title {
    margin: 0 0 11px; color: var(--uq-fc-ink) !important;
    font-family: var(--uq-site-font-heading, var(--uq-site-font-body, Arial, sans-serif));
}
.uq-filterable-cards__description { margin: 0 0 20px; color: var(--uq-module-card-description-color); font-size: 15px; line-height: 1.6; }
.uq-filterable-cards__feature {
    display: flex; width: 100%; min-height: 76px; align-items: center; gap: 12px;
    margin-top: auto; padding: 14px; border-radius: 10px;
    background: var(--uq-fc-card-soft); color: var(--uq-fc-card-ink);
}
.uq-filterable-cards__feature svg { width: 26px; height: 26px; flex: 0 0 26px; }
.uq-filterable-cards__feature strong,
.uq-filterable-cards__feature small { display: block; }
.uq-filterable-cards__feature strong { color: var(--uq-fc-ink); font-size: 13px; line-height: 1.35; }
.uq-filterable-cards__feature small { margin-top: 2px; color: var(--uq-fc-text); font-size: 11px; line-height: 1.4; }
.uq-filterable-cards__link {
    display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
    color: var(--uq-fc-ink) !important; font-size: 14px; font-weight: 600; text-decoration: none;
    transition: color .2s, gap .2s;
}
/* Thin horizontal right arrow -- the same treatment as .uq-contact-banner__button svg
   and the Split Content links. Light 1.5 stroke, never a filled wedge. */
.uq-filterable-cards__link svg { display: block; width: 16px; height: 16px; flex: 0 0 16px;
    fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    /* Same optical nudge as the shared arrow: centres it on the label's
       visual mass instead of the line box. */
    transform: translateY(0.045em); }
.uq-filterable-cards__link:hover,
.uq-filterable-cards__link:focus,
.uq-filterable-cards__link:visited,
.uq-filterable-cards__card:hover .uq-filterable-cards__link { gap: 13px; color: var(--uq-fc-ink) !important; }
.uq-filterable-cards__filter:focus-visible,
.uq-filterable-cards__link:focus-visible { outline: 3px solid var(--uq-fc-accent); outline-offset: 3px; }

@media (max-width: 991px) {
    .uq-filterable-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .uq-filterable-cards { padding-top: min(var(--uq-fc-space-top, 64px), 48px); padding-bottom: min(var(--uq-fc-space-bottom, 64px), 48px); }
    .uq-filterable-cards__panel--has-filters { border-radius: 16px; }
    .uq-filterable-cards__panel--has-filters .uq-filterable-cards__filters { padding: 12px 16px; }
    .uq-filterable-cards__panel--has-filters .uq-filterable-cards__grid { padding: 16px; }
    .uq-filterable-cards__header { margin-bottom: 26px; }
    .uq-filterable-cards__intro { font-size: 16px; }
    .uq-filterable-cards__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .uq-filterable-cards { padding-right: 16px; padding-left: 16px; }
    .uq-filterable-cards__panel--has-filters .uq-filterable-cards__filters { padding: 12px 12px; }
    .uq-filterable-cards__panel--has-filters .uq-filterable-cards__grid { padding: 12px; }
    .uq-filterable-cards__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uq-filterable-cards__filter { width: 100%; }
    .uq-filterable-cards__visual { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .uq-filterable-cards *, .uq-filterable-cards *::before, .uq-filterable-cards *::after { transition-duration: .01ms !important; }
}