/* ============================================================
   ivs-marquee — the split explore marquee (komponen.md §ivs-marquee).
   Extracted from the tour V5 Explore More section; loaded once, by the
   partial itself (@once). Tokens from ivs-tokens.css with fallbacks.
   Mobile stacks photo above the list; desktop is a 50/50 split panel.
   ============================================================ */

.ivs-marq {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--v5-line, #e4e0d5);
    overflow: hidden;
}
@media (min-width: 55rem) {
    .ivs-marq { grid-template-columns: 1fr 1fr; min-height: 460px; }
}

/* ── Left: the list ── */
.ivs-marq-list { display: flex; flex-direction: column; order: 2; }
@media (min-width: 55rem) { .ivs-marq-list { order: 0; } }

.ivs-marq-item {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    padding: 1.15rem 1.75rem;
    text-decoration: none;
    background: var(--v5-ivory, #faf9f6);
    color: var(--v5-ink, #201f1d);
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
    transition: background-color .4s ease, color .4s ease, padding-left .4s ease;
}
.ivs-marq-item:last-child { border-bottom: 0; }
.ivs-marq-item.is-active {
    background-color: var(--v5-ink, #201f1d);
    color: var(--v5-parchment, #f2efe8);
    padding-left: 2.4rem;
}
.ivs-marq-name {
    font-family: var(--v5-font-display, Georgia, serif);
    font-size: 1.22rem;
    font-weight: 500;
    line-height: 1.25;
}
@media (min-width: 55rem) { .ivs-marq-name { font-size: 1.32rem; } }
.ivs-marq-go {
    flex: none;
    font-family: var(--v5-font-label, sans-serif);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--v5-amber, #fcb913); /* amber is legal here: it shows on ink */
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .4s ease, transform .4s ease;
}
.ivs-marq-item.is-active .ivs-marq-go { opacity: 1; transform: none; }
.ivs-marq-arrow { display: inline-block; transition: transform .3s ease; }
.ivs-marq-item.is-active .ivs-marq-arrow { transform: translateX(3px); }

/* ── Right: the photo stage ── */
.ivs-marq-stage {
    position: relative;
    overflow: hidden;
    background-color: var(--v5-parchment, #f2efe8);
    aspect-ratio: 3 / 2;
    order: 1;
}
@media (min-width: 55rem) { .ivs-marq-stage { aspect-ratio: auto; order: 0; } }

.ivs-marq-photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .6s ease, transform .9s ease;
}
.ivs-marq-photo.is-active { opacity: 1; transform: scale(1); }
.ivs-marq-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* soft floor so the caption reads over any photo */
.ivs-marq-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(20, 19, 17, .78) 0%, rgba(20, 19, 17, .15) 42%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}
.ivs-marq-cap {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.4rem;
    z-index: 2;
    color: var(--v5-parchment, #f2efe8);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}
.ivs-marq-cap.is-active { opacity: 1; transform: none; }
.ivs-marq-cap-title {
    display: block;
    font-family: var(--v5-font-display, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 500;
    margin-bottom: .35rem;
}
.ivs-marq-cap-desc {
    display: block;
    font-family: var(--v5-font-body, Georgia, serif);
    font-size: .85rem;
    line-height: 1.55;
    color: rgba(242, 239, 232, .85);
    max-width: 40ch;
}

@media (prefers-reduced-motion: reduce) {
    .ivs-marq-item, .ivs-marq-go, .ivs-marq-arrow, .ivs-marq-photo, .ivs-marq-cap { transition: none; }
}