/* MFP Landing Page CMS — Public section styles
 *
 * Minimal, mobile-first styling for the database-driven section types
 * rendered by App\Helpers\WebsiteSections.  These styles are intentionally
 * self-contained and use a `ws-` prefix to avoid collisions with the legacy
 * marketing.css rules used by the hardcoded fallback layout.
 *
 * Brand consistency: reuses the `.btn`, `.btn-primary`, `.btn-secondary`,
 * `.btn-lg`, `.container`, and `.section-title` utility classes that
 * marketing.css already defines, so themed CMS sections inherit the same
 * typography, colours, and spacing.
 */

/* ─── CSS custom properties (overridable per-page) ───────────────────────── */
:root {
    --ws-brand:        #1a1a2e;
    --ws-brand-dark:   #0f0f1a;
    --ws-accent:       #e94560;
    --ws-accent-dark:  #c0392b;
    --ws-gold:         #f5a623;
    --ws-text-light:   #f1f5f9;
    --ws-text-muted:   rgba(255,255,255,.75);
    --ws-section-gap:  5rem;
}

.ws-section {
    position: relative;
    padding: var(--ws-section-gap) 0;
}
.ws-section .container {
    position: relative;
    z-index: 2;
}
.ws-image-edit-wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.ws-image-edit-wrap > img {
    width: 100%;
    height: 100%;
    display: block;
}
@media (max-width: 767.98px) {
    .ws-image-edit-wrap > img {
        object-position: var(--ws-mobile-object-position-x, 50%) var(--ws-mobile-object-position-y, 50%) !important;
        transform: translate3d(var(--ws-pan-x, 0%), var(--ws-pan-y, 0%), 0) scale(var(--ws-mobile-zoom, 1)) !important;
    }
}
.ws-image-edit-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(0,0,0,0) 45%, rgba(0,0,0,var(--ws-vignette-opacity,0.35)) 100%);
}
/* Alternating section backgrounds */
.ws-section:nth-of-type(even) {
    background: rgba(0,0,0,.02);
}

