/* Tour Categories Carousel — GSAP true circular-fan edition */
.tcw-section { position: relative; width: 100%; overflow: visible; }

.tcw-heading-wrap { text-align: center; }
.tcw-script-heading {
    font-family: 'Montez', cursive;
    font-size: clamp(1.6rem, 2.2vw, 2.4rem);
    line-height: 1.1;
    margin: 0 0 .25em;
}
.tcw-main-heading {
    font-family: 'Questrial', sans-serif;
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    line-height: 1.1;
    margin: 0;
    font-weight: 400;
}

/* Carousel viewport — outer padding creates breathing room so tilted edge
   cards never clip against the section edges on desktop / tablet. */
.tcw-carousel-outer {
    position: relative;
    width: 100%;
    padding: 0 var(--tcw-outer-pad, 84px);
    box-sizing: border-box;
}
@media (max-width: 1024px) { .tcw-carousel-outer { padding: 0 var(--tcw-outer-pad-t, 44px); } }
@media (max-width: 767px)  { .tcw-carousel-outer { padding: 0 var(--tcw-outer-pad-m, 0px); } }

.tcw-viewport {
    position: relative;
    width: 100%;
    overflow: visible;
    height: calc(var(--tcw-card-h, 245px) + 150px);
    padding: 0;
    -webkit-user-select: none; user-select: none;
}
.tcw-track {
    position: absolute;
    inset: 0;
    will-change: transform;
    touch-action: pan-y;
}

/* Slides */
.tcw-slide {
    position: absolute;
    height: 100%;
    box-sizing: border-box;
    padding: 0 var(--tcw-gap, 12px);
    text-align: center;
    will-change: transform, opacity;
}
.tcw-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
/* Whole card (image + title) rides the fan arc so titles tilt WITH the card */
.tcw-card-inner {
    display: block;
    transform-origin: center center;
    will-change: transform;
}

/* Card face — height is written to --tcw-card-h by JS every layout() pass.
   When "Square cards" is enabled, JS sets --tcw-card-h equal to the actual
   rendered card width, so the box is always a true square at every
   breakpoint — no aspect-ratio guessing needed. */
.tcw-card-img-wrap {
    position: relative;
    width: 100%;
    height: var(--tcw-card-h, 245px);
    border-radius: 20px;
    overflow: hidden;
    background: #e9ecef;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
    transition: box-shadow .35s ease;
}
.tcw-card-img-wrap img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    pointer-events: none;
}
.tcw-img-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg,#dfe4ea,#c8d0d8);
}

/* Hover light sweep (driven by GSAP, fully tunable via CSS custom props
   set from the widget's Style controls). Angle, highlight width and
   travel distance are all configurable so the beam always clears the
   card 100% edge-to-edge on any aspect ratio, and reverses cleanly
   the instant the pointer/finger lifts. */
.tcw-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        var(--tcw-sweep-angle, 105deg),
        transparent 0%,
        color-mix(in srgb, var(--tcw-sweep-color, rgba(255,255,255,.58)) 55%, transparent) calc((100% - var(--tcw-sweep-width, 64%)) / 2),
        var(--tcw-sweep-color, rgba(255,255,255,.58)) 50%,
        color-mix(in srgb, var(--tcw-sweep-color, rgba(255,255,255,.58)) 55%, transparent) calc(100% - ((100% - var(--tcw-sweep-width, 64%)) / 2)),
        transparent 100%
    );
    transform: translateX(-160%);
    mix-blend-mode: screen;
    opacity: 1;
    will-change: transform;
}

.tcw-card-title {
    margin-top: 18px;
    font-family: 'Questrial', sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.35rem);
    line-height: 1.1;
    color: inherit;
}

/* Dots */
.tcw-dots {
    display: flex; justify-content: center; gap: 10px;
    margin-top: 28px;
}
.tcw-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(0,0,0,.18);
    border: 0; padding: 0; cursor: pointer;
    transition: transform .25s ease, background .25s ease, width .25s ease;
}
.tcw-dot.is-active { background: var(--tcw-dot-active, #0e2a3a); width: 26px; border-radius: 6px; }

.tcw-viewport.is-grab   { cursor: grab; }
.tcw-viewport.is-drag   { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
    .tcw-card-img-wrap { transition: none; }
    .tcw-sweep { display: none; }
}

@media (max-width: 1024px) {
    .tcw-viewport { height: calc(var(--tcw-card-h, 225px) + 135px); }
}

@media (max-width: 767px) {
    .tcw-section { overflow: hidden; }
    .tcw-carousel-outer { overflow: hidden; }
    .tcw-viewport {
        overflow: hidden;
        height: calc(var(--tcw-card-h, 245px) + 128px);
    }
    .tcw-slide { padding: 0 var(--tcw-gap, 14px); }
}