/* SCO30 CONCERT SEASON PAGE */

/* =============================================
   SECTION 1: SCROLL STORY
============================================= */
.scroll-story-section ~ * .site-content,
.site-content:has(.scroll-story-section) {
  overflow: visible !important;
}

.scroll-story-section,
.scroll-story-section .elementor-container,
.scroll-story-section .elementor-column,
.scroll-story-section .elementor-widget-wrap,
.scroll-story-section .elementor-widget-container {
  background: #29285A !important;
  padding:    0 !important;
  margin:     0 !important;
  max-width:  100% !important;
  width:      100% !important;
  overflow:   visible !important;
}

.ss-outer {
  height:   400vh;
  position: relative;
  background: #29285A;
}

.ss-sticky {
  position:        sticky;
  top:             0;
  height:          100vh;
  width:           100%;
  overflow:        hidden;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      #29285A;
}

/* ── Video ──────────────────────────────────────────────────────────
   Default: centred, 55% wide, normal flow.
   When JS sets position:absolute for the 4-edge expand it overrides
   these entirely — no CSS transition on the expand, JS drives it.
──────────────────────────────────────────────────────────────────── */
.ss-sticky .ss-video {
  width:            55%;
  max-width:        55%;
  height:           auto;
  object-fit:       contain;
  display:          block;
  position:         relative;
  z-index:          1;
  flex-shrink:      0;
  transform-origin: center center;
  will-change:      transform;
  /* No CSS transition — JS drives the scale frame-by-frame */
}

/* ── Scenes ──────────────────────────────────────────────────────── */
.ss-scene {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  row;
  align-items:     flex-start;  /* anchor text to top of sticky */
  justify-content: space-between;
  padding:         0 6%;
  pointer-events:  none;
  z-index:         2;
  opacity:         0;
}

/* ── Text clips ──────────────────────────────────────────────────────
   Each text sits inside an overflow:hidden wrapper that is anchored
   to the centre line. This creates the clip-reveal effect:

   SCENES 1 & 2 (outward):
     .ss-left  wrapper — bottom edge on centre line, text grows UP
     .ss-right wrapper — top    edge on centre line, text grows DOWN

   SCENE 3 (inward):
     Both texts start translated away and move toward 0 (centre).
     The clip wrappers are not strictly needed for scene 3 since
     the text travels into view rather than being clipped, but we
     keep the same structure for consistency.
──────────────────────────────────────────────────────────────────── */
.ss-left-wrap,
.ss-right-wrap {
  display:  flex;
  overflow: visible;
}

/* Left: clip grows upward → flex-end pushes text to the bottom */
.ss-left-wrap {
  align-items:    flex-end;
  /* height is the natural text height; overflow hides above */
}

/* Right: clip grows downward → flex-start keeps text at the top */
.ss-right-wrap {
  align-items: flex-start;
}

.ss-left {
  font-size:      clamp(3rem, 5.5vw, 7rem);
  font-weight:    900;
  color:          #fff;
  text-transform: uppercase;
  line-height:    1.0;
  letter-spacing: -0.02em;
  white-space:    nowrap;
  display:        block;
  /* translateY driven by JS — starts at 0, moves to -TRAVEL (up) */
  will-change: transform;
}

.ss-right {
  font-size:      clamp(3rem, 5.5vw, 7rem);
  font-weight:    900;
  color:          #DA9897;
  text-transform: uppercase;
  line-height:    1.0;
  text-align:     right;
  letter-spacing: -0.02em;
  white-space:    nowrap;
  display:        block;
  /* translateY driven by JS — starts at 0, moves to +TRAVEL (down) */
  will-change: transform;
}

#ss-scene-2 .ss-left,
#ss-scene-2 .ss-right {
  font-size: clamp(5rem, 10vw, 13rem);
  line-height: 1.0;
}

/* Scene 3 — both texts sit on the same centre line (no top/bottom offset) */
#ss-scene-3 .ss-scene {
  align-items: center;
}

/* ── Scroll indicator ───────────────────────────────────────────── */
.ss-scroll-indicator {
  position:         absolute;
  left:             3%;
  top:              50%;
  transform:        translateY(-50%);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  gap:              12px;
  z-index:          3;
  opacity:          1;
  transition:       opacity 0.4s;
}

.ss-nav-dot {
  width:         2px;
  height:        28px;
  background:    rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  transition:    background 0.4s, height 0.4s;
}