/* ─── Section animation presets ─────────────────────────────────────────── */
html.js-enabled .ws-anim-fade-in {
    opacity: 0;
    transition: opacity .65s cubic-bezier(.4,0,.2,1);
}
html.js-enabled .ws-anim-slide-in {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
html.js-enabled .ws-anim-zoom-in {
    opacity: 0;
    transform: scale3d(.92, .92, 1);
    transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
html.js-enabled .ws-anim-slide-left {
    opacity: 0;
    transform: translate3d(40px, 0, 0);
    transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
html.js-enabled .ws-anim-slide-right {
    opacity: 0;
    transform: translate3d(-40px, 0, 0);
    transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
html.js-enabled .ws-anim-flip-up {
    opacity: 0;
    transform: perspective(600px) rotateX(12deg) translateY(20px);
    transform-origin: bottom center;
    transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.4,0,.2,1);
}
html.js-enabled .ws-anim-fade-in.ws-anim-visible,
html.js-enabled .ws-anim-slide-in.ws-anim-visible,
html.js-enabled .ws-anim-zoom-in.ws-anim-visible,
html.js-enabled .ws-anim-slide-left.ws-anim-visible,
html.js-enabled .ws-anim-slide-right.ws-anim-visible,
html.js-enabled .ws-anim-flip-up.ws-anim-visible {
    opacity: 1;
    transform: none;
}
html.js-enabled .ws-anim-parallax {
    transform: translate3d(0, var(--ws-parallax-offset, 0px), 0);
    will-change: transform;
}

/* ── Animation delay modifiers ────────────────────────────────────────────── */
html.js-enabled .ws-anim-delay-100 { transition-delay: 100ms !important; }
html.js-enabled .ws-anim-delay-200 { transition-delay: 200ms !important; }
html.js-enabled .ws-anim-delay-300 { transition-delay: 300ms !important; }
html.js-enabled .ws-anim-delay-400 { transition-delay: 400ms !important; }
html.js-enabled .ws-anim-delay-500 { transition-delay: 500ms !important; }

/* ── Animation duration modifiers ─────────────────────────────────────────── */
html.js-enabled .ws-anim-dur-fast {
    transition-duration: 350ms !important;
}
html.js-enabled .ws-anim-dur-slow {
    transition-duration: 950ms !important;
}

/* ── Animation easing modifiers ───────────────────────────────────────────── */
html.js-enabled .ws-anim-ease-ease-in-out {
    transition-timing-function: ease-in-out !important;
}
html.js-enabled .ws-anim-ease-spring {
    transition-timing-function: cubic-bezier(.34,1.56,.64,1) !important;
}
html.js-enabled .ws-anim-ease-bounce {
    transition-timing-function: cubic-bezier(.68,-.55,.27,1.55) !important;
}

/* ── Stagger children ─────────────────────────────────────────────────────── */
html.js-enabled .ws-stagger > * {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
html.js-enabled .ws-stagger.ws-anim-visible > *:nth-child(1)  { transition-delay:  50ms; }
html.js-enabled .ws-stagger.ws-anim-visible > *:nth-child(2)  { transition-delay: 110ms; }
html.js-enabled .ws-stagger.ws-anim-visible > *:nth-child(3)  { transition-delay: 170ms; }
html.js-enabled .ws-stagger.ws-anim-visible > *:nth-child(4)  { transition-delay: 230ms; }
html.js-enabled .ws-stagger.ws-anim-visible > *:nth-child(5)  { transition-delay: 290ms; }
html.js-enabled .ws-stagger.ws-anim-visible > *:nth-child(6)  { transition-delay: 350ms; }
html.js-enabled .ws-stagger.ws-anim-visible > *:nth-child(7)  { transition-delay: 410ms; }
html.js-enabled .ws-stagger.ws-anim-visible > *:nth-child(8)  { transition-delay: 470ms; }
html.js-enabled .ws-stagger.ws-anim-visible > *:nth-child(n+9){ transition-delay: 530ms; }
html.js-enabled .ws-stagger.ws-anim-visible > * {
    opacity: 1;
    transform: none;
}

/* ── Hover effects ────────────────────────────────────────────────────────── */
.ws-hover-lift {
    transition: box-shadow .25s ease, transform .25s ease;
    cursor: default;
}
.ws-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.ws-hover-glow {
    transition: box-shadow .25s ease;
}
.ws-hover-glow:hover {
    box-shadow: 0 0 0 4px rgba(var(--color-accent-rgb, 99,102,241),.35),
                0 8px 24px rgba(0,0,0,.12);
}
.ws-hover-scale {
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.ws-hover-scale:hover {
    transform: scale(1.025);
}
/* Tilt effect uses JS — the CSS just sets up perspective and smooth return */
.ws-hover-tilt {
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
    will-change: transform;
}
.ws-hover-tilt:not(:hover) {
    transform: perspective(900px) rotateX(0deg) rotateY(0deg);
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

@media (prefers-reduced-motion: reduce) {
    html.js-enabled .ws-anim-fade-in,
    html.js-enabled .ws-anim-slide-in,
    html.js-enabled .ws-anim-zoom-in,
    html.js-enabled .ws-anim-slide-left,
    html.js-enabled .ws-anim-slide-right,
    html.js-enabled .ws-anim-flip-up,
    html.js-enabled .ws-anim-parallax,
    html.js-enabled .ws-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ws-hover-lift,
    .ws-hover-glow,
    .ws-hover-scale,
    .ws-hover-tilt {
        transition: none;
    }
    .ws-hover-lift:hover,
    .ws-hover-scale:hover { transform: none; }
    .ws-hover-tilt        { transform: none; }
}

/* ─── Alignment helpers ──────────────────────────────────────────────────── */
.ws-align-left   { text-align: left;   }
.ws-align-center { text-align: center; }
.ws-align-right  { text-align: right;  }

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.ws-hero {
    background: var(--ws-brand);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hero with a background image gets an enhanced gradient overlay for readability */
.ws-hero.ws-hero-has-bg {
    background-color: #000;
}
.ws-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.ws-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ws-hero-mobile-fallback {
    position: absolute;
    inset: 0;
    display: none;
}
.ws-hero-mobile-fallback img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 767px) {
    .ws-hero.ws-hero-has-video .ws-hero-video { display: none; }
    .ws-hero.ws-hero-has-video .ws-hero-mobile-fallback { display: block; }
}
.ws-hero-short  { min-height: 340px;  }
.ws-hero-medium { min-height: 520px;  }
.ws-hero-tall   { min-height: 760px;  }
.ws-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.ws-hero-content {
    padding: 3rem 0;
}
.ws-hero-headline {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 1rem 0;
    letter-spacing: -.02em;
    text-shadow: 0 2px 16px rgba(0,0,0,.35);
}
/* Placeholder text for empty heroes */
.ws-hero-headline.ws-placeholder {
    opacity: .35;
    font-style: italic;
}
.ws-hero-sub {
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    max-width: 44rem;
    margin: 0 auto 2rem;
    opacity: .92;
    line-height: 1.65;
    text-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.ws-hero.ws-align-left  .ws-hero-sub { margin-left: 0;    margin-right: auto; }
.ws-hero.ws-align-right .ws-hero-sub { margin-left: auto; margin-right: 0;   }
.ws-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: inherit;
}
.ws-hero.ws-align-center .ws-hero-cta { justify-content: center; }
.ws-hero.ws-align-left   .ws-hero-cta { justify-content: flex-start; }
.ws-hero.ws-align-right  .ws-hero-cta { justify-content: flex-end; }
.ws-hero .btn-lg {
    padding: 1rem 2.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 3rem;
    letter-spacing: .01em;
}

/* ── Hero style presets ──────────────────────────────────────────────────── */

/* Cinematic: full-bleed, bold typography, bottom-fade gradient */
.ws-hero-preset-cinematic {
    background-position: center top;
}
.ws-hero-preset-cinematic .ws-hero-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.15) 0%,
        rgba(0,0,0,.5) 60%,
        rgba(0,0,0,.75) 100%
    ) !important;
}
.ws-hero-preset-cinematic .ws-hero-headline {
    font-size: clamp(2.75rem, 7vw, 5rem);
    letter-spacing: -.03em;
    text-shadow: 0 4px 24px rgba(0,0,0,.6);
}
.ws-hero-preset-cinematic .ws-hero-content {
    padding-bottom: 5rem;
    align-self: flex-end;
}
.ws-hero-preset-cinematic {
    align-items: flex-end;
}

/* Glass card: frosted-glass content box in centre */
.ws-hero-preset-glass-card .ws-hero-content {
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 1.25rem;
    padding: 3rem 3.5rem;
    max-width: 680px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
@media (max-width: 640px) {
    .ws-hero-preset-glass-card .ws-hero-content { padding: 2rem 1.5rem; }
}

/* Dark event / concert look */
.ws-hero-preset-dark-event {
    background-color: #050510;
}
.ws-hero-preset-dark-event .ws-hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(233,69,96,.18) 0%,
        rgba(0,0,0,.7) 60%
    ) !important;
}
.ws-hero-preset-dark-event .ws-hero-headline {
    background: linear-gradient(90deg, #fff 30%, var(--ws-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

/* Split: aligns content to the left half */
.ws-hero-preset-split {
    align-items: center;
}
.ws-hero-preset-split .ws-hero-overlay {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.4) 50%,
        rgba(0,0,0,.05) 100%
    ) !important;
}
.ws-hero-preset-split .ws-hero-content {
    max-width: 580px;
    text-align: left;
    margin-right: auto;
}
.ws-hero-preset-split .ws-hero-cta { justify-content: flex-start; }

/* ─── Empty media placeholder ─────────────────────────────────────────────── */
.ws-media-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 180px;
    background: rgba(0,0,0,.04);
    border: 2px dashed rgba(0,0,0,.15);
    border-radius: .5rem;
    color: rgba(0,0,0,.4);
    font-size: .9rem;
    text-align: center;
    padding: 1.5rem;
}
.ws-media-placeholder span { font-size: 2.5rem; opacity: .5; }

/* ─── Text block ─────────────────────────────────────────────────────────── */
.ws-text .section-title { margin-top: 0; }
.ws-text-body p {
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    font-size: 1.05rem;
}
.ws-text.ws-align-left  .ws-text-body p { margin-left: 0;    margin-right: auto; }
.ws-text.ws-align-right .ws-text-body p { margin-left: auto; margin-right: 0;   }

/* ─── Text + Image split ─────────────────────────────────────────────────── */
.ws-text-image-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .ws-text-image-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.ws-text-image-media img {
    width: 100%;
    height: auto;
    border-radius: .75rem;
    display: block;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.ws-text-image-media .ws-media-placeholder {
    min-height: 260px;
}
.ws-text-image-body p {
    line-height: 1.7;
    font-size: 1.05rem;
}
.ws-text-image-text .btn {
    margin-top: 1.25rem;
}
.ws-text-image-text .section-title {
    margin-top: 0;
}
.ws-text-image-layout-stacked-mobile .ws-text-image-grid {
    grid-template-columns: 1fr;
}
.ws-text-image-feature-slideshow .ws-text-image-media,
.ws-text-image-feature-rotating_cards .ws-text-image-media {
    min-width: 0;
}
.ws-text-image-visual-carousel {
    border-radius: .75rem;
    box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.ws-text-image-visual-carousel .ws-slide {
    min-height: 320px;
}
.ws-text-image-visual-carousel .ws-slide-video {
    max-height: 520px;
}
.ws-text-image-cards-carousel .ws-slide {
    align-items: stretch;
}
.ws-text-image-cards-carousel .ws-text-image-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.ws-text-image-cards-carousel .ws-text-image-card-content {
    position: absolute;
    inset: auto 1rem 1rem 1rem;
    z-index: 2;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.ws-text-image-cards-carousel .ws-text-image-card-content h3 {
    margin: 0 0 .35rem 0;
    font-size: 1.25rem;
}
.ws-text-image-cards-carousel .ws-text-image-card-content p {
    margin: 0 0 .75rem 0;
    line-height: 1.45;
}

/* ─── Gallery ────────────────────────────────────────────────────────────── */
.ws-gallery { width: 100%; overflow: hidden; }
.ws-gallery .section-title    { margin-top: 0; text-align: center; }
.ws-gallery .section-intro    { text-align: center; margin-bottom: 1.5rem; }

/* Empty / placeholder state */
.ws-gallery-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 220px;
    border: 2px dashed rgba(255,255,255,.15);
    border-radius: .75rem;
    color: rgba(255,255,255,.5);
    font-size: 1rem;
    text-align: center;
    padding: 2rem;
}
.ws-gallery-empty-icon { font-size: 2.5rem; }
.ws-gallery-empty p   { margin: 0; }

/* ── Gallery item (shared across all modes) ─────────────────────────────── */
.ws-gallery-item {
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-radius: .375rem;
    background: rgba(0,0,0,.12);
}
/* Ensure image-edit-wrap fills the item */
.ws-gallery-item .ws-image-edit-wrap {
    width: 100%;
    height: 100%;
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
.ws-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.ws-gallery-item:hover img { transform: scale(1.04); }

/* Caption below image */
.ws-gallery-caption {
    padding: .45rem .65rem;
    font-size: .82rem;
    color: rgba(255,255,255,.85);
    line-height: 1.4;
    text-align: center;
    background: rgba(0,0,0,.35);
}
/* Text overlay on top of image */
.ws-gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .6rem .75rem;
    background: linear-gradient(transparent, rgba(0,0,0,var(--ws-overlay-dark,.5)));
    color: #fff;
    font-size: .85rem;
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
}

/* ── Rounded corners modifier ───────────────────────────────────────────── */
.ws-gallery-rounded .ws-gallery-item        { border-radius: 1rem; }
.ws-gallery-rounded .ws-gallery-item img    { border-radius: 1rem; }
.ws-gallery-rounded .ws-gallery-thumb img   { border-radius: .5rem; }

/* ── Aspect ratio modifiers ─────────────────────────────────────────────── */
/* auto = no forced height; others use padding-top trick via min-height */
.ws-gallery-ar-16x9  .ws-gallery-item { aspect-ratio: 16 / 9; }
.ws-gallery-ar-4x3   .ws-gallery-item { aspect-ratio: 4  / 3; }
.ws-gallery-ar-1x1   .ws-gallery-item { aspect-ratio: 1  / 1; }
.ws-gallery-ar-portrait .ws-gallery-item { aspect-ratio: 3  / 4; }
/* auto: use a comfortable fixed height as default */
.ws-gallery-ar-auto  .ws-gallery-item { height: 240px; }
/* Override for slideshow / feature to use auto height so images scale naturally */
.ws-gallery-slideshow.ws-gallery-ar-auto .ws-gallery-item,
.ws-gallery-feature-thumbnails.ws-gallery-ar-auto .ws-gallery-item { height: auto; }

/* ── Gap modifiers ──────────────────────────────────────────────────────── */
.ws-gallery-gap-small  .ws-gallery-grid,
.ws-gallery-gap-small  .ws-gallery-track  { gap: .375rem; }
.ws-gallery-gap-medium .ws-gallery-grid,
.ws-gallery-gap-medium .ws-gallery-track  { gap: 1rem; }
.ws-gallery-gap-large  .ws-gallery-grid,
.ws-gallery-gap-large  .ws-gallery-track  { gap: 1.75rem; }

/* ── Grid layout ────────────────────────────────────────────────────────── */
.ws-gallery-grid .ws-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
}

/* ── Masonry layout (CSS columns) ───────────────────────────────────────── */
.ws-gallery-masonry .ws-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    width: 100%;
}
.ws-gallery-masonry .ws-gallery-item:nth-child(3n)   { height: 300px; }
.ws-gallery-masonry .ws-gallery-item:nth-child(4n+1) { height: 190px; }
.ws-gallery-masonry .ws-gallery-item:nth-child(5n+2) { height: 260px; }
/* Override: masonry item heights take precedence over aspect-ratio */
.ws-gallery-masonry .ws-gallery-item { aspect-ratio: unset; }

/* ── Carousel layout (manual + autoplay) ───────────────────────────────── */
.ws-gallery-carousel .ws-gallery-carousel-wrap,
.ws-gallery-carousel-autoplay .ws-gallery-carousel-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    touch-action: pan-y;
}
.ws-gallery-carousel .ws-gallery-track,
.ws-gallery-carousel-autoplay .ws-gallery-track {
    display: flex;
    gap: 0;
    transition: transform .4s ease;
    width: 100%;
}
.ws-gallery-carousel .ws-gallery-item,
.ws-gallery-carousel-autoplay .ws-gallery-item {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: 360px;
}
@media (min-width: 768px) {
    .ws-gallery-carousel .ws-gallery-item,
    .ws-gallery-carousel-autoplay .ws-gallery-item { height: 480px; }
}
.ws-gallery-carousel .ws-gallery-item[hidden],
.ws-gallery-carousel-autoplay .ws-gallery-item[hidden],
.ws-gallery-slideshow .ws-gallery-slide[hidden] {
    /* Visually hidden but kept in flex flow for proper sizing */
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

/* ── Slideshow layout (fade) ────────────────────────────────────────────── */
.ws-gallery-slideshow .ws-gallery-slideshow-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.ws-gallery-slideshow .ws-gallery-slides {
    position: relative;
    width: 100%;
    min-height: 360px;
}
@media (min-width: 768px) {
    .ws-gallery-slideshow .ws-gallery-slides { min-height: 480px; }
}
.ws-gallery-slideshow .ws-gallery-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .65s ease;
}
.ws-gallery-slideshow .ws-gallery-slide.ws-gallery-slide-active {
    position: relative;
    opacity: 1;
    z-index: 1;
}
.ws-gallery-slideshow .ws-gallery-item { height: 100%; }

