/* Four project variants sharing the framework Query item view. */
.c-query-item:is(.variant-support-circle,.variant-project-circle,.variant-news-card,.variant-help-card) { min-width: 0; height: 100%; display: flex; flex-direction: column; }
.c-query-item:is(.variant-support-circle,.variant-project-circle) { padding-top: 28px; }
.c-query-item:is(.variant-support-circle,.variant-project-circle) .c-query-item__media { position: relative; width: min(220px, calc(100% - 44px)); flex: 0 0 auto; }
.c-query-item:is(.variant-support-circle,.variant-project-circle) .c-image__frame { border-radius: 50%; aspect-ratio: 1; }
.c-query-item.variant-support-circle { text-align: center; }
.variant-support-circle .c-query-item__media { margin-inline: auto; }
.variant-support-circle .c-actions { justify-content: center; }
.variant-project-circle .c-image__frame { border: 3px solid var(--site-purple); }
.site-query-badge { position: absolute; top: -24px; right: -36px; display: grid; place-items: center; width: 88px; height: 88px; padding: 10px; border: 2px solid var(--site-purple); border-radius: 50%; background: var(--site-yellow); color: var(--site-purple); z-index: 1; pointer-events: none; }
.site-query-badge .c-icon__asset { width: 100%; height: 100%; object-fit: contain; }
.c-query-item:is(.variant-support-circle,.variant-project-circle,.variant-news-card,.variant-help-card) .c-query-item__content { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.c-query-item:is(.variant-support-circle,.variant-project-circle) .c-query-item__content { margin-top: 28px; }
.c-query-item:is(.variant-support-circle,.variant-project-circle,.variant-news-card,.variant-help-card) .c-query-item__title { font-size: 20px; line-height: 1.25; margin: 0; }
.c-query-item:is(.variant-support-circle,.variant-project-circle,.variant-news-card,.variant-help-card) .c-query-item__excerpt { font-size: 14px; line-height: 1.6; margin-top: 12px; }
.c-query-item:is(.variant-support-circle,.variant-project-circle,.variant-news-card,.variant-help-card) .c-query-item__excerpt p { margin: 0; }
.c-query-item:is(.variant-support-circle,.variant-project-circle,.variant-news-card,.variant-help-card) .c-query-item__action { margin-top: auto; padding-top: 16px; }
.c-query-item.variant-news-card { border: 1px solid var(--site-yellow); border-radius: 16px; overflow: hidden; }
.variant-news-card .c-query-item__content { padding: 24px; margin-top: 0; }
.variant-news-card .c-query-item__term { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--site-yellow); color: var(--site-purple); font-size: 12px; }
.variant-news-card .c-query-item__button:has(.c-button__icon) { width: 48px; min-height: 48px; padding: 12px; }
.variant-news-card .c-query-item__button:has(.c-button__icon) > .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.c-query-item.variant-help-card { padding: 8px; border-radius: 20px; }
.variant-help-card .c-query-item__media { overflow: hidden; border-radius: 12px 12px 0 0; }
.variant-help-card .c-query-item__content { margin-top: 0; padding: 24px 16px; border-radius: 10px; background: var(--site-purple); color: var(--site-white); text-align: center; --site-primary-bg: var(--site-yellow); --site-primary-hover-bg: var(--site-white); --site-primary-hover-color: var(--site-purple); }
.variant-help-card .c-query-item__title { color: var(--site-yellow); }
.variant-help-card .c-actions { justify-content: center; }
@media (max-width: 600px) {
    .c-query-item:is(.variant-support-circle,.variant-project-circle) .c-query-item__media { width: min(200px, calc(100% - 44px)); margin-inline: auto; }
    .site-query-badge { width: 72px; height: 72px; right: -24px; top: -20px; padding: 8px; }
    .variant-news-card .c-query-item__content { padding: 20px; }
}