.ss-nav-dot.active {
  background: #fff;
  height:     48px;
}

@keyframes ss-drip {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

/* =============================================
   SECTION 2: INTRODUCTION
============================================= */
section.introduction {
  background: #29285A;
  padding:    50px 0;
}

/* –– Introduction –– */
section.introduction h1,
section.introduction h2,
section.introduction .elementor-heading-title {
  /* color: #DA9897 !important; */
  color: rgba(212, 145, 145) !important;
  font-size: 76px !important;
  margin: 0 0 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  word-wrap: normal !important;
}

/* "Download Booklet" CTA – style to match al-cta bordered button */
section.introduction .btn-download-booklet { 
  margin: 24px 0 0;
}
section.introduction .btn-download-booklet a {
  font-size: 20px;
  font-weight: 900 !important;
  text-transform: uppercase;
  color: #ffffff;
  background: #605E8D !important;
  border-radius: 0;
  display: inline-flex;
  letter-spacing: normal;
  height: auto;
  padding: 18px 24px !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: background 0.3s ease, color 0.3s ease;
                  
}

section.introduction .btn-download-booklet a:hover,
section.introduction .btn-download-booklet a:focus {
  background:   #DA9897 !important;
  border-color: #DA9897 !important;
  color:        #fff !important;
}

section.introduction img {
  width: auto;
  /* height: calc(100vh - 100px); */
  max-height: 1000px;
  aspect-ratio: 5 / 6.5;
}
section.introduction .content .elementor-widget-wrap {
  padding: 80px 30px;
}
section.introduction .content p {
  font-size: 18px;
  color: rgba(255, 255, 255);
}

/* =============================================
   SECTION 3: UPCOMING CONCERTS
============================================= */
section.upcoming-concerts-sco30 {
  background: #BFBECE;
  padding:    72px 0;
}

section.upcoming-concerts-sco30 .title h2 {
  padding:        0 0 50px;
  font-size:      48px !important;
  color:          #29285A !important;
  text-transform: uppercase !important;
  font-family:    'Montserrat', sans-serif !important;
  font-weight:    900 !important;
}

/* ── Strip default card chrome ── */
section.upcoming-concerts-sco30 .elementor-posts .elementor-post__card,
section.upcoming-concerts-sco30 article.elementor-post {
  background:  transparent !important;
  box-shadow:  none !important;
  border:      none !important;
  border-radius: 0 !important;
}

/* ── Card wrapper: stacking context for overlay ── */
section.upcoming-concerts-sco30 article.elementor-post .post__wrapper {
  position:      relative;
  overflow:      hidden;
  display:       block;
}

/* ── The inner link wraps both text + image — flip order with flex ── */
section.upcoming-concerts-sco30 .elementor-post__contents_wrapper > a.elementor-post__thumbnail__link {
  display:        flex;
  flex-direction: column-reverse;
}

/* ── Image: overflow hidden for zoom ── */
section.upcoming-concerts-sco30 .elementor-post__thumbnail {
  display:  block;
  overflow: hidden !important;
  padding:  0 !important;
  margin:   0 !important;
}

section.upcoming-concerts-sco30 .elementor-post__thumbnail img {
  display:    block !important;
  width:      100% !important;
  height:     auto !important;
  transform:  scale(1) !important;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  border-radius: 0 !important;
}

/* ── Text block: sits below image naturally via flex-direction: column-reverse ── */
section.upcoming-concerts-sco30 .elementor-post__text {
  padding: 14px 2px !important;
  margin:  0 !important;
}
section.upcoming-concerts-sco30 .post-item .post-details {
  height: 125px !important
}

/* ── Title ── */
section.upcoming-concerts-sco30 .elementor-post__title {
  font-size:      28px !important;
  color:          #29285A !important;
  line-height:    1.2 !important;
  text-transform: uppercase !important;
  font-weight:    900 !important;
  font-family:    'Montserrat', sans-serif !important;
  margin:         0 0 6px !important;
}

section.upcoming-concerts-sco30 .elementor-post__title a {
  color:           inherit !important;
  text-decoration: none !important;
}

/* ── Date ── */
section.upcoming-concerts-sco30 .elementor-post__custom_meta-data {
  margin: 0 !important;
}
section.upcoming-concerts-sco30 .elementor-post__custom_meta-data,
section.upcoming-concerts-sco30 .custom_meta_item {
  font-size:      18px !important;
  font-weight:    normal !important;
  color:          rgba(38, 43, 96) !important;
  display:        flex !important;
  align-items:    center !important;
}
section.upcoming-concerts-sco30 .meta-calendar-icon {
  display:        flex !important;
  align-items:    center !important;
  flex-shrink:    0 !important;
  margin-right:   8px !important;
}
section.upcoming-concerts-sco30 .meta-calendar-icon svg {
  width:          18px !important;
  height:         18px !important;
  display:        block !important;
}

/* ── Remove the ::after overlay link ── */
section.upcoming-concerts-sco30 .elementor-post__thumbnail__link:after {
  display: none !important;
}

/* ── Hover: image zooms ── */
section.upcoming-concerts-sco30 article.elementor-post:hover .elementor-post__thumbnail img {
  transform: scale(1.07) !important;
}

/* =============================================
   SECTION 4: OUR ARTISTIC LEGACY
============================================= */

/* Strip Elementor wrappers */
.artistic-legacy-section,
.artistic-legacy-section .elementor-column,
.artistic-legacy-section .elementor-widget-wrap,
.artistic-legacy-section .elementor-widget-container {
  background: #29285A !important;
  padding:    0 !important;
  margin:     0 !important;
  max-width:  100% !important;
  width:      100% !important;
  overflow:   visible !important;
}

.artistic-legacy-section .title h2 {
  padding:        72px 0 0px;
  font-size:      48px !important;
  color:          #DA9897 !important;
  text-transform: uppercase !important;
  font-family:    'Montserrat', sans-serif !important;
  font-weight:    900 !important;
}

/* Main container */
.al-wrap {
  background: #29285A;
  position:   relative;
  padding:    72px 0 80px;
  overflow:   hidden;
}

/* Section label */
.al-label {
  display:        block;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.45);
  margin-bottom:  40px;
  position:       relative;
  z-index:        3;
}

