/* ===========================
   SEMS – Custom Events Styles
   File: css/custom-event.css
   =========================== */

/* -------- Header (above slider) -------- */
/* Dark text (not white) */
.featured-eyebrow {
  color: #fff;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 1.2rem;
}

.featured-title {
  color: #0f172a;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  font-size: clamp(1.35rem, 1.1rem + 2vw, 2.4rem);
  margin: .25rem 0 .35rem 0;
}

.featured-subrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem 1rem;
  margin-top: .35rem;
}

.featured-sub {
  color: #1f2937; /* slate-800 */
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
}

/* Inline CTA (small pill) */
.btn-tickets-inline {
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(90deg, #7c3aed, #22d3ee);
  color: #fff;
  box-shadow: 0 6px 16px rgba(34,211,238,.25);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-tickets-inline:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(124,58,237,.25);
  color: #fff;
}

@media (max-width: 576px) {
  .featured-subrow { flex-direction: column; }
}

/* -------- Slider helpers -------- */
.frame img.no-crop {
  width: 100%;
  height: auto;
  object-fit: contain; /* keep full image on mobile */
  display: block;
}
.event-video {
  width: 100%;
  height: auto;
  display: block;
}

/* -------- Black Promo Box (below slider) -------- */
.event-box {
  background: #000;
  color: #fff;  /* white text inside */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.30);
}

.event-title {
  color: #fff;
  font-weight: 900;             /* bold like mock */
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  font-size: clamp(1.35rem, 1.2rem + 1.8vw, 2.25rem);
  margin: 0 0 .35rem 0;
}

.event-desc {
  color: rgba(255,255,255,.92);
  font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
  margin: 0;
}

/* Button inside the black box */
.btn-buy-ticket-inbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.25rem;
  border-radius: 12px;
  border: 0;
  font-weight: 800;
  text-decoration: none;
  background: linear-gradient(90deg, #7c3aed, #22d3ee);
  color: #fff;
  box-shadow: 0 10px 24px rgba(34,211,238,.25);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn-buy-ticket-inbox:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(124,58,237,.25);
  color: #fff;
}

/* lg+ gets auto width; smaller screens make it full width */
@media (min-width: 992px) { .w-lg-auto { width: auto !important; } }
@media (max-width: 991.98px) { .w-lg-auto { width: 100% !important; } }

/* -------- Arrow + description row -------- */
.event-note{
  display: flex;
  align-items: flex-start;
  gap: .9rem;                 /* space between arrow and text */
  margin-top: .9rem;          /* gap from date line */
  margin-left: 1.25rem;       /* nudge whole row to the right */
  color: rgba(255,255,255,.92);
  font-size: clamp(.92rem, .9rem + .2vw, 1rem);
  line-height: 1.55;
}
.note-arrow{
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: .45rem;         /* drop arrow slightly */
}
.note-arrow .shaft{
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 576px){
  .event-note{ margin-left: .75rem; }
  .note-arrow{ margin-top: .4rem; }
}

/* smaller second line under main title */
.event-subtitle{
  color: rgba(255,255,255,.96);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.15;
  /* smaller than .event-title */
  font-size: clamp(1.05rem, .95rem + 1.2vw, 1.75rem);
  margin: 0 0 .25rem 0;
}

/* ensure black box matches slider width (we wrapped it in .event-hero-wrap px-0) */
.event-hero-wrap .event-box{
  border-radius: 18px;
}

/* modal option buttons */
.option-btn{
  background: #0b0f16;
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: .9rem 1rem;
  text-align: left;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.option-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.45);
  box-shadow: 0 16px 30px rgba(34,211,238,.18);
  color: #fff;
}
.option-logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

/* modal dark theme tidy-up */
#ticketOptionsModal .modal-content{ background:#0b0f16; }
#ticketOptionsModal .modal-title{ font-weight:800; }

/* keep responsiveness */
@media (max-width: 576px){
  .option-logo{ width: 24px; height: 24px; }
}

/* Keep all option buttons tidy */
.option-btn{
  background:#0b0f16;
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:.9rem 1rem;
  text-align:left;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-height:64px;                           /* equal height */
}
.option-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(34,211,238,.45);
  box-shadow:0 16px 30px rgba(34,211,238,.18);
  color:#fff;
}

/* Base logo constraints */
.option-logo{
  height:28px;                               /* consistent visual size */
  width:auto;
  max-width:160px;                           /* don't let wide logos overflow */
  object-fit:contain;
  display:block;
}

/* Extra rule for very wide wordmarks (Platinumlist) */
.logo-wide{
  height:28px;                               /* same height */
  max-width:180px;                           /* a bit more room if needed */
}

/* Small screens: nudge sizes down */
@media (max-width:576px){
  .option-logo, .logo-wide{ height:24px; max-width:150px; }
}

/* Optional: right arrow style for consistency */
.option-btn .fa-arrow-right{ opacity:.9; }

/* refine Alex Brush FT... line */
.event-subtitle,
.featured-ft{
  font-family: 'Style Script', ;
  font-size: clamp(0.85rem, 0.8rem + 1vw, 1.15rem); /* smaller */
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;   /* let it flow naturally */
  letter-spacing: 0;
  color: rgba(255,255,255,.9); /* for black box */
}
.featured-ft{
  color: #0f172a;         /* for header section */
}


/* If you DO want it uppercase, uncomment:
.featured-ft{ text-transform: uppercase; letter-spacing: .05em; }
*/

@media (max-width: 576px){
  .event-hero .frame img.no-crop{
    object-fit: contain;
    object-position: center top; /* center image both horizontally and vertically */
  }
}

/*topbar stylesheet*/

/* Topbar */
.topbar{
  background:#0b0f16;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.9rem;
  padding:.4rem 0;             /* compact height */
}
.topbar .topbar-link{
  color:#fff;
  text-decoration:none;
  opacity:.9;
  transition:opacity .15s ease;
}
.topbar .topbar-link:hover{ opacity:1; }

/* Social icons */
.topbar .topbar-icon{
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.topbar .topbar-icon:hover{
  transform:translateY(-1px);
  background:linear-gradient(90deg,#7c3aed,#22d3ee);
  color:#fff;
}

/* Mobile tweaks */
@media (max-width:576px){
  .topbar{ font-size:.85rem; padding:.35rem 0; }
  .topbar .topbar-icon{ width:28px; height:28px; }
}