/* ── Feature + thumbnails layout ───────────────────────────────────────── */
.ws-gallery-feature-thumbnails .ws-gallery-feature-wrap { width: 100%; }
.ws-gallery-feature-thumbnails .ws-gallery-feature-main {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: .5rem;
}
.ws-gallery-feature-thumbnails .ws-gallery-feature-item {
    width: 100%;
    height: 400px;
}
@media (min-width: 768px) {
    .ws-gallery-feature-thumbnails .ws-gallery-feature-item { height: 520px; }
}
.ws-gallery-feature-thumbnails .ws-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
    justify-content: center;
}
.ws-gallery-thumb {
    flex: 0 0 auto;
    width: 72px;
    height: 52px;
    padding: 0;
    border: 2px solid rgba(255,255,255,.2);
    border-radius: .375rem;
    overflow: hidden;
    cursor: pointer;
    background: none;
    transition: border-color .2s ease, transform .2s ease;
}
.ws-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ws-gallery-thumb:hover,
.ws-gallery-thumb-active {
    border-color: var(--ws-accent, #e94560);
    transform: scale(1.06);
}

/* ── Prev / Next arrow buttons ──────────────────────────────────────────── */
.ws-gallery-prev,
.ws-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
    padding: 0;
}
.ws-gallery-prev { left: .75rem; }
.ws-gallery-next { right: .75rem; }
.ws-gallery-prev:hover,
.ws-gallery-next:hover {
    background: rgba(0,0,0,.8);
    transform: translateY(-50%) scale(1.1);
}

