/* ==========================================================================
   RESET / BASE
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


/* ==========================================================================
   COMPONENT THEME VARIABLES (band-merch, video-carousel, flyer-archive)
   ========================================================================== */

band-merch,
video-carousel,
flyer-archive {
  --lm-bg: transparent;
  --vc-bg: transparent;
  --fa-bg: transparent;

  --lm-min-height: clamp(160px, 20vh, 220px);
  --vc-min-height: clamp(160px, 20vh, 220px);
  --fa-min-height: clamp(160px, 20vh, 220px);

  --vc-video-max-height: clamp(120px, 14vh, 190px);
  --vc-arrow-offset: clamp(-40px, -3vw, -24px);
  --vc-arrow-font-size: clamp(16px, 1.4vw, 20px);
  --vc-meta-gap: clamp(12px, 1.6vh, 20px);
  --vc-arrow-size: clamp(20px, 1.8vw, 26px);
  --vc-frame-offset-left: clamp(20px, 3vw, 40px);
  --vc-video-row-offset-top: clamp(-14px, -1vh, -6px);
  --vc-quote-font-size: clamp(13px, 1.2vw, 16px);
  --vc-quote-source-size: clamp(11px, 1vw, 13px);
  --vc-quote-source-color: #6fdc4d;
  --vc-quote-max-width: clamp(200px, 22vw, 280px);
  --vc-arrow-offset-quote: clamp(4px, 0.6vw, 10px);

  --lm-padding: clamp(20px, 2.6vw, 36px);
  --vc-padding: clamp(20px, 2.6vw, 36px);
  --fa-padding: clamp(20px, 2.6vw, 36px);

  --lm-font-heading: 'Archivo Black', 'Arial Black', sans-serif;
  --lm-font-body: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  --vc-font-heading: 'Archivo Black', 'Arial Black', sans-serif;
  --vc-font-body: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  --fa-font-heading: 'Archivo Black', 'Arial Black', sans-serif;
  --fa-font-body: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;

  --lm-single-image-size: clamp(90px, 15vh, 180px);
  --lm-image-border: 1px solid #737373;
  --lm-single-title-size: clamp(16px, 1.8vw, 25px);
  --lm-single-price-size: clamp(16px, 1.8vw, 25px);
  --lm-product-font: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;

  --fa-card-max-height: clamp(90px, 15vh, 180px);
  --fa-card-max-width: clamp(70px, 11vw, 135px);
  --fa-card-gap: clamp(14px, 2vw, 22px);
  --fa-arrow-size: clamp(20px, 1.8vw, 26px);
  --fa-arrow-font-size: clamp(16px, 1.4vw, 20px);
  --fa-dots-gap: clamp(12px, 1.6vh, 20px);
  --fa-image-border: 1px solid #737373;

  --lm-view-all-font-size: clamp(12px, 1.1vw, 16px);
  --vc-view-all-font-size: clamp(12px, 1.1vw, 16px);
  --fa-view-all-font-size: clamp(12px, 1.1vw, 16px);

  --lm-view-all-color: #6fdc4d;
  --vc-view-all-color: #6fdc4d;
  --fa-view-all-color: #6fdc4d;
}

simple-footer {
  --sf-logo-offset: -5px;
  --sf-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sf-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


/* ==========================================================================
   NAV
   ========================================================================== */

simple-nav {
  --nav-font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  --nav-font-size: clamp(14px, 1.4vw, 20px);
  --nav-letter-spacing: 0.15em;
  --nav-link-gap: clamp(20px, 3vw, 48px);
  --nav-icon-size: clamp(18px, 1.8vw, 26px);
  --nav-logo-height: clamp(26px, 2.2vw, 25px);
  --nav-padding-y: clamp(10px, 1.4vw, 18px);
  --nav-active-color: #6fdc4d;
  border-bottom: 2px solid #737373;
  position: relative;
  z-index: 2;
  background: transparent;
}

.top-section {
  position: relative;
  background-color: #0a0a0a;
}

  @media (max-width: 700px) {
  simple-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #0a0a0a;
  }
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 56vh;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  background-color: #0a0a0a;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #737373;
  z-index: 2;
}

.hero-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 46vh;
  margin-top: 1.5vh;
  min-width: 140px;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 8vw;
  justify-content: space-between;
  position: relative;
  z-index: 1;
  padding-bottom: 4vh;
}

.hero-text {
  position: relative;
  z-index: 1;
  margin-top: 0.3vw;
}