/* Shared project navigation for Collection, Query and media galleries. */
.c-carousel.c-carousel {
    --f-arrow-width: 48px;
    --f-arrow-height: 48px;
    --f-arrow-border-radius: 50%;
    --f-arrow-bg: var(--site-purple);
    --f-arrow-color: var(--site-yellow);
    --f-arrow-hover-bg: var(--site-yellow);
    --f-arrow-hover-color: var(--site-purple);
    --f-carousel-dots-width: 48px;
    --f-carousel-dots-height: 48px;
    --f-carousel-dot-width: 24px;
    --f-carousel-dot-height: 24px;
    --f-carousel-dot-bg: var(--site-white, #fff);
    --f-carousel-dot-hover-bg: var(--site-yellow);
    --f-carousel-dot-selected-bg: var(--site-yellow);
    --f-carousel-dot-opacity: 1;
    --f-carousel-dot-hover-opacity: 1;
}
.c-carousel.c-carousel > .f-carousel__dots .f-carousel__dot::after {
    box-sizing: border-box;
    border: 3px solid var(--site-purple);
    transform: translate(-50%, -50%) scale(.65);
}
.c-carousel.c-carousel > .f-carousel__dots .f-carousel__dot.small::after { transform: translate(-50%, -50%) scale(.65); }
.c-carousel.c-carousel > .f-carousel__dots .f-carousel__dot.micro::after { transform: translate(-50%, -50%) scale(.25); }
.c-carousel.c-carousel > .f-carousel__dots .f-carousel__dot[aria-current]::after { transform: translate(-50%, -50%) scale(1); }
.c-carousel.c-carousel > .f-carousel__dots .f-carousel__dot.hidden::after { transform: translate(-50%, -50%) scale(0); }
.c-carousel.c-carousel:has(> .f-carousel__dots) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 144px auto minmax(0, 1fr);
    row-gap: 24px;
    align-items: center;
    margin-bottom: 0;
}
.c-carousel.c-carousel:has(> .f-carousel__dots) > .f-carousel__viewport { grid-column: 1 / -1; grid-row: 1; }
.c-carousel.c-carousel:has(> .f-carousel__dots) > .f-carousel__dots {
    position: relative;
    inset: auto;
    transform: none;
    grid-column: 3;
    grid-row: 2;
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow: hidden;
    align-items: center;
    color: var(--site-purple);
}
.c-carousel.c-carousel:has(> .f-carousel__dots) > .f-button.is-arrow {
    position: relative;
    inset: auto;
    transform: none;
    grid-row: 2;
}
.c-carousel.c-carousel:has(> .f-carousel__dots) > .f-button.is-prev { grid-column: 2; margin-inline-end: 12px; }
.c-carousel.c-carousel:has(> .f-carousel__dots) > .f-button.is-next { grid-column: 4; margin-inline-start: 12px; }
.c-carousel.c-carousel:has(> .f-carousel__dots) > .f-carousel__thumbs { grid-column: 1 / -1; grid-row: 3; }
@media (max-width: 600px) {

    .c-carousel.c-carousel:has(> .f-carousel__dots) > .f-button.is-prev { margin-inline-end: 6px; }
    .c-carousel.c-carousel:has(> .f-carousel__dots) > .f-button.is-next { margin-inline-start: 6px; }
    .c-carousel.c-carousel:has(> .f-button.is-arrow):not(:has(> .f-carousel__dots)) { padding-bottom: 72px; }
    .c-carousel.c-carousel:not(:has(> .f-carousel__dots)) > .f-button.is-arrow { top: auto; bottom: 0; transform: none; }
    .c-carousel.c-carousel:not(:has(> .f-carousel__dots)) > .f-button.is-prev { left: calc(50% - 56px); right: auto; }
    .c-carousel.c-carousel:not(:has(> .f-carousel__dots)) > .f-button.is-next { right: calc(50% - 56px); left: auto; }
}

