/* ============================================================
   Archipelago Carousel — v4.2.0
   ============================================================ */

.arccar {
    position: relative;
    width: 100%;
    --arccar-height: 280px;
    --arccar-gap: 16px;
    --arccar-slide-w: 260px; /* fallback — overwritten by JS */
}

/* ── Viewport ────────────────────────────────────────────────────────────── */

.arccar__viewport {
    overflow: hidden;
    width: 100%;
}

/* ── Track ───────────────────────────────────────────────────────────────── */

.arccar__track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ═══════════════════════════════════════════════════════════
   THUMBS MODE
═══════════════════════════════════════════════════════════ */

.arccar--thumbs {
    padding: 0 30px; /* room for arrows */
}

.arccar--thumbs .arccar__track {
    gap: var(--arccar-gap);
}

/* Width driven by JS via --arccar-slide-w */
.arccar--thumbs .arccar__slide {
    flex: 0 0 var(--arccar-slide-w);
    width: var(--arccar-slide-w);
    min-width: var(--arccar-slide-w);
    height: var(--arccar-height);
    background-size: cover;
    background-position: center;
    background-color: var(--color-tresco, #96aa96);
    border-radius: var(--radius-card, 8px);
    overflow: hidden;
    position: relative;
}

.arccar--thumbs .arccar__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(28, 46, 56, 0.7);
    font-family: var(--font-sans, 'DM Sans', sans-serif);
    font-size: 0.8rem;
    color: #fff;
    backdrop-filter: blur(3px);
}

/* ═══════════════════════════════════════════════════════════
   HERO MODE
═══════════════════════════════════════════════════════════ */

.arccar--hero .arccar__viewport {
    height: var(--arccar-height);
    position: relative;
    background: var(--color-atlantic, #1c2e38);
}

.arccar--hero .arccar__track {
    position: absolute;
    inset: 0;
}

.arccar--hero .arccar__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    display: flex;
    align-items: flex-end;
}

.arccar--hero .arccar__slide--active {
    opacity: 1;
    z-index: 1;
}

.arccar--hero .arccar__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(28,46,56,0.1) 0%, rgba(28,46,56,0.55) 100%);
}

.arccar--hero .arccar__caption {
    position: relative;
    z-index: 2;
    padding: 1.5rem 2rem;
    font-family: var(--font-serif, 'DM Serif Display', Georgia, serif);
    font-size: clamp(1.4rem, 3vw, 2.25rem);
    font-weight: 400;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Dots */
.arccar__dots {
    position: absolute;
    bottom: 1rem;
    right: 1.25rem;
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.arccar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.arccar__dot--active,
.arccar__dot:hover {
    background: var(--color-gorse, #f2a900);
    transform: scale(1.3);
}

/* ═══════════════════════════════════════════════════════════
   ARROWS (both modes)
═══════════════════════════════════════════════════════════ */

.arccar__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
    background: var(--color-gorse, #f2a900);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.arccar__arrow:hover { background: #d99500; }

/* Thumbs: sit just outside the viewport, inside the 30px padding */
.arccar--thumbs .arccar__arrow--prev { left: 0; }
.arccar--thumbs .arccar__arrow--next { right: 0; }

/* Hero: sit inside the image */
.arccar--hero .arccar__arrow {
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.5);
    backdrop-filter: blur(4px);
}
.arccar--hero .arccar__arrow:hover {
    background: var(--color-gorse, #f2a900);
    border-color: var(--color-gorse, #f2a900);
}
.arccar--hero .arccar__arrow--prev { left: 1rem; }
.arccar--hero .arccar__arrow--next { right: 1rem; }