/* ============================================================
   ACTS CAROUSEL — CSS-driven stacked carousel + video modal
   Card width is calculated from --acts-slides-* using calc()
   ============================================================ */



:root {
    --acts-bg:          #000000;
    --acts-gap:         20px;
    --acts-card-radius: 22px;
    --acts-title-color: #ffffff;
    --acts-scale-off:   0.82;
    --acts-dim:         1;
    --acts-font-title:  'Playfair Display', sans-serif;
    --acts-font-body:   'Montserrat', sans-serif;
    --acts-transition:  0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * All PHP-injected and breakpoint-switched vars live on .acts-section.
 * This means the inline style (PHP) and the media query overrides
 * share the same specificity — media queries win because they come last.
 */
.acts-section {
    /* Fallback defaults — PHP overrides these inline */
    --acts-card-h-desktop: 460px;
    --acts-card-h-tablet:  400px;
    --acts-card-h-mobile:  360px;
    --acts-slides-desktop: 5;
    --acts-slides-tablet:  3;
    --acts-slides-mobile:  1;

    /* Active values — desktop by default */
    --acts-card-h: var(--acts-card-h-desktop);
    --acts-card-w: calc(
        (96vw - (var(--acts-slides-desktop) - 1) * var(--acts-gap))
        / var(--acts-slides-desktop)
    );
}

/* ── Remove ALL focus outlines for carousel elements ── */
.acts-nav:focus,
.acts-nav:focus-visible,
.acts-dot:focus,
.acts-dot:focus-visible,
.acts-card:focus,
.acts-card:focus-visible,
.acts-modal__close:focus,
.acts-modal__close:focus-visible,
.acts-slide.is-active:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ── Section ── */
.acts-section {
    background: var(--acts-bg);
    padding: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.acts-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
}

/* ── Wrapper ── */
.acts-carousel-wrapper {
    position: relative;
    z-index: 1;
}

/* ── Track ── */
.acts-track {
    display: flex;
    align-items: center;
    gap: var(--acts-gap);
    overflow-x: auto;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 40px calc(50vw - var(--acts-card-w) / 2);
    cursor: grab;
    scroll-behavior: auto; /* JS overrides this per action */
}

.acts-track:active { cursor: grabbing; }
.acts-track::-webkit-scrollbar { display: none; }

/* ── Slide ── */
.acts-slide {
    flex: 0 0 var(--acts-card-w);
    scroll-snap-align: center;
    /* transform: scale(var(--acts-scale-off)); */
    opacity: var(--acts-dim);
    filter: brightness(0.8);
    transition:
        transform var(--acts-transition),
        opacity   var(--acts-transition),
        filter    var(--acts-transition);
    will-change: transform, opacity, filter;
}

.acts-slide.is-active {
    /* transform: scale(0.95); */
    opacity: 1;
    filter: brightness(1);
}

/* ── Card ── */
.acts-card {
    display: block;
    border-radius: var(--acts-card-radius);
    overflow: hidden;
    position: relative;
    width: var(--acts-card-w);
    height: var(--acts-card-h);
    background: #111;
/*     box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 30px 80px rgba(0,0,0,0.7); */
}

.acts-image.has-video { cursor: pointer; }

/* Image is now an <a> tag — make it behave like a block */
.acts-card__image {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.acts-card__image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.6s ease;
    pointer-events: none;
}

.acts-slide.is-active .acts-card__image img {
    transform: scale(1.03);
}

.acts-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
}

.acts-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.2)  45%,
        transparent      70%
    );
    border-radius: var(--acts-card-radius);
    z-index: 1;
    transition: opacity 0.3s ease;
    pointer-events: none; /* let clicks pass through to the image link */
}

/* .acts-card.has-video:hover::after { opacity: 0.7; } */

/* ── Play button ── */
.acts-card__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* purely decorative — Watch Now handles the click */
}

.acts-card__play svg {
    width: 56px;
    height: 56px;
    color: #fff;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.6));
    transform: scale(0.85);
    transition: transform 0.3s ease;
}

.acts-slide.is-active .acts-card.has-video:hover .acts-card__play { opacity: 1; }
.acts-slide.is-active .acts-card.has-video:hover .acts-card__play svg { transform: scale(1); }

/* ── Title ── */
.acts-card__title, .acts-watch_now {
    padding: 28px 12px 26px;
}

