/* ============================================================
   WEBINARS.CSS
   ============================================================ */

.playlist-section { background: var(--color-white); }
.playlist-section--alt { background: var(--color-off-white); }

.playlist-section__intro {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-end;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}
.playlist-section__intro p {
  color: var(--color-text-muted);
  line-height: 1.85;
  max-width: 600px;
  margin-top: var(--space-4);
}
.btn-yt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: #ff0000;
  color: var(--color-white);
  padding: 0.6rem 1.35rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
  min-height: 44px;
  flex-shrink: 0;
}
.btn-yt:hover { opacity: 0.88; }

.playlist-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: #000;
}
.playlist-embed iframe {
  width: 100%; aspect-ratio: 16/9;
  border: none; display: block;
}

.playlist-meta {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-6);
  background: var(--color-off-white);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.playlist-section--alt .playlist-meta { background: var(--color-white); }
.playlist-meta strong { color: var(--color-cobalt-dark); }
.playlist-meta .dot { color: var(--color-border); }

/* Subscribe strip */
.subscribe-strip {
  background: var(--color-cobalt-dark);
  padding-block: var(--space-12);
}
.subscribe-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.subscribe-strip__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-white);
  margin-bottom: var(--space-2);
}
.subscribe-strip__body { color: rgba(255,255,255,0.65); font-size: var(--text-sm); }

/* Enquiries */
.webinar-enquiries { background: var(--color-white); }
.webinar-enquiries__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-10) var(--space-10);
  background: var(--color-off-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.webinar-enquiries__inner h2 {
  font-size: var(--text-xl);
  color: var(--color-cobalt-dark);
  margin-bottom: var(--space-3);
}
.webinar-enquiries__inner p { color: var(--color-text-muted); line-height: 1.75; }
.webinar-enquiries__also p { color: var(--color-text-muted); font-size: var(--text-sm); }

@media (max-width: 1024px) {
  .playlist-section__intro { grid-template-columns: 1fr; }
  .webinar-enquiries__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .subscribe-strip__inner { flex-direction: column; text-align: center; }
}

/* ── TIES ABOUT ── */
.ties-about { background: var(--color-white); }
.ties-about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  align-items: center;
}
.ties-about__grid > div > p { color: var(--color-text-muted); line-height: 1.9; margin-bottom: var(--space-6); }
.ties-about__image img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.ties-platforms__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-cobalt-dark);
  margin-bottom: var(--space-4);
}
.ties-platforms__grid { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ties-platform-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-cobalt-dark);
  color: var(--color-white);
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--transition-fast);
  min-height: 44px;
}
.ties-platform-btn:hover { background: var(--color-primary); }
.ties-radio {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.1rem;
}
.ties-radio__label { font-size: var(--text-xs); font-weight: 700; color: var(--color-primary); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.08em; }
.ties-radio__stations { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── APPLY TO SPEAK ── */
.apply-to-speak { background: var(--color-white); }
.apply-to-speak__card {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  position: relative; overflow: hidden;
}
.apply-to-speak__card::before {
  content: '';
  position: absolute; top: -40%; right: -5%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
}
.apply-to-speak__text { position: relative; z-index: 2; }
.apply-to-speak__text .label { color: rgba(255,255,255,0.65); }
.apply-to-speak__text .label::before { background: rgba(255,255,255,0.4); }
.apply-to-speak__text h2 { font-size: var(--text-xl); color: var(--color-white); margin-bottom: var(--space-4); }
.apply-to-speak__text p { color: rgba(255,255,255,0.8); line-height: 1.8; max-width: 520px; margin-bottom: var(--space-6); }
.apply-to-speak__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.apply-to-speak__icon { font-size: 5rem; opacity: 0.25; flex-shrink: 0; position: relative; z-index: 2; }

@media (max-width: 1024px) {
  .ties-about__grid { grid-template-columns: 1fr; }
  .apply-to-speak__card { flex-direction: column; }
  .apply-to-speak__icon { display: none; }
}

/* ── MIC SVG ── */
.ties-mic-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-off-white);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  min-height: 360px;
}
.ties-mic-svg {
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* ── 3-VIDEO GRID ── */
.playlist-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.playlist-grid-3__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #000;
}
.playlist-grid-3__item iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  display: block;
}

@media (max-width: 1024px) {
  .playlist-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ties-mic-wrap { min-height: 240px; }
}