/* ── Dots ───────────────────────────────────────────────────────────────── */
.ws-gallery-dots {
    display: flex;
    justify-content: center;
    gap: .4rem;
    padding: .75rem 0 .25rem;
}
.ws-gallery-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, transform .2s ease;
}
.ws-gallery-dot-active,
.ws-gallery-dot:hover { background: var(--ws-accent, #e94560); transform: scale(1.2); }

/* ── Mobile swipe-carousel modifier ────────────────────────────────────── */
@media (max-width: 639px) {
    .ws-gallery-mobile-stacked-grid .ws-gallery-track {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        transform: none !important;
        overflow: visible;
        transition: none;
    }
    .ws-gallery-mobile-stacked-grid.ws-gallery-gap-small .ws-gallery-track { gap: .375rem; }
    .ws-gallery-mobile-stacked-grid.ws-gallery-gap-medium .ws-gallery-track { gap: 1rem; }
    .ws-gallery-mobile-stacked-grid.ws-gallery-gap-large .ws-gallery-track { gap: 1.75rem; }
    .ws-gallery-mobile-stacked-grid .ws-gallery-item {
        flex: unset;
        width: 100%;
        height: 180px;
        display: block !important;
        opacity: 1 !important;
        position: relative !important;
    }
    .ws-gallery-mobile-stacked-grid .ws-gallery-prev,
    .ws-gallery-mobile-stacked-grid .ws-gallery-next,
    .ws-gallery-mobile-stacked-grid .ws-gallery-dots { display: none; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ws-gallery-carousel .ws-gallery-track,
    .ws-gallery-carousel-autoplay .ws-gallery-track { transition: none; }
    .ws-gallery-slideshow .ws-gallery-slide          { transition: none; }
    .ws-gallery-item img,
    .ws-gallery-thumb,
    .ws-gallery-prev,
    .ws-gallery-next,
    .ws-gallery-dot { transition: none; animation: none; }
}

/* ─── CTA ────────────────────────────────────────────────────────────────── */
.ws-cta-inner {
    text-align: center;
    max-width: 38rem;
    margin: 0 auto;
}
.ws-cta .section-title { margin-top: 0; }
.ws-cta-sub p { line-height: 1.7; font-size: 1.05rem; }
.ws-cta-default {
    background: var(--off-white, #f8f9fa);
}
.ws-cta-alt {
    background: linear-gradient(135deg, #f8fafc 0%, #e8f0ff 100%);
}
.ws-cta-dark {
    background: linear-gradient(135deg, var(--ws-brand-dark) 0%, var(--ws-brand) 100%);
    color: #fff;
}
.ws-cta-dark .section-title { color: #fff; }
.ws-cta-dark .ws-cta-sub p  { color: rgba(255,255,255,.85); }
.ws-cta-dark .btn-primary {
    background: var(--ws-accent, #e94560);
    border-color: var(--ws-accent, #e94560);
    box-shadow: 0 4px 20px rgba(233,69,96,.35);
}
.ws-cta-dark .btn-primary:hover {
    box-shadow: 0 6px 28px rgba(233,69,96,.5);
}
/* Large CTA button pulse animation */
@keyframes ws-btn-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(233,69,96,.3); }
    50%       { box-shadow: 0 4px 32px rgba(233,69,96,.55); }
}
.ws-cta-dark .btn-lg {
    animation: ws-btn-pulse 2.8s ease-in-out infinite;
    border-radius: 3rem;
    padding: 1rem 2.25rem;
    font-size: 1.1rem;
}

/* ─── Spacer / divider ───────────────────────────────────────────────────── */
.ws-spacer-small  { height: 1.5rem; }
.ws-spacer-medium { height: 3.5rem; }
.ws-spacer-large  { height: 6rem;   }

/* ─── Video section ───────────────────────────────────────────────────────── */
.ws-video .section-title { margin-top: 0; }
.ws-video-frame {
    max-width: 1100px;
    margin: 0 auto;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,.2);
}
.ws-video-frame video {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

/* ─── Audio section ───────────────────────────────────────────────────────── */
.ws-audio-card {
    max-width: 820px;
    margin: 0 auto;
    padding: 1.25rem;
    border-radius: .75rem;
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.07);
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1.25rem;
    align-items: center;
}
.ws-audio-artwork {
    width: 96px;
    height: 96px;
    object-fit: cover;
}
.ws-audio-artwork-wrap {
    width: 96px;
    height: 96px;
    display: block;
    border-radius: .5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.ws-audio-card audio {
    width: 100%;
}
@media (max-width: 640px) {
    .ws-audio-card {
        grid-template-columns: 1fr;
    }
}

/* ─── Shared transcript ───────────────────────────────────────────────────── */
.ws-media-transcript {
    max-width: 820px;
    margin: 1.25rem auto 0;
}
.ws-media-transcript summary {
    cursor: pointer;
    font-weight: 600;
}
.ws-media-transcript p {
    line-height: 1.7;
}

/* ─── TalkBack feature ─────────────────────────────────────────────────────── */
.ws-talkback-feature .section-title { margin-top: 0; }
.ws-talkback-sub { text-align: center; margin: 0 auto 1.5rem; max-width: 52rem; }
.ws-talkback-sub p { line-height: 1.7; }
.ws-talkback-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .ws-talkback-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.ws-talkback-card {
    border: 1px solid rgba(0,0,0,.1);
    border-radius: .75rem;
    padding: 1.25rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    transition: box-shadow .2s;
}
.ws-talkback-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,.1);
}
.ws-talkback-card h3 { margin: 0 0 .35rem; }
.ws-talkback-host { margin: 0 0 .5rem; opacity: .8; font-size: .9rem; }
.ws-talkback-meta { margin: 0 0 .6rem; font-size: .8rem; opacity: .75; display: flex; gap: .6rem; flex-wrap: wrap; }
.ws-talkback-artwork { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ws-talkback-artwork-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    margin-bottom: .75rem;
    border-radius: .35rem;
}
.ws-talkback-card audio { width: 100%; margin-bottom: .7rem; }
.ws-talkback-desc p { margin-top: 0; }
.ws-talkback-transcript summary { cursor: pointer; font-weight: 600; }
.ws-talkback-more { text-align: center; margin: 1.5rem 0 0; }

/* ─── Mixed-media slideshow ─────────────────────────────────────────────────── */
.ws-slideshow { overflow: hidden; }
.ws-slideshow .section-title { margin-top: 0; }
.ws-slideshow .section-intro { text-align: center; margin-bottom: 1.25rem; }
.ws-slideshow-carousel {
    position: relative;
    width: 100%;
    background: #000;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    border-radius: .5rem;
}
.ws-slideshow-track {
    display: flex;
}
.ws-slide {
    position: relative;
    flex: 0 0 100%;
    min-height: 380px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ws-slide[hidden] { display: none !important; }
.ws-slide > .ws-image-edit-wrap { height: 100%; }

/* Image slide */
.ws-slide-img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    max-height: 80vh;
    object-fit: cover;
    display: block;
}

/* Video slide */
.ws-slide-video-wrap {
    position: relative;
    width: 100%;
}
.ws-slide-video {
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    background: #000;
}
.ws-slide-mute-btn {
    position: absolute;
    bottom: .75rem;
    right: .75rem;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .375rem;
    padding: .3rem .6rem;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    transition: background .15s;
}
.ws-slide-mute-btn:hover,
.ws-slide-mute-btn:focus { background: rgba(0,0,0,.85); outline: none; }

/* TalkBack slide */
.ws-slide-talkback {
    align-items: flex-start;
    justify-content: center;
    background: #fff;
    color: #111;
}
.ws-slide-talkback-inner {
    padding: 2rem;
    max-width: 640px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
}
.ws-slide-talkback-inner audio { width: 100%; margin: .75rem 0; }

/* Caption overlay */
.ws-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .75rem 1rem;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff;
    font-size: .95rem;
    text-align: center;
    line-height: 1.4;
}

/* CTA button over slide */
.ws-slide-cta {
    position: absolute;
    bottom: 3.25rem;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 5;
}
.ws-slide-caption + .ws-slide-cta { bottom: 4rem; }

/* Prev / Next buttons */
.ws-slideshow-prev,
.ws-slideshow-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.45);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s;
}
.ws-slideshow-prev:hover,
.ws-slideshow-prev:focus,
.ws-slideshow-next:hover,
.ws-slideshow-next:focus { background: rgba(0,0,0,.75); outline: none; }
.ws-slideshow-prev { left: .75rem; }
.ws-slideshow-next { right: .75rem; }

/* Dot indicators */
.ws-slideshow-dots {
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .25rem;
    z-index: 10;
}
.ws-slideshow-dot {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
}
.ws-slideshow-dot::before {
    content: '';
    display: block;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    transition: background .2s, transform .2s;
}
.ws-slideshow-dot.active::before {
    background: #fff;
    transform: scale(1.3);
}

/* Slide counter */
.ws-slideshow-counter {
    position: absolute;
    top: .65rem;
    right: .75rem;
    font-size: .8rem;
    color: rgba(255,255,255,.9);
    background: rgba(0,0,0,.45);
    padding: .2rem .5rem;
    border-radius: .25rem;
    z-index: 10;
    line-height: 1.4;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .ws-slideshow-dot,
    .ws-slideshow-dot::before,
    .ws-slideshow-prev,
    .ws-slideshow-next,
    .ws-slide-mute-btn,
    .ws-cta-dark .btn-lg,
    .ws-talkback-card { transition: none; animation: none; }
}

/* ─── Phase 6: Responsive Editing System ─────────────────────────────────── */

/*
 * Responsive visibility helpers.
 * Applied by WebsiteSections::renderPage() based on per-section DB columns.
 *
 * ws-hide-mobile  → hidden on screens ≤ 767 px
 * ws-hide-tablet  → hidden on screens 768–1023 px
 * ws-hide-desktop → hidden on screens ≥ 1024 px
 *
 * The classes use !important so they reliably override any display value set
 * by the section renderer (flex, grid, block, etc.).
 */
@media (max-width: 767px) {
    .ws-hide-mobile {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .ws-hide-tablet {
        display: none !important;
    }
}
@media (min-width: 1024px) {
    .ws-hide-desktop {
        display: none !important;
    }
}

/*
 * Device-preview frame constraints used by the CMS editor device switcher.
 * The iframe container gets a data-device attribute which controls the
 * max-width of the preview shell so editors can visualise how each breakpoint
 * will look without leaving the CMS workspace.
 */
.ws-preview-device-bar {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-left: auto;
}
.ws-device-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .375rem;
    border: 1px solid rgba(255,255,255,.18);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}
.ws-device-btn:hover {
    background: rgba(255,255,255,.08);
    color: #e2e8f0;
    border-color: rgba(255,255,255,.3);
}
.ws-device-btn.ws-device-active {
    background: rgba(99,102,241,.25);
    color: #a5b4fc;
    border-color: #6366f1;
}

/* Simulated device widths inside the preview wrapper */
.ws-preview-wrap[data-device="desktop"] .ws-preview-frame {
    width: 100%;
    margin: 0 auto;
}
.ws-preview-wrap[data-device="tablet"] .ws-preview-frame {
    width: 768px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}
.ws-preview-wrap[data-device="mobile"] .ws-preview-frame {
    width: 375px;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 11 — Structured Content section types
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared section wrapper ─────────────────────────────────────────────── */
.section-testimonials-block,
.section-faq-block,
.section-team-block,
.section-packages-block,
.section-announcements-block,
.section-venues-block {
    padding: 4rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Cards grid layout ──────────────────────────────────────────────────── */
.sc-layout-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
@media (max-width: 640px) {
    .sc-layout-cards { grid-template-columns: 1fr; }
}

/* ── List layout ────────────────────────────────────────────────────────── */
.sc-layout-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ── Carousel layout (basic horizontal scroll) ──────────────────────────── */
.sc-layout-carousel {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-top: 2rem;
    padding-bottom: .5rem;
}
.sc-layout-carousel > * {
    scroll-snap-align: start;
    flex: 0 0 280px;
}

/* ── Testimonial card ───────────────────────────────────────────────────── */
.sc-testimonial-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.sc-stars { color: #f59e0b; font-size: 1rem; letter-spacing: .1em; }
.sc-testimonial-text { font-size: .97rem; line-height: 1.65; color: #cbd5e1; font-style: italic; }
.sc-testimonial-author { font-size: .82rem; color: #94a3b8; }
.sc-testimonial-author strong { color: #e2e8f0; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.sc-layout-accordion { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.5rem; }
.sc-faq-item { border: 1px solid rgba(255,255,255,.1); border-radius: .5rem; overflow: hidden; }
.sc-faq-question {
    padding: .9rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255,255,255,.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    user-select: none;
}
.sc-faq-item > summary.sc-faq-question::after { content: "▼"; font-size: .65rem; opacity: .6; transition: transform .2s; }
.sc-faq-item[open] > summary.sc-faq-question::after { transform: rotate(180deg); }
.sc-faq-answer { padding: .75rem 1.25rem 1rem; color: #cbd5e1; line-height: 1.65; font-size: .93rem; }

/* ── Team card ──────────────────────────────────────────────────────────── */
.sc-team-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sc-team-photo { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.sc-team-photo-placeholder { width: 100%; aspect-ratio: 1/1; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #475569; }
.sc-team-info { padding: 1rem 1.25rem; flex: 1; }
.sc-team-name { font-weight: 700; color: #f1f5f9; margin: 0 0 .2rem; }
.sc-team-role { font-size: .83rem; color: #94a3b8; margin: 0 0 .6rem; }
.sc-team-bio  { font-size: .87rem; color: #cbd5e1; line-height: 1.55; }

/* ── Service package card ───────────────────────────────────────────────── */
.sc-package-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.sc-package-name  { font-size: 1.15rem; font-weight: 700; color: #f1f5f9; margin: 0; }
.sc-package-price { font-size: 1.35rem; font-weight: 800; color: #60a5fa; }
.sc-package-duration { font-size: .83rem; color: #94a3b8; }
.sc-package-desc  { font-size: .9rem; color: #cbd5e1; line-height: 1.55; }
.sc-package-features { list-style: none; padding: 0; margin: .25rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.sc-package-features li { font-size: .88rem; color: #cbd5e1; padding-left: 1.2em; position: relative; }
.sc-package-features li::before { content: "✓"; position: absolute; left: 0; color: #34d399; font-weight: 700; }

/* ── Announcement card ──────────────────────────────────────────────────── */
.sc-announcement-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.sc-announcement-title { font-weight: 700; color: #f1f5f9; margin: 0; font-size: 1rem; }
.sc-announcement-subtitle { font-size: .83rem; color: #94a3b8; }
.sc-announcement-body { font-size: .9rem; color: #cbd5e1; line-height: 1.55; }
.sc-layout-banner .sc-announcement-card {
    background: rgba(96,165,250,.1);
    border-color: rgba(96,165,250,.3);
    border-radius: .5rem;
    text-align: center;
    padding: 1.5rem 2rem;
}

/* ── Venue card ─────────────────────────────────────────────────────────── */
.sc-venue-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sc-venue-photo { width: 100%; height: 180px; object-fit: cover; }
.sc-venue-photo-placeholder { width: 100%; height: 180px; background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #475569; }
.sc-venue-info  { padding: 1rem 1.25rem; flex: 1; }
.sc-venue-name  { font-weight: 700; color: #f1f5f9; margin: 0 0 .25rem; }
.sc-venue-address  { font-size: .82rem; color: #94a3b8; margin-bottom: .4rem; }
.sc-venue-capacity { font-size: .82rem; color: #64748b; }
.sc-venue-desc  { font-size: .87rem; color: #cbd5e1; line-height: 1.55; margin-top: .4rem; }

/* ── Section heading area ───────────────────────────────────────────────── */
.sc-section-heading { text-align: center; margin-bottom: .5rem; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; color: #f1f5f9; }
.sc-section-subheading { text-align: center; font-size: 1rem; color: #94a3b8; margin-bottom: 2rem; max-width: 640px; margin-left: auto; margin-right: auto; }