/*
 * TGL Activities — the "Things to do" horizontal rail.
 *
 * Flat, hand-written CSS: this plugin has no Tailwind, no preprocessor and no
 * PostCSS, and that is on purpose. Every colour is a custom property with a hard
 * fallback baked in, so the block renders correctly on a page where
 * tgl-design-system.css never got enqueued.
 *
 * Mobile first. 80% of this site's traffic is a phone, so the base rules are the
 * phone layout and the desktop refinements live behind a min-width query.
 *
 * TWO RULES THIS FILE DOES NOT BREAK
 *
 * 1. Every rule that sets a colour, a font or an image box is written as
 *    `.tgla .thing`, not `.thing`. Elementor's kit emits `.elementor-kit-N h2`
 *    and `.elementor-kit-N p` (specificity 0,1,1), and a lone class (0,1,0)
 *    loses to it — that is how the packages table spent three releases with
 *    prices in the wrong colour. Two classes (0,2,0) win. Same story for
 *    `.elementor img { height: auto }`, which flattens any card photo that
 *    relies on `height: 100%` alone.
 *
 * 2. The rail does not set `touch-action`. Constraining it to pan-y would hand
 *    vertical scrolling to the browser and take horizontal swiping away from
 *    it, leaving the cards unreachable by touch. Drag-to-scroll is for mice.
 *
 * LAYOUT: the section paints edge to edge and boxes its own content at
 * --tgla-max, which is what Elementor's "Boxed" content width does for a
 * container. Drop the widget in a FULL WIDTH container: if the container is
 * boxed, the background gets boxed with it.
 */

.tgla {
    --tgla-bg: #10373c;
    --tgla-surface: #16474d;
    --tgla-accent: var(--tgl-teal-dark, #159aa4);
    --tgla-accent-soft: #7fd7de;
    --tgla-accent-line: #58c3cc;
    --tgla-ink: #fbfaf7;
    --tgla-ink-muted: #b6d0d3;
    --tgla-ink-dim: #93b4b8;
    --tgla-hairline: rgba(255, 255, 255, 0.07);

    /* The site's own face. The design comped this block in a serif (Newsreader),
       but the site self-hosts Mulish and nothing else, and pulling a second
       family in from Google Fonts would put a blocking request on the critical
       path of a page that is 80% mobile. Override this variable if a display
       face is ever added to the theme. */
    --tgla-font-display: var(--tgl-font-family, "Mulish", system-ui, -apple-system, sans-serif);

    /* Content box. Matches the 1280px the rest of the site uses; the widget's
       "Content width" control overrides it per instance. */
    --tgla-max: 80rem;
    /* Minimum breathing room at the sides once the viewport is narrower than
       the content box. */
    --tgla-gutter: clamp(1.25rem, 5vw, 3rem);
    --tgla-gap: 1rem;
    --tgla-card: min(82vw, 20rem);

    position: relative;
    overflow: hidden;
    background: var(--tgla-bg);
    color: var(--tgla-ink);
    font-family: inherit;
}

/* Decorative wash in the top-left corner. */
.tgla .tgla__glow {
    position: absolute;
    top: -11.25rem;
    left: -7.5rem;
    width: 32.5rem;
    height: 32.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21, 154, 164, 0.28), transparent 70%);
    pointer-events: none;
}

/* The content box: --tgla-max wide, centred, never closer to the edge than the
   gutter. The rail overflows it and gets cut at the right edge, which is the
   affordance that says "this scrolls". */
.tgla .tgla__inner {
    position: relative;
    width: min(100% - (var(--tgla-gutter) * 2), var(--tgla-max));
    margin-inline: auto;
    padding-block: clamp(3rem, 7vw, 5.25rem) clamp(2.5rem, 5vw, 4.75rem);
}

/* ── Heading ─────────────────────────────────────── */

.tgla .tgla__head {
    margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

.tgla .tgla__headings {
    /* Real headings run longer than the design comp's ("Discover the best
       activities to do in Elbow Cay, Bahamas"), so the column gets most of the
       box and the arrows keep only what they need. */
    max-width: 46rem;
    min-width: 0;
}

.tgla .tgla__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--tgla-accent-line);
}

.tgla .tgla__rule {
    flex: none;
    width: 2.125rem;
    height: 1px;
    background: currentColor;
}

.tgla .tgla__title {
    margin: 1.125rem 0 0;
    font-family: var(--tgla-font-display);
    font-weight: 400;
    font-size: clamp(1.875rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--tgla-ink);
    text-wrap: pretty;
}

.tgla .tgla__title em {
    font-style: italic;
    color: var(--tgla-accent-soft);
}

.tgla .tgla__lead {
    max-width: 42rem;
    margin: 1rem 0 0;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tgla-ink-muted);
    text-wrap: pretty;
}

/* Counter and arrows: below the heading on phones, beside it on desktop. */
.tgla .tgla__nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.tgla .tgla__counter {
    margin: 0;
    font-family: inherit;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    color: var(--tgla-ink-dim);
    /* Reserved before the script fills it in, so nothing shifts on load. */
    min-height: 1.25em;
}

.tgla .tgla__buttons {
    display: flex;
    gap: 0.75rem;
}

