/* ── Activities slider (vanilla rebuild) ───────────────────────────────────
 *
 * Restored 2026-06-08 from the pre-slick-removal CSS. Visual identity
 * preserved 1:1 — chunky gamified prev/next buttons, cyan-glow ring on
 * the active card image, thumbnail-with-cyan-border grid that lights
 * the active card up bright. The slick-specific selectors are gone
 * (`.slick-slide`, `.activities-slider .slick-slide` etc.) since we
 * don't have slick anymore; their padding/spacing rules now apply
 * directly to `.activity-slide`.
 *
 * The viewport / track layer is new — `.fz-activities-slider-viewport`
 * is overflow:hidden, `.fz-activities-slider-track` is a flex row of
 * full-width slides that js/activities-slider.js drives with
 * translateX. Reduced-motion users get an instant snap instead of the
 * 500 ms slide animation.
 */

/* Activities section wrapper — full-bleed, 100vh hero-style canvas.
 *
 * BG image (Fundo-gift-voucher-2.png) is injected inline as
 * --fz-activities-slider-bg via wp_upload_dir()['baseurl'] so the URL
 * stays portable across local / stg / prod without webpack trying to
 * resolve a site-relative path at build time. Solid #0a0a24 fallback
 * paints if the upload ever 404s.
 *
 * Full-bleed trick: `width: 100vw` + symmetric negative horizontal
 * margins make the section escape Flatsome's .row-main / .col-inner
 * wrappers (which add horizontal + vertical padding around shortcodes).
 * Top negative margin pulls up over the wrapper's top padding so the
 * white "gap" between the previous element and the section is gone.
 *
 * Inner flex column vertically centres the slider + thumbnails inside
 * the 100vh canvas so the layout reads as "hero section, content
 * floats in the middle, decorative title image floats top-left".
 */
.activities-section {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    min-height: 100vh;
    margin-left:  calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top:    -3rem;
    margin-bottom: 0;
    padding: 5rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        var(--fz-activities-slider-bg) center / cover no-repeat,
        #0a0a24;
    overflow: hidden;
}

/* Top-left "Activities" title image — behaves like a pinball flipper
   at rest. Most of the cycle it sits still; every ~4 s it does a fast
   flap (a sharp up-rotation followed by a softer overshoot back to
   rest) like the paddle hitting a ball. transform-origin near the
   bottom-left of the image so the right edge swings in a wide arc,
   the way a real flipper paddle would.

   Honours prefers-reduced-motion — falls back to no animation, image
   stays static. */
.fz-activities-title-img {
    position: absolute;
    /* Title image bleeds OFF the left edge of the section — overflow:
       hidden on .activities-section clips the rounded-off-card edges
       so what shows on-screen reads as a clean banner instead of a
       floating asset with visible borders. Negative left value scales
       with viewport so on a 1920 px screen the bleed is generous; on
       small screens it's tighter so the visible portion still fits. */
    top: clamp(0.5rem, 2vw, 2rem);
    left: clamp(-4rem, -3vw, -1.5rem);
    z-index: 5;
    /* Bumped 50 % from the earlier clamp(180px, 22vw, 350px) per JP. */
    width: clamp(280px, 33vw, 525px);
    height: auto;
    transform-origin: 12% 88%;
    /* Idle: 7 s cycle, mostly rest, brief flap embedded near the end —
       longer interval between autonomous flaps so the motion feels
       like an idle paddle waiting for a ball instead of a constant
       wobble. */
    animation: fz-activities-title-flap 7s cubic-bezier(0.18, 0.89, 0.32, 1.28) infinite;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
    /* Removed pointer-events: none so the :hover swap below fires
       when the user mouses over the title; the image isn't a click
       target so it doesn't conflict with the slider chrome below. */
}

/* Hover: a sharper one-shot flap (-22° apex vs the idle's -18°,
   tighter 0.85 s duration) — reads like the user "flips the paddle"
   on demand. Different animation-name from the idle loop so the
   engine treats each mouseenter as a fresh restart instead of
   resuming a partial cycle. */
.fz-activities-title-img:hover {
    animation: fz-activities-title-flap-hover 0.85s ease-out;
}