.acts-card__title span {
    font-family: var(--acts-font-title);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    color: var(--acts-title-color);
    text-transform: uppercase;
    line-height: 1.1;
    display: block;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* ── Nav ── */
.acts-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgb(201, 168, 106);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: background 0.25s ease, transform 0.25s ease;
    padding: 0;
}

#ac_homepage_prev:focus, #ac_homepage_next:focus {
    background: rgba(255,255,255,0.08);
}

.acts-nav svg { width: 20px; height: 20px; }
.acts-nav:hover { background: rgba(255,255,255,0.18); transform: translateY(-50%) scale(1.08); }
.acts-nav--prev { left: 20px; }
.acts-nav--next { right: 20px; }

/* ── Dots ── */
.acts-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.acts-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease;
}

.acts-dot.is-active {
    background: #fff;
    width: 22px;
    border-radius: 3px;
}

/* ── Empty ── */
.acts-empty {
    color: rgba(255,255,255,0.4);
    text-align: center;
    font-family: var(--acts-font-body);
    padding: 60px 20px;
}

/* ── Tablet: 1024px – 1599px ── */
@media (max-width: 1599px) {
    .acts-section {
        --acts-card-h: var(--acts-card-h-tablet);
        --acts-card-w: calc(
            (96vw - (var(--acts-slides-tablet) - 1) * var(--acts-gap))
            / var(--acts-slides-tablet)
        );
    }

    .acts-track {
        padding: 40px calc(50vw - var(--acts-card-w) / 2);
    }
}

/* ── Mobile: 300px – 1023px ── */
@media (max-width: 1023px) {
    .acts-section {
        --acts-card-h: var(--acts-card-h-mobile);
        --acts-card-w: calc(
            (96vw - (var(--acts-slides-mobile) - 1) * var(--acts-gap))
            / var(--acts-slides-mobile)
        );
    }

    .acts-track {
        padding: 30px calc(50vw - var(--acts-card-w) / 2);
    }

    .acts-card__title span { font-size: 1.5rem; }

    .acts-nav { width: 38px; height: 38px; }

    /* Always show play icon on mobile (no hover) */
    .acts-slide.is-active .acts-card.has-video .acts-card__play { opacity: 1; }
    .acts-slide.is-active .acts-card.has-video .acts-card__play svg { transform: scale(1); }
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */

.acts-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.acts-modal.is-open {
    opacity: 1;
    pointer-events: all;
}

.acts-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.acts-modal__box {
    position: relative;
    z-index: 1;
    width: 90vw;
    max-width: 960px;
    transform: scale(0.92) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.acts-modal.is-open .acts-modal__box {
    transform: scale(1) translateY(0);
}

.acts-modal__video-wrap {
    position: relative;
    width: 100%;
    border-radius: 0px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 40px 120px rgba(0,0,0,0.9);
}

.acts-modal__video-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.acts-modal__close {
    position: absolute;
    top: -48px;
    right: 0;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.acts-modal__close svg { width: 16px; height: 16px; }

.acts-modal__close:hover {
    background: rgba(255,255,255,0.22);
    transform: scale(1.1) rotate(90deg);
}

@media (max-width: 1023px) {
    .acts-modal__box { width: 95vw; }
    .acts-modal__close { top: -44px; }
}

.bottom-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    background: #000000;
    justify-content: space-between;
}

.acts-watch_now {
    cursor: pointer;
}

.acts-watch_now span {
    font-family: "Montserrat";
    font-size: 12px;
    text-transform: uppercase;
    color: white;
}

/* Title link — inherits style, no underline */
.acts-card__title a {
    text-decoration: none;
    color: inherit;
}


.acts-card__title:hover a span {
    color: #c9a86a;
    text-decoration: none !important;
}

.acts-watch_now:hover span {
    color: #c9a86a;
}

.acts-slide {
    border: 1px solid rgb(201, 168, 106, 0.5);
}

.is-active {
  position: relative;
  --angle: 0deg;
  border: 2px solid;
  border-image: linear-gradient(
    var(--angle),
    #c9a86a,
    #9a8151,
    #f7efd4,
    #c9a86a,
    #9a8151,
    #f7efd4
  ) 1;
  animation: 10s rotate linear infinite;
}

.is-active::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    var(--angle),
    rgba(201,168,106,0.6),
    rgba(154,129,81,0.5),
    rgba(247,239,212,0.8),
    rgba(201,168,106,0.6),
    rgba(154,129,81,0.5),
    rgba(247,239,212,0.8)
  );

  filter: blur(5px);
  opacity: 1;
  animation: 15s rotate linear infinite;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}