.tgla .tgla__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 999px;
    color: var(--tgl-text-inverse);
    cursor: pointer;
    transition: background var(--tgl-transition-normal, 0.2s ease),
                border-color var(--tgl-transition-normal, 0.2s ease),
                opacity var(--tgl-transition-normal, 0.2s ease),
                transform var(--tgl-transition-normal, 0.2s ease);
}

.tgla .tgla__btn--prev {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
}

.tgla .tgla__btn--next {
    border: none;
    background: var(--tgla-accent);
}

.tgla .tgla__btn[disabled] {
    opacity: 0.35;
    cursor: default;
}

.tgla .tgla__btn:focus-visible {
    outline: 2px solid var(--tgla-accent-soft);
    outline-offset: 3px;
}

@media (hover: hover) {
    .tgla .tgla__btn--prev:not([disabled]):hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.5);
    }

    .tgla .tgla__btn--next:not([disabled]):hover {
        background: #17adb8;
        transform: translateY(-2px);
    }
}

/* ── Rail ────────────────────────────────────────── */

.tgla .tgla__rail {
    display: flex;
    gap: var(--tgla-gap);
    margin: 0;
    padding: 0.5rem 0 1.75rem;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Keeps an over-swipe from triggering the browser's back gesture on iOS. */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tgla .tgla__rail::-webkit-scrollbar {
    display: none;
}

.tgla .tgla__rail:focus-visible {
    outline: 2px solid var(--tgla-accent-soft);
    outline-offset: 4px;
}

/* Set by the script while a mouse drag is in progress: snapping mid-drag fights
   the pointer, and a click must not land on whatever card ended up under it. */
.tgla .tgla__rail.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
}

.tgla .tgla__rail.is-dragging * {
    pointer-events: none;
}

.tgla .tgla-card {
    display: flex;
    flex: 0 0 var(--tgla-card);
    flex-direction: column;
    scroll-snap-align: start;
    background: var(--tgla-surface);
    border: 1px solid var(--tgla-hairline);
    border-radius: 1.125rem;
    overflow: hidden;
    transition: transform var(--tgl-transition-slow, 0.3s ease),
                border-color var(--tgl-transition-slow, 0.3s ease);
}

@media (hover: hover) {
    .tgla .tgla-card:hover {
        transform: translateY(-0.5rem);
        border-color: rgba(127, 215, 222, 0.45);
    }
}

.tgla .tgla-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-image: repeating-linear-gradient(45deg, #1d5158 0 12px, #235a61 12px 24px);
}

/* Absolutely positioned rather than width/height 100%: WordPress prints the
   file's own width/height on the tag, and themes routinely ship
   `img { height: auto }`, which together leave the photo sitting at its own
   ratio in the top of the box instead of filling it. `inset: 0` cannot be
   undone by a height declaration. */
.tgla .tgla-card__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.tgla .tgla-card__tag {
    position: absolute;
    top: 0.875rem;
    left: 0.875rem;
    padding: 0.4375rem 0.75rem;
    border-radius: 999px;
    background: rgba(9, 38, 42, 0.72);
    color: var(--tgl-text-inverse);
    font-family: inherit;
    font-size: 0.71875rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.2;
    text-transform: uppercase;
}

.tgla .tgla-card__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem 1.75rem;
}

.tgla .tgla-card__title {
    margin: 0;
    font-family: var(--tgla-font-display);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--tgla-ink);
    text-wrap: pretty;
}

.tgla .tgla-card__body {
    margin: 0;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.68;
    color: var(--tgla-ink-muted);
    text-wrap: pretty;
}

/* ── Progress ────────────────────────────────────── */

.tgla .tgla__progress {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-top: 0.75rem;
}

.tgla .tgla__track {
    position: relative;
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
}

.tgla .tgla__thumb {
    position: absolute;
    top: 0;
    left: 0;
    /* Zero until the script measures the rail — a bar showing a made-up
       position would be worse than no bar. */
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--tgla-accent-soft);
    transition: left 0.15s linear, width 0.15s linear;
}

.tgla .tgla__hint {
    flex: none;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tgla-ink-dim);
}

/* ── Desktop ─────────────────────────────────────── */

@media (min-width: 48em) {
    .tgla {
        --tgla-gap: 1.5rem;
        --tgla-card: 24rem;
    }

    .tgla .tgla__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 3rem;
    }

    .tgla .tgla__headings {
        flex: 1 1 auto;
    }

    .tgla .tgla__nav {
        flex: none;
        flex-direction: column;
        align-items: flex-end;
        gap: 1.125rem;
        margin-top: 0;
    }

    .tgla .tgla-card__text {
        padding: 1.625rem 1.625rem 1.875rem;
    }

    .tgla .tgla-card__title {
        font-size: 1.5rem;
    }
}

/* The hint says "Drag to explore", which is a lie on a touch device. */
@media (hover: none) {
    .tgla .tgla__hint {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tgla .tgla__rail {
        scroll-behavior: auto;
    }

    .tgla .tgla-card,
    .tgla .tgla__btn,
    .tgla .tgla__thumb {
        transition: none;
    }
}