/* Image drives the container height naturally.
   Names overlay via absolute positioning. */
.al-name-image-area {
  position: relative;
  width:    100%;
}

/* Image IN FLOW — drives the container height naturally
   via aspect-ratio. margin-left:50% pushes it to the right half.
   No absolute needed — the natural image proportions define the height. */
.al-image-area {
  position:     relative;
  width:        50%;
  margin-left:  50%;
  aspect-ratio: 942 / 1174;
  overflow:     hidden;
  z-index:      1;
  pointer-events: none;
}

.al-image {
  position:   absolute;
  inset:      0;
  opacity:    0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.al-image.is-visible {
  opacity: 1;
}

/* Cover crops the portrait — top center keeps face/baton visible */
.al-image img {
  width:           100%;
  height:          100% !important;
  display:         block;
  object-fit:      cover;
  object-position: top center;
}

/* Names overlay — absolute, vertically centered in the
   upper portion of the container, above the image */
.al-names {
  position:        absolute;
  top:             40%;
  left:            0;
  transform:       translateY(-50%);
  width:           100%;
  height: auto;
  z-index:         2;
  margin:          0;
  padding:         0 10%;
  list-style:      none;
  display:         flex;
  flex-direction:  column;
  /* justify-content: center; */
}

.al-name-item {
  display:     block;
  cursor:      pointer;
  padding:     4px 0;
  user-select: none;
  width:       fit-content;
}

/* The big name – dim by default */
.al-name {
  display:        block;
  /* font-size:      clamp(2.4rem, 5.28vw, 6rem); */
  font-size:      76px;
  font-weight:    900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height:    1.08;
  color:          rgba(255, 255, 255, 0.2);
  transform-origin: left center;
  transition:     color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                  font-size 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                  /* transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); */
  pointer-events: none;
  font-family:    'Montserrat', sans-serif;
}

/* Active: full white + scale up */
.al-name-item.is-active .al-name {
  color:     #ffffff;
  font-size: 96px;
  /* transform: scale(1.28); */
}

/* Info area — absolute bottom-left.
   min-height matches one block's content so the area
   doesn't collapse when all blocks are absolute. */
.al-info-area {
  position:   absolute;
  bottom:     0px;
  left:       0;
  width:      50%;
  /* padding:    0 20px; */
  min-height: 150px;
  z-index:    3;
}

/* All blocks stack in the same spot — only opacity changes.
   position:absolute means inactive blocks take zero space. */
.al-info-block {
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  opacity:    0;
  transform:  translateY(12px);
  transition: opacity 0.45s ease,
              transform 0.45s ease;
  pointer-events: none;
  padding: 0 80px 0 0;
}

.al-info-block.is-visible {
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

.al-info-title {
  font-size:      28px;
  font-weight:    900;
  /* letter-spacing: 0.16em; */
  text-transform: uppercase;
  color:          #DA9897;
  margin:         0 0 12px;
}

.al-info-role {
  font-size:    18px;
  color:        #fff;
  font-weight: 900;
  /* font-style:   italic; */
  margin:       0 0 12px;
}

.al-info-body {
  font-size:   18px;
  color:       #fff;
  line-height: normal;
  margin:      0;
}

/* Explore Concerts CTA – bottom right */
.al-footer {
  position:        relative;
  z-index:         3;
  margin-top:      50px;
  display:         flex;
  justify-content: flex-end;
  /* padding-right:   10%; */
}

.al-cta {
  font-size: 20px;
  font-weight: 900 !important;
  text-transform: uppercase;
  color: #ffffff;
  background: #605E8D !important;
  border-radius: 0;
  display: inline-flex;
  letter-spacing: normal;
  height: auto;
  padding: 18px 24px !important;
  text-decoration: none;
  box-shadow: none !important;
  transition: background 0.3s ease, color 0.3s ease;
  justify-content: center;
}

.al-cta:hover {
  background:   #DA9897 !important;
  border-color: #DA9897 !important;
  color:        #fff !important;
}

/* Scroll indicator – left edge */
.al-scroll-indicator {
  /* position:       absolute;
  left:           0;
  top:            72px; */
  display:        none;
  /* flex-direction: column;
  align-items:    center;
  gap:            10px;
  z-index:        5;
  pointer-events: none; */
}

.al-nav-dot {
  width:         3px;
  height:        36px;
  background:    rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  transition:    background 0.4s, height 0.4s;
}

.al-nav-dot.active {
  background: #fff;
  height:     44px;
}

/* =============================================
   MOBILE – max-width: 768px
============================================= */
@media (max-width: 768px) {

  /* –– Hero / Scroll Story –– */

  .ss-sticky .ss-video {
    width:      100%;
    max-width:  100%;
    height:     56vw;
    object-fit: cover;
    transform-origin: center center;
  }

  .ss-left,
  .ss-right {
    white-space: normal;
    font-size:   clamp(2rem, 8vw, 4rem);
  }

  #ss-scene-2 .ss-left,
  #ss-scene-2 .ss-right {
    font-size: clamp(3.5rem, 14vw, 7rem);
  }

  .ss-scroll-indicator {
    display: none;
  }

  section.introduction a {
    display:    block;
    text-align: center;
  }

  section.introduction .content .elementor-widget-wrap {
    padding: 20px 0;
  }

  section.introduction h1, section.introduction h2, section.introduction .elementor-heading-title {
    font-size: 48px !important;
  }

  section.introduction .content p {
    font-size: 16px !important;
  }

  section.upcoming-concerts-sco30 .post-item .post-details {
    order: 1;
  }
  section.upcoming-concerts-sco30 .elementor-post__title {
    font-size: 24px !important;
  }

  section.upcoming-concerts-sco30 .elementor-post__custom_meta-data, section.upcoming-concerts-sco30 .custom_meta_item {
    font-size: 16px !important;
  }

  section.upcoming-concerts-sco30 .elementor-post__custom_meta-data, section.upcoming-concerts-sco30 .custom_meta_item {
    align-items: flex-start !important;
  }

  section.upcoming-concerts-sco30 .meta-calendar-icon {
    margin-top: 2px;
    margin-right: 5px !important;
  }

  section.upcoming-concerts-sco30 .post-item .post-details {
    height: auto !important;
  }

  section.upcoming-concerts-sco30 .elementor-post__contents_wrapper > a.elementor-post__thumbnail__link {
    display:        flex;
    flex-direction: column;
  }

  /* –– Our Artistic Legacy –– */

  .al-wrap {
    padding:  48px 0 60px;
    overflow: visible;
  }

  .al-label {
    padding:       0 5%;
    margin-bottom: 20px;
  }

  /* Stack vertically: image → names → info */
  .al-name-image-area {
    display:        flex;
    flex-direction: column;
  }

  /* Image first (order:-1), full width, fixed height */
  .al-image-area {
    order:        -1;
    position:     relative;
    width:        100%;
    margin-left:  0;        /* reset desktop 50% push */
    height:       80vw;
    aspect-ratio: unset;
    min-height:   unset;
    overflow:     hidden;
    margin-bottom: 0;
  }

  /* Names back in normal flow, below image */
  .al-names {
    position:  relative;
    top:       auto;
    left:      auto;
    transform: none;
    width:     100%;
    height:    auto;
    padding:   0;
    order:     0;
    display:   block;
    margin: 30px 0 0;
  }

  .al-name-item {
    padding: 8px 0;
    width:   fit-content;
  }

  .al-name {
    font-size:  clamp(1.8rem, 8vw, 3.2rem);
    transition: color 0.35s ease;
    display: inline-block;
  }

  .al-name-item.is-active .al-name {
    color:     #ffffff;
    font-size: clamp(2.2rem, 9vw, 3.8rem);
    transform: none;
  }

  /* Info back in normal flow, below names */
  .al-info-area {
    order:      1;
    position:   relative;
    bottom:     auto;
    left:       auto;
    width:      100%;
    min-height: 0;
    /* padding:    0 5%; */
    margin-top: 24px;
  }

  .al-info-block {
    position:       relative;
    top:            auto;
    left:           auto;
    right:          auto;
    width:          100%;
    display:        none;
    opacity:        1;
    transform:      none;
    transition:     none;
    pointer-events: auto;
    padding: 0;
  }

  .al-info-role, 
  .al-info-body {
    font-size: 16px;
  }

  .al-info-block.is-visible {
    display: block;
  }

  .al-footer {
    /* padding:         0 5%; */
    justify-content: flex-start;
    margin-top:      36px;
  }

  .al-cta {
    /* width:      100%; */
    text-align: center;
    padding:    16px 20px;
  }

  .al-scroll-indicator {
    display: none;
  }
}

/* =============================================
   TABLET – 769px to 1024px
============================================= */
@media (min-width: 769px) and (max-width: 1199px) {

  .ss-left,
  .ss-right {
    font-size: clamp(2.4rem, 4.5vw, 5rem);
  }

  #ss-scene-2 .ss-left,
  #ss-scene-2 .ss-right {
    font-size: clamp(4rem, 8vw, 9rem);
  }

  section.introduction h1, section.introduction h2, 
  section.introduction .elementor-heading-title {
    font-size: 56px !important;
  }

  section.introduction .image.elementor-column,
  section.introduction .content.elementor-column {
    width: 50%;
  }

  section.upcoming-concerts-sco30 .elementor-grid-3 .elementor-posts-container {
    grid-template-columns: repeat(2, 1fr)
  }

  .al-image-area {
    height:     80%;
    max-height: 700px;
  }

  .al-names {
    top: 35%;
  }

  .al-name {
    font-size: clamp(2rem, 4vw, 4.5rem);
  }

  .al-name-item.is-active .al-name {
    font-size: clamp(2.2rem, 4.8vw, 5.0rem);
  }

  .al-info-title {
    font-size: 18px;
  }
  .al-info-role,
  .al-info-body {
    font-size: 14px;
  }

  /* .al-info-block {
    width: 42%;
  } */
}


/* =============================================
   SPECIAL CASE – 1200px to 1499px
============================================= */
@media (min-width: 1200px) and (max-width: 1499px) {
  section.upcoming-concerts-sco30 .elementor-grid-3 .elementor-posts-container {
    gap: 30px;
  }
  section.upcoming-concerts-sco30 .elementor-post__title {
    font-size: 20px !important;
  }
  section.upcoming-concerts-sco30 .elementor-post__custom_meta-data, 
  section.upcoming-concerts-sco30 .custom_meta_item {
    font-size: 16px !important;
    align-items: flex-start !important;
  }
  section.upcoming-concerts-sco30 .meta-calendar-icon {
    margin-top: 2px !important;
  }
  .al-name {
    font-size: 56px;
  }
  .al-name-item.is-active .al-name {
    font-size: 76px;
  }
  .al-info-title {
    font-size: 24px;
  }
  .al-info-role,
  .al-info-body {
    font-size: 16px;
  }
  .al-wrap {
    padding: 72px 0 120px;
  }
}