/* Producer Profile (Stage) */
:root {
  --producer-primary: #5c2a9d;
  --producer-accent: #ff69b4;
  --banner-url: none;
}

.stage-cta { min-width: 0; }
#stageNav { position: sticky; top: 56px; z-index: 1029; }
#stageNav .btn { 
    border-color: var(--theme-accent);
    color: var(--theme-text);
}
#stageNav .btn:hover { 
    background: var(--theme-accent);
    color: var(--theme-background);
    border-color: var(--theme-accent);
}
#stageNav .btn.active {
    background: var(--theme-secondary);
    color: var(--theme-text);
    border-color: var(--theme-secondary);
}

.producer-hero {
  position: relative;
  height: 42vh;
  min-height: 280px;
  max-height: 500px;
  overflow: hidden;
}
.producer-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover; /* Ensure image fills container without stretching */
  background-repeat: no-repeat;
  background-image: var(--banner-url);
  z-index: 1;
}
.producer-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.75) 70%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 30px;
  z-index: 2;
}
.producer-hero-curtain { 
    height: 18px; 
    background: linear-gradient(to bottom, var(--theme-darker), transparent); 
}

/* Ensure content never overflows container width */
.producer-hero .container { max-width: 100%; overflow: hidden; position: relative; z-index: 3; }
.producer-hero h1, .producer-hero p { margin-right: 0; }

/* Description preview in hero with overflow handling */
.producer-description-preview {
  max-height: 120px;
  overflow: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
}
.producer-description-preview .description-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  margin: 0;
}
.producer-description-preview.overflow .description-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1.5em;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
  pointer-events: none;
}
.read-more-link {
  text-decoration: underline;
  cursor: pointer;
}
.read-more-link:hover {
  color: var(--theme-text);
}
/* Default hidden; shown when parent has .overflow */
.producer-description-preview .read-more-link { display: none; }
.producer-description-preview.overflow .read-more-link { display: inline; }

/* Social icons row and CTA group */
.hero-actions-row { width: 100%; }
.hero-socials a { color: var(--theme-text); display: inline-block; margin-right: 10px; font-size: 1.4rem; }
.hero-socials a:last-child { margin-right: 0; }
.hero-cta-group .btn { white-space: nowrap; }

/* Remove legacy horizontal scroller styles now that we use Bootstrap carousel */
.lineup-carousel { overflow: visible; white-space: normal; }
.lineup-track { padding-bottom: 0; }
.lineup-card { width: auto; min-width: 0; }

/* Featured Acts: keep card size; allow multiple cards per slide via template grouping */
/* Featured Acts: single responsive scroller */
.featured-acts-scroller { position: relative; }
.featured-acts-scroller .scroller-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  /* Hide scrollbars across browsers */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth;
}
.featured-acts-scroller .scroller-track::-webkit-scrollbar { display: none; }
/* Fit more items as width grows while keeping card size consistent */
@media (min-width: 576px) {
  .featured-acts-scroller .scroller-track { grid-auto-columns: 50%; }
}
@media (min-width: 768px) {
  .featured-acts-scroller .scroller-track { grid-auto-columns: 33.3333%; }
}
@media (min-width: 992px) {
  .featured-acts-scroller .scroller-track { grid-auto-columns: 25%; }
}
@media (min-width: 1200px) {
  .featured-acts-scroller .scroller-track { grid-auto-columns: 20%; }
}
.featured-acts-scroller .scroller-item { scroll-snap-align: start; }
.featured-acts-scroller .scroller-prev,
.featured-acts-scroller .scroller-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.featured-acts-scroller .scroller-prev { left: 8px; }
.featured-acts-scroller .scroller-next { right: 8px; }

/* Mobile adjustments */
@media (max-width: 767.98px) { 
  body { padding-bottom: 64px; }
  /* Keep hero container but allow it to expand for content */
  .producer-hero { height: auto; min-height: 300px; max-height: none; overflow: visible; }
  /* Ensure background image doesn't dominate on mobile */
  .producer-hero::before { 
    background-size: cover; 
    background-position: center; 
    opacity: 0.6; /* Reduce opacity so text is more visible */
  }
  /* Keep overlay positioned but ensure content spacing - using consistent radial gradient */
  .producer-hero-overlay { 
    position: relative; 
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 70%);
    padding: 20px 0; 
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .stage-cta { min-width: 0; padding: 0.4rem 0.7rem; font-size: 0.85rem; }
  .hero-socials { width: 100%; order: 1; font-size: 1.25rem; margin-bottom: 15px; }
  .hero-cta-group { width: 100%; order: 2; justify-content: center; gap: 12px; }
  .producer-description-preview { max-height: 60px; margin-bottom: 15px; }
  .producer-description-preview .description-text { -webkit-line-clamp: 2; font-size: 0.85rem; line-height: 1.4; }

  /* Compact mobile bottom box office bar */
  #boxOfficeBar { padding: 6px 8px; }
  #boxOfficeBar .container { padding-left: 0; padding-right: 0; }
  #boxOfficeBar .d-flex { gap: 6px; }
  #boxOfficeBar .btn { padding: 0.3rem 0.45rem; font-size: 0.8rem; line-height: 1.1; white-space: nowrap; }
}