/* Breakout Block — canonical hybrid spec from component library
   Names: theaters vocabulary
   Panels: entertainment hub treatment (44px 48px, border-radius 4px, tinted bg on dark)
   Responsive: collapse to single column at 1024px, borders flip to top */

.breakout { padding: 45px 30px; }
.breakout--black { background: var(--black); }
.breakout--white { background: var(--white); }

.breakout-split {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.breakout-split--flip { direction: rtl; }
.breakout-split--flip > * { direction: ltr; }

.bb-massive {
  font-size: clamp(48px, 7.5vw, 114px);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.04em;
  display: block;
  overflow-wrap: break-word;
}

/* Panel — entertainment hub treatment */
.bb-panel {
  padding: 44px 48px;
  border-radius: 4px;
}

.breakout--black .bb-panel { background: rgba(255,255,255,0.04); }
.breakout--white .bb-panel { background: transparent; }

/* Panel borders — positioned inside panel, facing center gap */
.bb-border-gold-left { border-left: 4px solid var(--gold); }
.bb-border-blue-left { border-left: 4px solid var(--electric-blue); }
.bb-border-purple-left { border-left: 4px solid var(--electric-purple); }
.bb-border-white-left { border-left: 4px solid rgba(255,255,255,0.25); }
.bb-border-black-left { border-left: 4px solid #1a1a1a; }
.bb-border-gold-right { border-right: 4px solid var(--gold); border-left: none; }
.bb-border-purple-right { border-right: 4px solid var(--electric-purple); border-left: none; }
.bb-border-blue-right { border-right: 4px solid var(--electric-blue); border-left: none; }
.bb-border-red-left { border-left: 4px solid #cf2e2e; }
.bb-border-red-right { border-right: 4px solid #cf2e2e; border-left: none; }
.bb-border-black-right { border-right: 4px solid #1a1a1a; border-left: none; }
.bb-border-white-right { border-right: 4px solid rgba(255,255,255,0.25); border-left: none; }
.bb-border-grad-blue-purple-right { border-right: 4px solid; border-image: linear-gradient(to bottom, var(--electric-blue), var(--electric-purple)) 1; border-left: none; }

.bb-sub {
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 20px;
}

.bb-sub--dark { color: #2a2a2a; }
.bb-sub--light { color: rgba(255,255,255,0.68); }

.bb-learn-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 2px solid;
  padding-bottom: 3px;
  transition: all 0.3s;
}

.bb-learn-more--blue { color: var(--electric-blue); border-bottom-color: var(--electric-blue); }
.bb-learn-more--blue:hover { color: var(--electric-purple); border-bottom-color: var(--electric-purple); }
.bb-learn-more--purple { color: var(--electric-purple); border-bottom-color: var(--electric-purple); }
.bb-learn-more--purple:hover { color: var(--gold); border-bottom-color: var(--gold); }
.bb-learn-more--gold { color: var(--gold-dark); border-bottom-color: var(--gold); }
.bb-learn-more--gold:hover { opacity: 0.7; }
.bb-learn-more--gold-light { color: var(--gold); border-bottom-color: rgba(254,192,39,0.5); }
.bb-learn-more--gold-light:hover { opacity: 0.7; }
.bb-learn-more--red { color: #cf2e2e; border-bottom-color: #cf2e2e; }
.bb-learn-more--red:hover { opacity: 0.7; }

/* Headline color utilities — solid */
.bb-solid-gold { color: var(--gold); }
.bb-solid-blue { color: var(--electric-blue); }
.bb-solid-purple { color: var(--electric-purple); }
.bb-solid-white { color: var(--white); }
.bb-solid-black { color: #000; }
.bb-solid-red { color: #cf2e2e; }

/* Headline color utilities — gradients */
.bb-grad-blue-purple {
  background: linear-gradient(135deg, var(--electric-blue) 0%, #6e40f0 50%, var(--electric-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bb-grad-navy-blue {
  background: linear-gradient(135deg, #0a0a2a 0%, var(--electric-blue) 52%, var(--electric-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bb-grad-gold-purple {
  background: linear-gradient(135deg, var(--gold) 0%, var(--electric-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.bb-grad-purple-gold {
  background: linear-gradient(135deg, var(--electric-purple) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* Mini-grid cards — 2x2 inside breakout panels */
.bb-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

.bb-mini-card {
  background: rgba(255,255,255,0.04);
  border-left: 4px solid var(--gold);
  padding: 18px 16px;
  border-radius: 0 4px 4px 0;
}

.bb-mini-card-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 7px;
  display: block;
}

.bb-mini-card-text {
  font-size: 14px;
  color: rgba(255,255,255,0.68);
  line-height: 1.5;
}

/* Responsive — breakout collapse */
@media (max-width: 1024px) {
  .breakout-split,
  .breakout-split--flip {
    grid-template-columns: 1fr;
    gap: 40px;
    direction: ltr;
  }

  .bb-panel {
    padding: 0;
    border-left: none;
    border-right: none;
    border-top: 4px solid rgba(255,255,255,0.2);
    padding-top: 20px;
  }

  .bb-border-gold-left,
  .bb-border-gold-right {
    border-top: 4px solid var(--gold);
    border-left: none;
    border-right: none;
  }

  .bb-border-blue-left,
  .bb-border-blue-right {
    border-top: 4px solid var(--electric-blue);
    border-left: none;
    border-right: none;
  }

  .bb-border-purple-left,
  .bb-border-purple-right {
    border-top: 4px solid var(--electric-purple);
    border-left: none;
    border-right: none;
  }

  .bb-border-white-left,
  .bb-border-white-right {
    border-top: 4px solid rgba(255,255,255,0.25);
    border-left: none;
    border-right: none;
  }

  .bb-border-grad-blue-purple-right {
    border-top: 4px solid;
    border-image: linear-gradient(to right, var(--electric-blue), var(--electric-purple)) 1;
    border-left: none;
    border-right: none;
  }

  .bb-border-black-left,
  .bb-border-black-right {
    border-top: 4px solid #1a1a1a;
    border-left: none;
    border-right: none;
  }

  .bb-border-red-left,
  .bb-border-red-right {
    border-top: 4px solid #cf2e2e;
    border-left: none;
    border-right: none;
  }

  .bb-mini-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .breakout {
    padding: 36px 20px;
  }

  .bb-massive {
    font-size: clamp(32px, 10vw, 56px);
  }

  .bb-panel {
    padding: 0;
    padding-top: 16px;
  }

  .bb-sub {
    font-size: 16px;
  }
}