/* ==========================================================================
   Abrovink Gallery — carousel + lightbox styles
   ========================================================================== */

.abrovink-gallery {
    margin: 0 auto;
    /* Full-width of whatever the theme's container provides. */
    width: 100%;
    max-width: 100%;
    /* Escape flex min-content behavior in display:flex parents. */
    min-width: 0;
    /* Establish a new block formatting context so Slick's wide
       slick-track can't cascade width up to ancestors. */
    overflow: hidden;
    /* Anchor absolute-positioned overlay controls to this box. */
    position: relative;
}
.abrovink-gallery .gallery-slider {
    width: 100%;
    min-width: 0;
    /* Accessible-slick's base adds margin-bottom: 30px to .slick-slider —
       we don't want implicit spacing at the bottom of the gallery. */
    margin-bottom: 0;
}

/* Slick needs its track wider than the viewport — override any
   theme wildcard like `.content-wrap * { max-width: 100% }`. */
.abrovink-gallery .slick-list,
.abrovink-gallery .slick-track {
    max-width: none;
}

/* --- Slides ------------------------------------------------------------ */

.abrovink-gallery .gallery-slide {
    margin: 0;        /* reset default <figure> margin */
    padding: 0;       /* override overly broad theme rules like `figure { padding-bottom: 56.25% }` */
    /* Slick applies display:inline-block via inline style on direct
       slide children — inline-block creates a text baseline + descender
       gap (font-size × line-height), visible at the bottom of the slide.
       Force block to kill the descender. !important beats Slick's inline. */
    display: block !important;
    line-height: 0;
}

.gallery-slide a {
    display: block;
    cursor: pointer;
}

.gallery-slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* Force a fixed aspect ratio when `aspect_ratio` shortcode param is set.
   Images are cover-cropped to fill the slot. Caption is outside the ratio box. */
.abrovink-gallery[data-aspect-ratio] .gallery-slide img {
    aspect-ratio: var(--abr-ratio);
    object-fit: cover;
    width: 100%;
    height: auto;
}

.abrovink-gallery .gallery-caption {
    margin: .75em 0 0;
    font-size: .875em;
    line-height: 1.4;
    font-style: italic;
    opacity: .8;
    text-align: center;
}

/* --- Overlay controls ---------------------------------------------------
   Floats dots (and keeps arrows) absolute over the bottom of the image.
   Enabled via [gallery controls_overlay="true"]. -------------------------- */

.abrovink-gallery[data-controls-overlay="true"] .slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin: 0;
    padding: 0 12px;
    z-index: 5;
    text-align: center;
    /* Hand the dots something readable to sit on regardless of image content. */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}

.abrovink-gallery[data-controls-overlay="true"] .slick-prev,
.abrovink-gallery[data-controls-overlay="true"] .slick-next {
    z-index: 5;
}

/* --- Hide accessible-slick's play/pause button when opted out -----------
   Accessible Slick auto-inserts a .slick-autoplay-toggle-button when
   autoplay=true. Björn's "just a short animation" case: pause_button=false. */

.abrovink-gallery[data-pause-button="false"] .slick-autoplay-toggle-button {
    display: none !important;
}

/* --- Slick dot overrides ------------------------------------------------
   Accessible-slick-theme renders a bullet character via .slick-dot-icon::before.
   The active theme renders dots via li border circles.
   Kill the bullet so only the theme's dots show. ----------------------- */

.abrovink-gallery .slick-dots {
    margin-top: 1em;
    position: relative;
    bottom: auto;
}

/* Must match or beat accessible-slick-theme's
   `.slick-dots li button .slick-dot-icon::before` (4 classes deep). */
.abrovink-gallery .slick-dots li button .slick-dot-icon::before {
    content: none;
}

.abrovink-gallery .slick-dots li button {
    width: 100%;
    height: 100%;
    padding: 0;
}

/* Same size active & inactive — no resize/margin dance */
.abrovink-gallery .slick-dots li,
.abrovink-gallery .slick-dots li.slick-active {
    width: 0.75em;
    height: 0.75em;
    margin: 0 0.35em 0 0;
    opacity: 0.4;
}

.abrovink-gallery .slick-dots li.slick-active {
    opacity: 1;
}