/* Content pages: the hub (/content) and the webinar pages (/webinars/<slug>), since 01.11.2026.
   Built by scripts/webinar_pages.py. Loaded after /styles.css and /guide.css and uses their tokens. */

/* Hub head: a navy band, like the "why" band on the home page, with jump links */
.ct-hero { background: var(--navy); color: var(--off-white); }
.ct-hero .wrap { padding-block: 72px 64px; }
.ct-hero .eyebrow { color: var(--amber); }
.ct-hero h1 { margin-top: 14px; max-width: 760px; font-size: 52px; line-height: 60px; font-weight: 800; letter-spacing: -0.6px; }
.ct-hero-text { margin-top: 18px; max-width: 640px; font-size: 19px; line-height: 32px; color: var(--muted-on-dark); }
.ct-jump { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.ct-jump a { height: 42px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid var(--border-on-dark); color: var(--off-white); font-size: 15px; font-weight: 700; text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.ct-jump a:hover { background: var(--grad-fill); border-color: transparent; color: var(--on-amber); }

/* Sections */
.ct-section .wrap { padding-block: 64px; border-top: 1px solid var(--border); }
.content-page .ct-hero + .ct-section .wrap { border-top: 0; }
.ct-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ct-section h2 { font-size: 34px; line-height: 42px; font-weight: 800; letter-spacing: -0.4px; }
.ct-sub { margin-top: 6px; font-size: 17px; line-height: 27px; color: var(--ink-muted); }

/* Newsletter first: an amber panel with the signup, and the last issues beside it */
.ct-nl { padding: 40px; border-radius: 28px; background: #f4ad421f; border: 1px solid #f4ad4266; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px; align-items: start; }
.ct-nl h2 { margin-top: 10px; }
.ct-nl-copy p:not(.eyebrow) { margin-top: 12px; font-size: 17px; line-height: 28px; color: var(--ink-muted); }
.ct-nl-actions { margin-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ct-nl-actions .btn { height: 52px; padding: 0 26px; font-size: 16px; }
.ct-nl .ct-links { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ct-nl .ct-link a { padding: 16px 20px; }

/* Webinar cards */
.ct-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ct-card a { height: 100%; display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--border); background: #fff; overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.ct-card a:hover { border-color: var(--amber); transform: translateY(-2px); color: var(--ink); }
.ct-thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--navy); }
.ct-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ct-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #15233f73 100%); }
.ct-thumb-play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 9999px; background: var(--grad-head); color: var(--on-amber); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px #15233fb3; transition: transform .15s ease; }
.ct-card a:hover .ct-thumb-play { transform: scale(1.08); }
.ct-len { z-index: 1; position: absolute; bottom: 10px; inset-inline-start: 10px; padding: 3px 9px; border-radius: 9999px; background: #15233fcc; color: var(--off-white); font-size: 13px; line-height: 18px; font-weight: 600; direction: ltr; }
.ct-card-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.ct-card time, .ct-link time { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.ct-card-title { font-size: 18px; line-height: 27px; font-weight: 800; }
.ct-card-text { font-size: 15px; line-height: 25px; color: var(--ink-muted); }

/* Guides and newsletter issues: text cards */
.ct-links { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ct-link a { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--border); background: #fff; text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.ct-link a:hover { border-color: var(--amber); transform: translateY(-1px); color: var(--ink); }
.ct-icon { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: #f4ad4229; color: var(--ink); display: flex; align-items: center; justify-content: center; }

/* Short videos: links, not embeds */
.ct-short { padding: 32px 36px; border-radius: 24px; background: var(--navy); color: var(--off-white); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ct-section .ct-short h2 { font-size: 26px; line-height: 34px; }
.ct-short p { margin-top: 6px; font-size: 17px; line-height: 28px; color: var(--muted-on-dark); }
.ct-short-links { display: flex; gap: 12px; flex-wrap: wrap; }
.ct-short .btn-outline { height: 48px; padding: 0 24px; font-size: 15px; color: var(--off-white); border-color: var(--border-on-dark); }
.ct-short .btn-outline:hover { color: var(--on-amber); }

/* Webinar page: the video, then summary, takeaways and chapters */
.wb-media { margin: 32px 0 0; }
.wb-play, .wb-media .voice-frame { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--navy); box-shadow: 0 30px 60px -36px #15233f80; }
.wb-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.wb-play:hover img { transform: scale(1.02); }
.wb-play .voice-play { position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 9999px; background: var(--grad-head); color: var(--on-amber); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -3px 6px #15233f40, 0 10px 24px -8px #15233fb3; transition: transform .15s ease; }
.wb-play:hover .voice-play { transform: scale(1.06); }
.wb-media .voice-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.wb-media figcaption { margin-top: 12px; font-size: 15px; line-height: 22px; }
.guide article .wb-media figcaption a { font-weight: 600; }
.guide article ol.wb-chapters { list-style: none; padding: 0; gap: 0; }
.wb-chapters li { border-top: 1px solid var(--border); }
.wb-chapters li:first-child { border-top: 0; }
.guide article .wb-chapters a { display: flex; gap: 16px; padding: 10px 0; text-decoration: none; font-weight: 500; color: var(--ink-muted); }
.guide article .wb-chapters a:hover { color: var(--ink); }
.wb-chapters time { flex: none; min-width: 64px; font-weight: 700; color: var(--ink); direction: ltr; text-align: end; font-variant-numeric: tabular-nums; }
.webinar .ct-section .wrap { padding-block: 64px 8px; }

@media (prefers-reduced-motion: reduce) { .ct-card a, .ct-link a, .wb-play img, .wb-play .voice-play, .ct-thumb-play, .ct-jump a { transition: none; } }
@media (max-width: 1100px) {
  .ct-grid, .ct-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-nl { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 720px) {
  .ct-hero .wrap { padding-block: 44px 40px; }
  .ct-hero h1 { font-size: 34px; line-height: 42px; letter-spacing: -0.3px; }
  .ct-hero-text { font-size: 17px; line-height: 28px; }
  .ct-jump { margin-top: 24px; gap: 8px; }
  .ct-jump a { height: 38px; padding: 0 14px; font-size: 14px; }
  .ct-nl { padding: 24px 18px; border-radius: 22px; }
  .ct-nl-actions .btn { width: 100%; }
  .ct-sub { font-size: 16px; line-height: 26px; }
  .ct-section .wrap { padding-block: 40px; }
  .ct-section h2 { font-size: 24px; line-height: 32px; }
  .ct-section-head { flex-direction: column; gap: 4px; }
  .ct-grid, .ct-links { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ct-short { padding: 24px 20px; }
  .wb-play .voice-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .guide article .wb-chapters a { gap: 12px; font-size: 16px; line-height: 26px; }
}