/* Reserve three fixed click targets; dynamic neighbours retain their scale. */
.c-carousel.c-carousel > .f-carousel__dots { width: 144px; height: 48px; }
.c-carousel.c-carousel > .f-carousel__dots .f-carousel__dot { flex: 0 0 48px; margin: 0; }
.c-carousel.c-carousel > .f-carousel__dots .f-carousel__dot:is(.micro, .hidden) { display: none; }
/* Circular autoplay timer: keep the duration and pause state set by Fancyapps. */
@property --site-autoplay-progress {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.c-carousel.c-carousel .f-progressbar {
    inset: 12px 12px auto auto;
    width: 24px;
    height: 24px;
    border-radius: 48% 52% 50% 46%;
    transform: rotate(-6deg);
    opacity: .85;
    background: conic-gradient(var(--site-yellow, #ffe044) var(--site-autoplay-progress), var(--site-purple, #35205f) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    box-shadow: none;
    animation-name: site-autoplay-ring;
}
@keyframes site-autoplay-ring {
    from { --site-autoplay-progress: 0deg; }
    to { --site-autoplay-progress: 360deg; }
}
/* Blog cards: 16:9 media, category pill and a compact arrow action. */
.c-query-item.variant-news-card { padding: 0; text-align: left; }
.variant-news-card .c-query-item__content { gap: 12px; padding: 32px; }
.variant-news-card .c-query-item__terms { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.variant-news-card .c-query-item__term { line-height: 1.3; padding: 4px 14px; }
.variant-news-card .c-query-item__excerpt { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.variant-news-card .c-query-item__action { padding-top: 4px; }
.variant-news-card .c-actions .c-query-item__button:has(.c-button__icon) { width: 48px; height: 48px; min-height: 48px; padding: 12px; border-radius: 50%; }
@media (max-width: 600px) { .variant-news-card .c-query-item__content { padding: 24px; } }
/* The help card's inner purple panel is independent of its yellow outer surface. */
.c-query-item.variant-help-card .c-query-item__content { --site-text-link-color: var(--site-yellow); }
.c-query-item.variant-help-card .c-query-item__title a[href] {
    color: var(--site-yellow);
    text-decoration: none;
    transition: color .25s ease;
}
.c-query-item.variant-help-card .c-query-item__title a[href]:is(:hover, :focus-visible) { color: var(--site-white); }
@media (prefers-reduced-motion: reduce) {
    .c-query-item.variant-help-card .c-query-item__title a[href] { transition: none; }
}
/* Centered pagination with fixed circular targets and a drawn hover ring. */
@property --site-pagination-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.c-query__pagination.c-query__pagination > ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.c-query__pagination.c-query__pagination li { margin: 0; padding: 0; }
.c-query__pagination.c-query__pagination li > .page-numbers {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    box-sizing: border-box;
    font-family: var(--site-font-heading);
    font-size: 16px;
    line-height: 1;
    color: var(--site-text-link-color, var(--site-purple));
    text-decoration: none;
}
.c-query__pagination.c-query__pagination li > :is(.current, .prev, .next) {
    background: var(--site-yellow);
    color: var(--site-purple);
}
.c-query__pagination.c-query__pagination a.page-numbers[href]::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: none;
    pointer-events: none;
    --site-pagination-angle: 0deg;
    background: conic-gradient(currentColor 0deg var(--site-pagination-angle), transparent var(--site-pagination-angle) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    transition: --site-pagination-angle .4s ease;
}
.c-query__pagination.c-query__pagination a.page-numbers[href]:is(:hover, :focus-visible)::after { --site-pagination-angle: 360deg; }
.c-query__pagination.c-query__pagination a.page-numbers:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.c-query__pagination.c-query__pagination a:is(.prev, .next) { font-size: 0; }
.c-query__pagination.c-query__pagination a:is(.prev, .next)::before {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    --pagination-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask: var(--pagination-arrow) center / contain no-repeat;
    mask: var(--pagination-arrow) center / contain no-repeat;
}
.c-query__pagination.c-query__pagination a.prev::before { transform: rotate(180deg); }
@media (max-width: 600px) {
    .c-query__pagination.c-query__pagination > ul.page-numbers { gap: 6px; }
    .c-query__pagination.c-query__pagination li > .page-numbers { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .c-query__pagination.c-query__pagination a.page-numbers[href]::after { transition: none; }
}