/* Figma 18:3859: 30px card spacing, 15px text spacing, 50px column offset.
   The shared gutter controls spacing; 410:510 is the verified ACF crop. */
.artiesten_overzicht {
    --kaart_offset: 5rem;
}

.artiesten_overzicht :is(.artiesten_grid, .alm-listing) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bs-gutter-x);
}

/* Grids lower the middle column; active sliders alternate across the full track.
   Count artist cards only, so inserted CTA blocks do not interrupt the stagger. */
.artiesten_overzicht :not(.tns-slider) > .artiest_kaart:nth-child(3n + 2 of .artiest_kaart),
.artiesten_overzicht .tns-slider > .artiest_kaart:nth-child(even of .artiest_kaart) {
    padding-top: var(--kaart_offset);
}

.artiesten_overzicht .artiest_kaart {
    position: relative;
    min-width: 0; /* Allow long content to shrink within grid/slider columns. */
    text-align: center;
}

.artiesten_overzicht .artiest_media {
    position: relative;
    z-index: 2; /* Keep photo links and swipe/dot controls above Bootstrap's stretched link. */
    overflow: hidden;
    aspect-ratio: 410 / 510;
    background: var(--licht-taupe);
}

.artiesten_overzicht .artiest_fotos {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.artiesten_overzicht .artiest_foto {
    flex: 0 0 100%;
    min-width: 0;
}

.artiesten_overzicht .artiest_foto :is(picture, img),
.artiesten_overzicht .artiest_video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artiesten_overzicht .artiest_video {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease; /* Gentle image/video crossfade, matching existing theme transitions. */
}

.artiesten_overzicht .artiest_video.is_playing {
    opacity: 1;
}

.artiesten_overzicht .artiest_tekst {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-x);
}

.artiesten_overzicht .artiest_intro {
    /* Figma text occupies 360 of the 410 image pixels. */
    width: calc(100% * 360 / 410);
}

.artiesten_overzicht .artiest_titel {
    text-decoration: none;
}

.artiesten_overzicht .artiest_intro a {
    position: relative;
    z-index: 2; /* Preserve editor-authored links above the card's stretched link. */
}

.artiest_call_to_action{
	grid-column: span 3;
	padding-block: var(--jumbotron-margin-md);
}

.artiesten_overzicht .artiest_foto_nav {
    position: absolute;
    inset-inline: 0;
    bottom: var(--default-margin-bottom);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.artiesten_overzicht .artiest_foto_nav[hidden] {
    display: none;
}

.artiesten_overzicht .artiest_foto_nav button {
    /* Figma 232:2648 uses 15px dots. Padding enlarges the touch target. */
    padding: 0.5rem;
    border: 0;
    background: none;
    color: var(--espresso);
}

.artiesten_overzicht .artiest_foto_nav button::before {
    content: '';
    display: block;
    width: 1.5rem;
    aspect-ratio: 1;
    border: 0.1rem solid currentColor;
    border-radius: 50%;
    background: var(--licht-taupe);
}

.artiesten_overzicht .artiest_foto_nav button[aria-pressed="true"]::before {
    background: currentColor;
}

/* Box-shadow retains keyboard focus despite the theme's Tiny Slider outline reset. */
.artiesten_overzicht :is(a, button):focus-visible {
    box-shadow: inset 0 0 0 0.2rem var(--taupe);
}

.artiesten_slider {
    overflow: clip;
}

.artiesten_slider .artiesten_grid.tns-slider {
    display: block;
}

.artiesten_slider .tns-horizontal.tns-subpixel > .tns-item {
    display: inline-block;
    vertical-align: top;
    float: none;
}

.artiesten_slider .tns-controls {
    display: flex;
    justify-content: center;
    gap: var(--kaart_offset);
    margin-bottom: var(--bs-gutter-x);
}

.artiesten_slider .tns-controls button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--taupe);
    font-size: var(--h3-font-size);
    line-height: var(--heading-line-height);
}

.artiesten_slider .tns-controls button:is(:hover, :focus-visible) {
    color: var(--espresso);
}

.artiesten_slider .tns-controls button[disabled] {
    opacity: 0.3;
}

.artiesten_slider .tns-slider {
    cursor: grab;
}

.artiesten_slider .tns-slider:active {
    cursor: grabbing;
}

.artiesten_buiten_kader .tns-ovh {
    overflow: visible;
}

@media (max-width:767px) {
    .artiesten_overzicht :is(.artiesten_grid, .alm-listing) {
        grid-template-columns: minmax(0, 1fr);
    }

    .artiesten_overzicht :not(.tns-slider) > .artiest_kaart:nth-child(3n + 2 of .artiest_kaart),
    .artiesten_overzicht .tns-slider > .artiest_kaart:nth-child(even of .artiest_kaart) {
        padding-top: 0;
    }

    .artiesten_overzicht .artiest_fotos {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .artiesten_overzicht .artiest_fotos::-webkit-scrollbar {
        display: none;
    }

    .artiesten_overzicht .artiest_foto {
        scroll-snap-align: start;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .artiesten_overzicht :is(.artiesten_grid, .alm-listing) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .artiesten_overzicht :not(.tns-slider) > .artiest_kaart:nth-child(3n + 2 of .artiest_kaart) {
        padding-top: 0;
    }

    .artiesten_overzicht .artiest_kaart:nth-child(even of .artiest_kaart) {
        padding-top: var(--kaart_offset);
    }
}