@keyframes fz-activities-title-flap {
    0%, 80%, 100% { transform: rotate(0deg); }
    85%           { transform: rotate(-18deg); }
    90%           { transform: rotate(2deg); }
    95%           { transform: rotate(-6deg); }
}

@keyframes fz-activities-title-flap-hover {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-22deg); }
    50%  { transform: rotate(5deg); }
    75%  { transform: rotate(-8deg); }
    100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .fz-activities-title-img,
    .fz-activities-title-img:hover { animation: none; }
}

/* Description body — was font-size .8rem + line-height 15px, which was
   tight even for the original 1-2 sentence excerpts. Relaxed slightly so
   the longer activity_description prose stays comfortable to read; same
   centred body the original had. */
.activity-slide .activity-info p {
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0.4rem 0;
}

button.gamefied,
a.gamefied {
    position: relative;
    width: 55px;
    height: 50px;
    background-color: #303795;
    border-radius: 15px;
    border-bottom: 2px solid #6d70af;
    border-top: 2px solid #505163;
    z-index: 10;
    padding: 0;
    box-shadow: 0px 15px 0px -1px #303795;
    transition: all 0.1s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

button.gamefied:active {
    transform: translateY(8px);
    box-shadow: none;
    border: none;
}

button.gamefied:active::before {
    display: none;
}

/* ── Viewport + track (new — replaces slick's own DOM mutation) ──────── */

.fz-activities-slider-viewport {
    overflow: hidden;
    position: relative;
}
.fz-activities-slider-viewport:focus-visible {
    outline: 2px solid #00f0ff;
    outline-offset: 2px;
}

.fz-activities-slider-track {
    display: flex;
    align-items: stretch;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.fz-activities-slider-track > .activity-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    padding: 0 2.3rem;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    .fz-activities-slider-track { transition: none !important; }
}

/* ── Slide card visuals (preserved) ──────────────────────────────────── */

.activity-image {
    overflow: hidden;
    border-radius: 10px;
}

.activity-image img {
    object-fit: cover;
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0, 187, 211, 1);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0, 187, 211, 1);
    box-shadow: 0px 0px 10px 5px rgba(0, 187, 211, 1);
    border: 0px solid rgba(0, 187, 211, 1);
    border-radius: 15px;
}

.activity-title {
    padding: 10px;
    text-align: center;
}

.slider-thumbnails .thumbnails {
    display: none;
}

/* Thumbnail wrapper owns the aspect-ratio so every thumbnail renders at
   the same shape regardless of how the source image is cropped — the
   Birthday Parties photo is 16:9 wide while the others are roughly 4:3,
   which made the first thumbnail render shorter/narrower than the
   others. Forcing 4:3 + object-fit: cover keeps the strip uniform. */
.activity-thumbnail-inner {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 3px solid rgba(0, 187, 211, 1);
    border-radius: 15px;
}
.activity-thumbnail-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* border + radius now on .activity-thumbnail-inner so it applies
       even when the <img> hasn't loaded yet (no flash of un-bordered
       empty space). */
}

.selected-thumbnail {
    -webkit-box-shadow: 2px 1px 25px 14px rgba(0, 187, 211, 1);
    -moz-box-shadow: 2px 1px 25px 14px rgba(0, 187, 211, 1);
    box-shadow: 2px 1px 25px 14px rgba(0, 187, 211, 1);
    transition: box-shadow 0.3s ease, border 0.3s ease;
}

/* Responsive adjustments. The pre-slick design added a stacked
   `.activities-container { margin-top: 5rem … 14rem }` ladder across
   breakpoints to push the slider down past the hero section it shared
   a stacking context with. With the 100vh + full-bleed section, those
   top margins reopened the white gap above the slider that we just
   closed; they're gone now. Only the slide horizontal padding ladder
   remains — that one's still needed so the slide card stays narrower
   on wide screens. */
@media only screen and (min-width: 425px) {
    .fz-activities-slider-track > .activity-slide {
        padding: 0 3.2rem;
    }
}

@media only screen and (min-width: 549px) {
    .fz-activities-slider-track > .activity-slide {
        padding: 0 5rem;
    }
}

@media only screen and (min-width: 660px) {
    .fz-activities-slider-track > .activity-slide {
        padding: 0 8rem;
    }
}

@media only screen and (min-width: 1024px) {
    .slider-thumbnails .thumbnails {
        display: grid;
    }
}