.hero-text p {
  margin: 0;
  font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  font-size: 4.8vh;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #fff;
}

.hero-text-accent {
  color: #6fdc4d;
}

.hero-text p.hero-text-accent {
  color: #6fdc4d;
}

.hero-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28vw;
  right: 0;
  width: auto;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  box-shadow: 0 0 150px 40px #000000;
}

.hero-right {
  position: absolute;
  top: 60%;
  right: 10vw;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 20vw;
}

.hero-right-cover {
  display: block;
  width: 18vh;
  margin: 1.5vh 0 1vh;
  border: 1px solid #737373;
}

.hero-right-title {
  font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  font-size: 3.4vh;
  letter-spacing: 0.05em;
  color: #6fdc4d;
  margin: 0 0 1.5vh;
}

.hero-right-text {
  font-size: 2.1vh;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 1.5vh;
}

.hero-right-link {
  display: inline-block;
  font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  font-size: 2.1vh;
  letter-spacing: 0.05em;
  color: #6fdc4d;
  text-decoration: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero-title {
  font-size: clamp(32px, 8vw, 80px);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
}

.hero-badge-link {
  position: absolute;
  top: 2vh;
  right: 2vw;
  width: 18vh;
  z-index: 2;
}

.hero-badge {
  display: block;
  width: 100%;
}

.texture {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.80;
  mix-blend-mode: screen;
}

.texture-left {
  top: 0;
  left: 0;
  width: 100vh;
  transform: translateY(-8.3%);
}

.texture-right {
  top: 0;
  right: 0;
  width: 55vh;
}


/* ==========================================================================
   DESKTOP - CONTENT ROW (Shows / Merch / About)
   ========================================================================== */

.content-row {
  display: flex;
  height: clamp(220px, 27vh, 300px);
  align-items: stretch;
  background-color: transparent;
  position: relative;
  z-index: 10;
  border-bottom: 2px solid #737373;
}

.row-col {
  flex: 1 1 0;
  height: 100%;
  overflow: hidden;
  min-width: 0;
}

.row-col > * {
  padding-left: clamp(16px, 1.8vw, 24px) !important;
  padding-right: clamp(16px, 1.8vw, 24px) !important;
  padding-top: clamp(16px, 2vh, 24px) !important;
  padding-bottom: clamp(14px, 1.6vh, 20px) !important;
}

.row-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.row-col-about {
  padding-top: clamp(6px, 1vh, 10px);
  padding-bottom: clamp(6px, 1vh, 12px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.row-col-about .about-text {
  margin-bottom: 4px;
}


/* ==========================================================================
   DESKTOP - ROW TWO (Band Photo / Media)
   ========================================================================== */

.row-two {
  display: flex;
  height: clamp(280px, 32vh, 380px);
  align-items: stretch;
  background-color: transparent;
  border-bottom: 2px solid #737373;
}

.row-two-photo {
  flex: 0 1 auto;
  max-width: clamp(500px, 62vw, 880px);
  min-width: 0;
}

.row-two-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.row-two-media {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.row-two-media video-carousel {
  --vc-padding: clamp(24px, 3.5vw, 48px);
  --vc-video-max-height: clamp(180px, 25vh, 290px);
  --vc-header-gap: clamp(8px, 1.2vh, 14px);
  --vc-row-direction: column;
  --vc-title-display: none;
  --vc-count-display: none;
  --vc-min-height: 100%;
  --vc-content-justify: flex-start;
  --vc-arrow-size: clamp(24px, 1.8vw, 30px);
  --vc-arrow-font-size: clamp(16px, 1.4vw, 20px);
  --vc-arrow-offset: clamp(-56px, -4vw, -40px);
  --vc-frame-offset-left: 0;
  height: auto;
  max-height: 100%;
  padding: clamp(16px, 2vh, 24px) clamp(16px, 1.8vw, 24px)
         clamp(14px, 1.6vh, 20px) clamp(16px, 1.8vw, 24px) !important;
  overflow: hidden;
}

.row-two-media video-carousel {
  width: 100%;
}

@media (min-width: 1600px) {
  .row-two-photo {
    max-width: clamp(700px, 68vw, 1100px);
  }

  .row-two {
    height: clamp(320px, 34vh, 400px);
  }

  .row-two-media video-carousel {
    --vc-video-max-height: clamp(200px, 26vh, 300px);
  }
}


/* ==========================================================================
   ABOUT TEXT (shared styling, used in .row-col-about and mobile)
   ========================================================================== */

.about-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-size: clamp(16px, 3vh, 24px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0px;
}

.about-text {
  font-size: clamp(10px, 1.6vh, 13px);
  line-height: 1.5;
  color: #b0b0ac;
  margin: 0 0 clamp(8px, 1.6vh, 20px);
  max-width: none;
}

.about-link {
  font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(11px, 1.8vh, 14px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6fdc4d;
  text-decoration: none;
}

.about-link:hover {
  opacity: 0.8;
}


/* ==========================================================================
   MOBILE / DESKTOP VISIBILITY TOGGLE
   ========================================================================== */

.mobile-only { display: none; }

@media (max-width: 700px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: block; }
}


/* ==========================================================================
   MOBILE - SHARED SECTION STYLES
   ========================================================================== */

.mobile-only section {
  padding: 24px 20px;
  border-bottom: 2px solid #737373;
  background: transparent;
}

.mobile-section-title,
.mobile-only .about-title {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-size: 24px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
  text-align: center;
}


/* ==========================================================================
   MOBILE - NEWEST RELEASE (release-highlight)
   ========================================================================== */

.release-highlight-loading {
  font-size: 13px;
  color: #888;
}

.release-highlight-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.release-highlight-cover {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border: 1px solid #fff;
  flex-shrink: 0;
}

.release-highlight-title {
  font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px;
  color: #fff;
  line-height: 1.2;
}

.release-highlight-year {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}

.release-highlight-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.release-highlight-btn {
  font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  flex: 1;
}

.release-highlight-btn.listen {
  background: #fff;
  color: #000;
}

.release-highlight-btn:hover {
  opacity: 0.85;
}


/* ==========================================================================
   MOBILE - SHOWS
   ========================================================================== */

.mobile-view-all-btn {
  display: block;
  margin-top: 16px;
  font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  padding: 12px;
  text-align: center;
}

.mobile-shows flyer-archive {
  --fa-header-justify: center;
}

.mobile-media video-carousel {
  --vc-view-all-display: none;
  --vc-title-display: none;
  --vc-count-display: none;
  --vc-frame-offset-left: 0;
  --vc-row-justify: center;
  --vc-arrow-offset: clamp(-56px, -8vw, -40px);
  --vc-header-justify: center;
}


/* ==========================================================================
   MOBILE - ABOUT
   ========================================================================== */

.mobile-about .about-text {
  font-size: 13px;
  line-height: 1.6;
  color: #b0b0ac;
  margin: 0 0 16px;
  text-align: center;
}

.mobile-about .about-link {
  display: block;
  margin-top: 16px;
  font-family: 'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  padding: 12px;
  text-align: center;
  text-decoration: none;
}


/* ==========================================================================
   MOBILE - BAND PHOTO
   ========================================================================== */

.mobile-band-photo {
  padding: 0 !important;
}

.mobile-band-photo img {
  width: 100%;
  display: block;
}


/* ==========================================================================
   MOBILE MEDIA QUERIES
   ========================================================================== */

@media (max-width: 700px) {
  band-merch,
  video-carousel,
  flyer-archive {
    --lm-padding: 0px;
    --vc-padding: 0px;
    --fa-padding: 0px;
    --lm-min-height: auto;
    --vc-min-height: auto;
    --fa-min-height: auto;
    --fa-grid-min-height: clamp(90px, 24vw, 130px);
    --fa-card-max-height: 100px;
  }
}

@media (max-width: 700px) {
  html, body {
    overflow-x: hidden;
  }

  .hero {
    height: 22vh;
    overflow: hidden;
  }

  .hero-logo {
    width: 18vh;
    margin-top: 2vh;
  }

  .hero-left {
    padding-bottom: 1.6vh;
    align-items: center;
    justify-content: flex-start;
    gap: 1vh;
  }

  .hero-text {
    text-align: center;
    margin-left: -23%;
  }

  .hero-text p {
    font-size: 1.9vh;
  }

  .hero-text-accent {
    display: none;
  }

  .hero-badge {
    display: none;
  }

  .texture-left {
    width: 32vh;
  }

  .texture-right {
    width: 16vh;
    top: auto;
    bottom: 0;
  }

  release-highlight[layout="row"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .release-highlight-card {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .release-highlight-cover {
    width: 98px;
    height: 98px;
  }

  .release-highlight-buttons {
    flex-direction: column-reverse;
    flex: 0 0 auto;
    width: auto;
  }

  .release-highlight-btn {
    flex: none;
    width: 130px;
  }
}