/* =====================================================================
   Havrais Dire — Speaker Events (hub + event pages, and home teaser)
   ===================================================================== */

/* ---- Hub hero ---- */
.sp-hero { padding: 84px 0 40px; }
.sp-hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); margin: .05em 0 .3em; }
.sp-hero .lead { margin-bottom: 0; }

/* ---- Event cards (hub grid + home teaser) ---- */
.sp-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px; margin-top: 44px;
}
.sp-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease;
}
.sp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: rgba(214, 72, 38, .28); }

.sp-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--peach-soft); }
.sp-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.sp-card:hover .sp-card__media img { transform: scale(1.04); }
.sp-card__media--empty {
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 20% 0%, var(--peach), var(--peach-soft) 70%);
}
.sp-card__media--empty span {
  font-family: var(--serif); font-style: italic; font-weight: 560;
  color: var(--terracotta); font-size: 1.05rem;
}
.sp-card__play {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.sp-card__play::after {
  content: ""; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .92) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23D64826"><path d="M9 6.5v11l9-5.5z"/></svg>') center / 24px no-repeat;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease);
}
.sp-card:hover .sp-card__play::after { transform: scale(1.1); }

.sp-card__body { display: flex; flex-direction: column; gap: 7px; padding: 22px 22px 20px; flex: 1; }
.sp-card__meta {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.sp-card__title { font-family: var(--serif); font-weight: 620; font-size: 1.28rem; letter-spacing: -.01em; line-height: 1.22; color: var(--ink); }
.sp-card__speaker { color: var(--ink-soft); font-size: .93rem; margin: 0; flex: 1; }
.sp-card__speaker strong { color: var(--ink); font-weight: 600; }
.sp-card__more { font-weight: 600; color: var(--terracotta); font-size: .9rem; margin-top: 8px; }
.sp-card__more .arr { display: inline-block; transition: transform .3s var(--ease); }
.sp-card:hover .sp-card__more .arr { transform: translateX(4px); }

/* ---- Single event page ---- */
.sp-event-head { padding: 72px 0 36px; }
.sp-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .92rem; margin-bottom: 30px;
}
.sp-back .arr { display: inline-block; transition: transform .3s var(--ease); }
.sp-back:hover .arr { transform: translateX(-4px); }
.sp-event-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); margin: .1em 0 .4em; max-width: 22ch; }
.sp-event-head .sp-meta-row {
  display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  color: var(--ink-soft); font-size: .95rem;
}
.sp-event-head .sp-meta-row .who strong { color: var(--ink); font-weight: 600; }
.sp-event-head .sp-meta-row .dot { opacity: .4; }

.sp-video { margin: 26px 0 0; }
.sp-video__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden;
  background: #241C17; box-shadow: var(--shadow);
}
.sp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* click-to-load facade */
.sp-video__poster {
  position: absolute; inset: 0; width: 100%; cursor: pointer; border: 0; padding: 0;
  background: none; display: block;
}
.sp-video__poster img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .3s ease, transform .6s var(--ease); }
.sp-video__poster:hover img { opacity: 1; transform: scale(1.02); }
.sp-video__poster::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255, 255, 255, .94) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23D64826"><path d="M9 6.5v11l9-5.5z"/></svg>') center / 30px no-repeat;
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease);
}
.sp-video__poster:hover::after { transform: translate(-50%, -50%) scale(1.08); }

.sp-video--none {
  aspect-ratio: auto; padding: 26px 30px;
  display: flex; align-items: center; gap: 14px;
  background: var(--peach-soft); border: 1px solid var(--line);
  border-radius: 18px; color: var(--ink-soft); box-shadow: none;
  font-size: .95rem;
}

.sp-body { padding: 48px 0 10px; }
.sp-body__inner { max-width: 720px; }
.sp-body h2 { font-size: 1.7rem; margin: 1.6em 0 .5em; }
.sp-body p { color: var(--ink-soft); font-size: 1.05rem; }
.sp-body p:first-of-type { color: var(--ink); font-size: 1.18rem; line-height: 1.6; }

.sp-takeaways {
  margin-top: 36px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: 28px 30px;
}
.sp-takeaways h3 { margin: 0 0 14px; font-size: 1.2rem; }
.sp-takeaways ul { margin: 0; padding: 0; list-style: none; }
.sp-takeaways li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  color: var(--ink-soft); font-size: .98rem;
}
.sp-takeaways li::before {
  content: "→"; position: absolute; left: 0; color: var(--terracotta); font-weight: 600;
}

.sp-more { padding: 72px 0 20px; }
.sp-more h2 { font-size: 1.8rem; }