/* ── Single post ──────────────────────────────────────────────────────────── */

/* Dedicated print-only sheet (functions/print_sheet.php) - must stay hidden
   on screen; only shown via assets/css/print.css (media="print"). */
.print-sheet {
    display: none;
}

.sp-post {
    background: var(--wp--preset--color--white);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.sp-post-hero {
    position: relative;
    padding-bottom: 40px;
    overflow: hidden;
    background-color: #0d0020;
    background-image: url('../images/headline-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.sp-post-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sp-post-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sp-post-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 0, 32, 0.55) 0%, rgba(13, 0, 32, 0.75) 55%, rgba(13, 0, 32, 0.92) 100%);
}

.sp-post-breadcrumb {
    position: relative;
    z-index: 1;
    padding-top: 16px;
    padding-bottom: 8px;
}

.sp-post-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 780px;
    padding-top: 200px;
}

.sp-post-hero--plain .sp-post-hero__content {
    padding-top: 32px;
}

.sp-post-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 6px 14px;
    background: var(--wp--preset--color--yellow);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--dark);
    text-decoration: none;
}

/* Plain-text eyebrow used on the podcast hero instead of the category chip
   (matches the "ZAINSPIRUJ SIĘ" label in the podcast Figma frame). */
.sp-post-eyebrow {
    display: inline-block;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--yellow, #FFE500);
    text-decoration: none;
}

.sp-post-eyebrow:hover {
    text-decoration: underline;
}

.sp-post-badge:hover {
    background: #f0d800;
}

.sp-post-title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--wp--preset--color--white);
}

.sp-post-hero__desc {
    margin: 16px 0 0;
    max-width: 580px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--wp--preset--color--neutral-100);
}

.sp-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sp-post-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.85);
}

.sp-post-meta__item svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.sp-post-meta__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: block;
}

.sp-post-meta__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.sp-post-meta__avatar--placeholder svg {
    width: 14px;
    height: 14px;
}

.sp-post-meta__author-role {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}

.sp-post-meta__sep {
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

/* Not shown on podcast pages for now - kept in markup (not deleted) since we
   may bring related posts back for podcasts later. */
.sp-post-related--hidden {
    display: none;
}

/* ── Layout: sidebar + content ───────────────────────────────────────────── */

.sp-post-layout {
    display: flex;
    align-items: flex-start;
    gap: 64px;
    padding: 48px 32px 64px;
}

/* The intro section gets its own light background + generous vertical
   padding, matching the standalone "opis głowny" section in Figma. */
.sp-post-layout--podcast {
    padding: 80px 32px;
}

/* Podcast sidebar sits on the RIGHT (order, not DOM order, so regular
   articles keep their existing left-hand sidebar) and its info card
   overlaps the bottom of the hero photo - see e.g. the reference webinar
   page layout. Pulling the whole column up (not just the card) keeps the
   "Powiązane tematy" box below it at its normal gap from the card. */
.sp-post-layout--podcast .sp-post-sidebar {
    order: 2;
    width: 420px;
    margin-top: -220px;
    z-index: 2;
}

.sp-post-layout--podcast .sp-post-main {
    order: 1;
}

.sp-post-sidebar {
    width: 240px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
}

.sp-post-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.sp-post-tags__label {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--neutral-300);
}

.sp-post-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-post-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--wp--preset--color--purple-50, #f4f1fb);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    color: var(--wp--preset--color--purple-500);
    text-decoration: none;
    transition: background 0.15s;
}

.sp-post-tag:hover {
    background: var(--wp--preset--color--purple-100, #ebe8f4);
}

/* "Powiązane tematy" sidebar variant used on podcast pages - icon-badge
   heading + larger bordered pills, matching the podcast Figma frame. */

.sp-post-tags--podcast .sp-post-tags__heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.sp-post-tags--podcast .sp-post-tags__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--wp--preset--color--purple-500, #430B8E);
    color: var(--wp--preset--color--white);
}

.sp-post-tags--podcast .sp-post-tags__icon svg {
    width: 20px;
    height: 20px;
}

.sp-post-tags--podcast .sp-post-tags__label {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--wp--preset--color--black);
}

.sp-post-tags--podcast .sp-post-tag {
    padding: 8px 12px;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--black);
    border-radius: 4px;
    font-size: 14px;
    color: var(--wp--preset--color--black);
}

.sp-post-tags--podcast .sp-post-tag:hover {
    background: var(--wp--preset--color--neutral-100);
}

.sp-post-share__label {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--neutral-300);
}

.sp-post-share__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-post-share__copy-wrap,
.sp-post-share__toggle-wrap {
    position: relative;
}

.sp-post-share__popover[hidden] {
    display: none;
}

.sp-post-share__popover {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    padding: 8px;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--purple-100, #ebe8f4);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(26, 26, 37, 0.14);
}

.sp-post-share__done {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    left: 0;
    width: max-content;
    margin: 0;
    padding: 6px 10px;
    background: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--purple-100, #ebe8f4);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(26, 26, 37, 0.14);
    font-size: 12px;
    color: var(--wp--preset--color--purple-500);
}

/* Small screens: anchor the popover to the viewport instead of the toggle
   button, so it can never overflow sideways regardless of where the button
   sits in the layout. In practice this fallback rarely shows on phones -
   they normally get the native share sheet instead (see single-post.js). */
@media (max-width: 480px) {
    .sp-post-share__popover {
        position: fixed;
        left: 50%;
        top: auto;
        bottom: 24px;
        transform: translateX(-50%);
        max-width: calc(100vw - 48px);
    }
}

.sp-post-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--wp--preset--color--purple-100, #ebe8f4);
    border-radius: 50%;
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--purple-500);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.sp-post-share__btn:hover {
    background: var(--wp--preset--color--purple-50, #f4f1fb);
    border-color: var(--wp--preset--color--purple-500);
}

.sp-post-main {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 760px;
}

/* Podcast pages don't share the narrow reading-column treatment of regular
   articles - the lead text/checklist here just needs to fill whatever room
   is left next to the sidebar (the episode/platform/CTA sections below are
   full-bleed, outside this column entirely). */
.sp-post-main--podcast {
    max-width: none;
}

/* ── Article typography (mirrors .sp-wysiwyg elsewhere in the theme) ────────── */

.sp-post-wysiwyg {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--wp--preset--color--black);
}

.sp-post-wysiwyg>*:first-child {
    margin-top: 0;
}

.sp-post-wysiwyg p {
    margin: 0 0 20px;
}

.sp-post-wysiwyg h2,
.sp-post-wysiwyg h3,
.sp-post-wysiwyg h4 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--wp--preset--color--black);
    margin: 40px 0 16px;
}

.sp-post-wysiwyg h2 {
    font-size: 26px;
}

.sp-post-wysiwyg h3 {
    font-size: 21px;
}

.sp-post-wysiwyg h4 {
    font-size: 18px;
}

.sp-post-wysiwyg a {
    color: var(--wp--preset--color--purple-500);
    text-decoration: underline;
}

.sp-post-wysiwyg a:hover {
    text-decoration: none;
}

/* Podcast "Opis" links get the podcast page's pink accent instead of the
   purple used by regular article body links (.sp-post-wysiwyg is shared
   between the two). */
.sp-post-main--podcast .sp-post-wysiwyg a {
    color: var(--wp--preset--color--pink-500, #DF006E);
}

.sp-post-wysiwyg ul,
.sp-post-wysiwyg ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.sp-post-wysiwyg li {
    margin-bottom: 8px;
}

/* Podcast "Opis" WYSIWYG - plain <ul> markers from the editor's own list
   button get swapped for the purple circle-check icon used elsewhere in the
   podcast checklist UI (aob_icon('circle-check')), matching the Figma
   reference. Only scoped to the podcast body, not regular article content. */
.sp-post-main--podcast .sp-post-wysiwyg ul {
    list-style: none;
    padding-left: 0;
}

.sp-post-main--podcast .sp-post-wysiwyg li {
    position: relative;
    padding-left: 32px;
}

.sp-post-main--podcast .sp-post-wysiwyg li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--wp--preset--color--purple-500, #430B8E);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M14.6667 7.38723V8.00056C14.6658 9.43818 14.2003 10.837 13.3396 11.9884C12.4788 13.1399 11.2689 13.9822 9.89023 14.3898C8.51162 14.7974 7.03817 14.7485 5.68964 14.2503C4.34112 13.7521 3.18976 12.8313 2.4073 11.6253C1.62484 10.4193 1.25319 8.9926 1.34778 7.5581C1.44237 6.1236 1.99813 4.75811 2.93218 3.66528C3.86623 2.57244 5.12852 1.81082 6.53079 1.49399C7.93306 1.17717 9.40017 1.32212 10.7133 1.90723" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.99999 7.33382L7.99999 9.33382L14.6667 2.66715" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none"><path d="M14.6667 7.38723V8.00056C14.6658 9.43818 14.2003 10.837 13.3396 11.9884C12.4788 13.1399 11.2689 13.9822 9.89023 14.3898C8.51162 14.7974 7.03817 14.7485 5.68964 14.2503C4.34112 13.7521 3.18976 12.8313 2.4073 11.6253C1.62484 10.4193 1.25319 8.9926 1.34778 7.5581C1.44237 6.1236 1.99813 4.75811 2.93218 3.66528C3.86623 2.57244 5.12852 1.81082 6.53079 1.49399C7.93306 1.17717 9.40017 1.32212 10.7133 1.90723" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.99999 7.33382L7.99999 9.33382L14.6667 2.66715" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

html[data-theme="dark"] .sp-post-main--podcast .sp-post-wysiwyg li::before {
    background-color: var(--wp--preset--color--pink-500, #DF006E);
}

.sp-post-wysiwyg blockquote {
    margin: 32px 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--wp--preset--color--yellow);
    font-size: 19px;
    font-weight: 400;
    font-style: italic;
    color: var(--wp--preset--color--dark);
}

.sp-post-wysiwyg img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 24px 0;
}

.sp-post-wysiwyg figcaption {
    font-size: 13px;
    color: var(--wp--preset--color--neutral-300);
    margin-top: -12px;
    margin-bottom: 24px;
}

/* ── Newsletter gate ──────────────────────────────────────────────────────── */

.sp-post-gate-teaser {
    position: relative;
    max-height: 120px;
    overflow: hidden;
    margin-bottom: 24px;
}

.sp-post-gate-teaser::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--wp--preset--color--white) 100%);
}

/* Uses the site's actual newsletter block classes (.nw-fields-grid, .nw-input,
   .nw-label, .nw-cb*, .nw-submit, .nw-footer - see gutenberg/newsletter/style.css,
   enqueued alongside this file) for the form itself, so it looks and behaves
   identically to every other sign-up form on the site. Only the card
   container and heading copy are styled here. */

.sp-post-gate {
    padding: 40px;
    background: var(--wp--preset--color--dark);
    border-radius: 8px;
}

.sp-post-gate__eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--yellow, #FFE500);
}

.sp-post-gate__title {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--wp--preset--color--white);
}

.sp-post-gate__desc {
    margin: 0 0 32px;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--wp--preset--color--neutral-100);
    max-width: 560px;
}

.sp-post-gate__form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* .nw-cb-text has no default link color (relies on whoever fills the real
   newsletter block's rich-text consent field to style it inline) - our own
   plain-text consent copy needs one explicitly, or the UA default link color
   is nearly invisible against the card's dark background. */
.sp-post-gate .nw-cb-text a {
    color: var(--wp--preset--color--white);
    text-decoration: underline;
}

/* Belt-and-suspenders for the loading/disabled submit state: keep the border
   and a faint fill explicit (with plain-color fallbacks, not just the theme
   CSS variables) so the button never collapses into a flat, undifferentiated
   block if a variable fails to resolve for any reason - only the label text
   should disappear behind the spinner, never the button chrome itself. */
.sp-post-gate .nw-submit:disabled {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
}

.sp-post-gate .nw-submit.is-loading {
    color: transparent;
}

.sp-post-gate .nw-cb-text a:hover {
    text-decoration: none;
}

.sp-post-gate-update {
    margin: 32px 0 0;
    font-size: 13px;
    color: var(--wp--preset--color--neutral-300);
}

.sp-post-gate-update button {
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    color: var(--wp--preset--color--purple-500);
    text-decoration: underline;
    cursor: pointer;
}

.sp-post-gate--update {
    margin-top: 16px;
    padding: 28px;
}

/* Honeypot field (functions/form_spam_guard.php) - visually hidden, kept in
   the tab order out of the way rather than display:none so it still reads as
   "empty" to simple bots that skip hidden fields. */
.sp-post-gate .aob-hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Author box ───────────────────────────────────────────────────────────── */

.sp-post-author {
    background: #0d0020;
    padding: 40px 0;
}

.sp-post-author__inner {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.sp-post-author__inner+.sp-post-author__inner {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-post-author__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    display: block;
}

.sp-post-author__avatar--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.sp-post-author__avatar--placeholder svg {
    width: 28px;
    height: 28px;
}

.sp-post-author__label {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.sp-post-author__name {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--wp--preset--color--white);
}

.sp-post-author__role {
    margin-left: 8px;
    font-size: 14px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
}

.sp-post-author__bio {
    margin: 0;
    max-width: 640px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

/* ── Related posts ────────────────────────────────────────────────────────── */

.sp-post-related {
    padding: 56px 0 80px;
}

.sp-post-related__title {
    margin: 0 0 24px;
    font-size: 26px;
    font-weight: 700;
    color: var(--wp--preset--color--black);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1199px) {
    .sp-post-layout {
        padding: 40px 24px 48px;
    }
}

@media (max-width: 991px) {
    .sp-post-title {
        font-size: 30px;
    }

    .sp-post-hero__content {
        padding-top: 140px;
    }

    .sp-post-layout {
        flex-direction: column;
        gap: 32px;
    }

    .sp-post-sidebar {
        width: 100%;
        position: static;
    }

    .sp-post-main {
        max-width: 100%;
    }

    /* Stacked single-column layout - the hero-overlap trick only works
       alongside a hero photo it can overlap, not stacked above/below it.
       The 420px desktop width also has to be reset here - it otherwise
       outranks the generic .sp-post-sidebar { width: 100% } above since
       this selector has higher specificity and isn't itself scoped to a
       media query. */
    .sp-post-layout--podcast .sp-post-sidebar {
        order: 0;
        width: 100%;
        margin-top: 0;
    }

    .sp-post-layout--podcast .sp-post-main {
        order: 0;
    }
}

@media (max-width: 600px) {
    .sp-post-title {
        font-size: 24px;
    }

    .sp-post-hero__content {
        padding-top: 100px;
    }

    .sp-post-author__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .sp-post-gate {
        padding: 24px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Dark mode
   ══════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .sp-post {
    background: var(--wp--preset--color--dark);
}

html[data-theme="dark"] .sp-post-badge {
    color: var(--wp--preset--color--dark);
}

html[data-theme="dark"] .sp-post-tag {
    background: rgba(255, 255, 255, 0.06);
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-post-tag:hover {
    background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-post-tags__label {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-post-share__popover {
    background: var(--wp--preset--color--dark);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .sp-post-share__btn {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .sp-post-share__btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

html[data-theme="dark"] .sp-post-share__done {
    background: var(--wp--preset--color--dark);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-post-wysiwyg {
    color: rgba(255, 255, 255, 0.75);
}

html[data-theme="dark"] .sp-post-gate-teaser::after {
    background: linear-gradient(180deg, rgba(26, 26, 37, 0) 0%, var(--wp--preset--color--dark) 100%);
}

/* .sp-post-gate (and the .nw-* form elements inside it) is an intentionally
   always-dark card, matching the site's real newsletter block - which is
   also always-dark regardless of the light/dark theme toggle. Its own
   background still needs a dark-mode override though: .sp-post itself
   becomes "dark" in dark mode too, so without this the card was the exact
   same color as the page behind it and disappeared. */
html[data-theme="dark"] .sp-post-gate {
    background: var(--wp--preset--color--black, #1A1A25);
}

/* .nw-input is "black" by default (fine on the real newsletter block's own
   background elsewhere) - now that the card itself is "black" too in dark
   mode, the fields need to be one shade lighter so they're still visible as
   fields instead of disappearing into the card. */
html[data-theme="dark"] .sp-post-gate .nw-input,
html[data-theme="dark"] .sp-post-gate .nw-select {
    background: var(--wp--preset--color--dark, #2E2E39);
}

html[data-theme="dark"] .sp-post-gate-update {
    color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .sp-post-gate-update button {
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-post-wysiwyg h2,
html[data-theme="dark"] .sp-post-wysiwyg h3,
html[data-theme="dark"] .sp-post-wysiwyg h4 {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-post-wysiwyg a {
    color: var(--wp--preset--color--yellow, #FFE500);
}

html[data-theme="dark"] .sp-post-wysiwyg blockquote {
    color: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .sp-post-related__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-podcast-episodes__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-podcast-episodes__desc {
    color: rgba(255, 255, 255, 0.65);
}

/* .sp-post-tags--podcast's light-mode pills use a black border/text, which
   is invisible/unreadable once the sidebar sits on a dark background - give
   this variant its own dark-mode look instead of relying on the generic
   .sp-post-tag dark override (which only touches background/color, not
   border-color, and loses the specificity fight with the --podcast variant
   anyway). */
html[data-theme="dark"] .sp-post-tags--podcast .sp-post-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-post-tags--podcast .sp-post-tag:hover {
    background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-post-tags--podcast .sp-post-tags__label {
    color: var(--wp--preset--color--white);
}

/* Icon badge stays pink on dark backgrounds - the purple used in light
   theme is too close to the dark card colors around it to read as an
   accent there. */
html[data-theme="dark"] .sp-post-tags--podcast .sp-post-tags__icon {
    background: var(--wp--preset--color--pink-500, #DF006E);
}

/* -- Podcast (category "Podcasty") ------------------------------------------ */

.sp-podcast-lead {
    max-width: 812px;
    margin-bottom: 24px;
}

.sp-podcast-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 812px;
    margin: 0 0 32px;
    padding: 0;
    list-style: none;
}

.sp-podcast-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sp-podcast-checklist svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--wp--preset--color--purple-500, #430B8E);
}

html[data-theme="dark"] .sp-podcast-checklist svg {
    color: var(--wp--preset--color--pink-500, #DF006E);
}

.sp-podcast-checklist span {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--wp--preset--color--black);
}

.sp-podcast-checklist--sm {
    margin: 0;
    gap: 12px;
}

.sp-podcast-checklist--sm span {
    font-size: 14px;
}

/* Hosts / guests list */

.sp-podcast-hosts {
    margin: 0 0 32px;
    padding-top: 24px;
    border-top: 1px solid var(--wp--preset--color--neutral-100);
}

.sp-podcast-hosts__label {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--wp--preset--color--black);
}

.sp-podcast-hosts__list {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.sp-podcast-hosts--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    border: 0;
}

.sp-podcast-hosts__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.sp-podcast-hosts__name {
    margin: 0;
    font-size: 14px;
    color: var(--wp--preset--color--black);
}

.sp-podcast-hosts__org {
    margin: 0;
    font-size: 12px;
    color: var(--wp--preset--color--neutral-300);
}

.sp-podcast-hosts__role {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--wp--preset--color--purple-500, #430B8E);
}

html[data-theme="dark"] .sp-podcast-hosts__role {
    color: var(--wp--preset--color--pink-500, #DF006E);
}

/* Platform cards ("jeden odcinek") - matches Figma node 1126:31687: a
   narrower centered card row (not the full container width) with real
   YouTube/Spotify brand marks and a bottom-right "Sprawdź teraz" link. */

.sp-podcast-platforms {
    display: flex;
    gap: 24px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (max-width:991px) {
    .sp-podcast-platforms {
        padding: 0;
    }
}

.sp-podcast-platform-card {
    display: flex;
    align-items: flex-end;
    gap: 40px;
    flex: 1 1 0;
    min-width: 0;
    padding: 32px;
    border: 1px solid var(--wp--preset--color--purple-100);
    border-radius: 16px;
    background: var(--wp--preset--color--white);
    text-decoration: none;
    box-shadow: 2px 2px 8px rgba(26, 26, 37, 0.1);
    transition: border-color 0.15s ease;
}

.sp-podcast-platform-card:hover {
    border-color: var(--wp--preset--color--pink-500, #DF006E);
}

.sp-podcast-platform-card__content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
}

.sp-podcast-platform-card__logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-podcast-platform-card__logo svg {
    flex-shrink: 0;
    display: block;
}

.sp-podcast-platform-card__logo-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.sp-podcast-platform-card__logo-text--yt {
    color: var(--wp--preset--color--black);
}

.sp-podcast-platform-card__logo-text--sp {
    color: #1ED760;
}

.sp-podcast-platform-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wp--preset--color--black);
}

.sp-podcast-platform-card__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--wp--preset--color--dark);
}

.sp-podcast-platform-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--pink-500);
    white-space: nowrap;
}

.sp-podcast-platform-card__cta svg {
    width: 16px;
    height: 16px;
}

/* Episode list ("wiele odcinków") */

.sp-podcast-episodes-section {
    padding: 80px 0;
    background: var(--wp--preset--color--neutral-100, #F5F5FC);
}

.sp-podcast-episodes__heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
}

.sp-podcast-episodes__eyebrow-bar {
    width: 4px;
    height: 24px;
    background: var(--wp--preset--color--pink-500, #DF006E);
}

.sp-podcast-episodes__eyebrow {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--pink-500, #DF006E);
}

.sp-podcast-episodes__title {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
}

.sp-podcast-episodes__desc {
    max-width: 640px;
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--wp--preset--color--dark);
}

.sp-podcast-episodes-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 32px;
}

.sp-podcast-ep-card {
    position: relative;
    padding: 24px;
    background: var(--wp--preset--color--white);
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.sp-podcast-ep-card:has(.sp-podcast-ep-card__media:hover) {
    box-shadow: 2px 2px 12px rgba(26, 26, 37, 0.12);
}

.sp-podcast-ep-card__num {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--yellow, #FFE500);
    font-size: 24px;
}

.sp-podcast-ep-card__row {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}

.sp-podcast-ep-card__media {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 405px;
    height: 228px;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
}

a.sp-podcast-ep-card__media {
    cursor: pointer;
}

.sp-podcast-ep-card__media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--purple-50, #F4F1FB);
    color: var(--wp--preset--color--purple-100, #E7E2F3);
}

.sp-podcast-ep-card__media--placeholder svg {
    width: 120px;
    height: 120px;
}

@media (max-width:991px) {
    .sp-podcast-ep-card__media--placeholder svg {
        width: 80px;
        height: 80px;
    }
}

.sp-podcast-ep-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

a.sp-podcast-ep-card__media:hover .sp-podcast-ep-card__img {
    transform: scale(1.05);
}

.sp-podcast-ep-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(26, 26, 37, 0.5);
    color: var(--wp--preset--color--white);
    transition: transform 0.2s ease, background 0.2s ease;
}

a.sp-podcast-ep-card__media:hover .sp-podcast-ep-card__play {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--wp--preset--color--pink-500, #DF006E);
}

@media (prefers-reduced-motion: reduce) {
    .sp-podcast-ep-card__img,
    .sp-podcast-ep-card__play,
    .sp-podcast-ep-card__extra {
        transition: none;
    }
}

.sp-podcast-ep-card__play svg {
    width: 20px;
    height: 20px;
}

.sp-podcast-ep-card__body {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-podcast-ep-card__tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 4px 8px;
    border: 1px solid var(--wp--preset--color--neutral-200);
    border-radius: 4px;
    font-size: 12px;
    color: var(--wp--preset--color--black);
}

.sp-podcast-ep-card__title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--wp--preset--color--black);
}

.sp-podcast-ep-card__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--wp--preset--color--dark);
}

/* Wraps the checklist/chips/hosts block so it can be collapsed behind a
   "Pokaż więcej" toggle on mobile - display:contents on desktop keeps both
   wrapper levels out of the .sp-podcast-ep-card__body flex flow (same gap
   as if they didn't exist), so nothing is ever collapsed there. */
.sp-podcast-ep-card__extra,
.sp-podcast-ep-card__extra-inner {
    display: contents;
}

.sp-podcast-ep-card__more-btn {
    display: none;
}

.sp-podcast-ep-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-podcast-ep-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--wp--preset--color--neutral-100, #F5F5FC);
    border-radius: 11px;
    font-size: 12px;
    color: var(--wp--preset--color--dark);
}

.sp-podcast-ep-card__hosts-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sp-podcast-ep-card__hosts-label {
    margin: 0;
    font-size: 14px;
    color: var(--wp--preset--color--black);
    white-space: nowrap;
}

.sp-podcast-ep-card__hosts-line {
    flex: 1 1 auto;
    height: 1px;
    background: var(--wp--preset--color--neutral-200);
}

.sp-podcast-ep-card__links {
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: flex-end;
    align-self: flex-end;
    flex-shrink: 0;
}

.sp-podcast-platform-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--black);
    text-decoration: none;
    white-space: nowrap;
}

.sp-podcast-platform-link:hover {
    color: var(--wp--preset--color--pink-500);
}

.sp-podcast-platform-link svg {
    width: 16px;
    height: 16px;
}

/* Real brand marks (bigger/different aspect than the generic 16x16 icons
   above) - override with more specific selectors. */
/* Both icons share the same width so "Obejrzyj na YouTube" / "Posłuchaj na
   Spotify" start at the same x position underneath each other, instead of
   drifting right/left depending on each brand mark's own aspect ratio. */
.sp-podcast-platform-link .sp-podcast-platform-link__icon--yt,
.sp-podcast-platform-link .sp-podcast-platform-link__icon--sp {
    width: 32px;
    height: auto;
}

.sp-podcast-ep-card__notify-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 28px;
    border: 1px solid var(--wp--preset--color--black);
    border-radius: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--wp--preset--color--black);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.sp-podcast-ep-card__notify-btn:hover {
    background: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

/* Sidebar podcast info card - always dark regardless of site theme (same
   fixed-dark convention as .sp-podcast-platform-card etc.), so its own
   colors are hardcoded here rather than following the light/dark tokens
   the rest of .sp-post-sidebar uses. */

.sp-podcast-info-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 40px;
    background: var(--wp--preset--color--black, #1A1A25);
    border-radius: 8px;
}

.sp-podcast-info {
    display: flex;
    gap: 8px;
}

.sp-podcast-info__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--wp--preset--color--white, #fff);
}

/* The icon SVGs (e.g. "podcast") carry their own width/height attributes
   (up to 120x120 for the podcast icon), which win over a size set on this
   wrapper alone - constrain the actual <svg> too. */
.sp-podcast-info__icon svg {
    width: 100%;
    height: 100%;
}

.sp-podcast-info__label {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--wp--preset--color--neutral-200, #C5C5CD);
}

.sp-podcast-info__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--wp--preset--color--white);
}

.sp-podcast-info__title--sm {
    margin-bottom: 0;
}

.sp-podcast-info__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    color: var(--wp--preset--color--white);
}

/* Sidebar webinar info card - same fixed-dark convention as the podcast
   info card above (own colors hardcoded, ignores light/dark theme). */

.sp-webinar-info-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 40px;
    background: var(--wp--preset--color--black, #1A1A25);
    border-radius: 8px;
}

.sp-webinar-info {
    display: flex;
    gap: 8px;
}

.sp-webinar-info__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--wp--preset--color--white, #fff);
}

.sp-webinar-info__icon svg {
    width: 100%;
    height: 100%;
}

/* The "user" glyph has more built-in padding in its viewBox than the
   calendar/check-circle glyphs, so it reads visibly smaller at the same
   box size - scale it up to match their footprint. */
.sp-webinar-info__icon--user svg {
    transform: scale(1.25);
    transform-origin: center;
}

.sp-webinar-info__label {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--wp--preset--color--neutral-200, #C5C5CD);
}

.sp-webinar-info__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--wp--preset--color--white);
}

.sp-webinar-info__title--sm {
    margin-bottom: 0;
}

.sp-webinar-info__role {
    color: var(--wp--preset--color--neutral-200, #C5C5CD);
    font-weight: 300;
}

.sp-webinar-cta {
    justify-content: center;
    text-align: center;
}

.sp-webinar-cta-note {
    margin: 0;
    padding: 12px 16px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-align: center;
    color: var(--wp--preset--color--neutral-200, #C5C5CD);
}

/* Hero status pill (next to the author/date/read-time meta row) */

.sp-webinar-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sp-webinar-status svg {
    width: 16px;
    height: 16px;
}

.sp-webinar-status--past {
    opacity: 0.75;
}

@media (max-width: 782px) {
    .sp-podcast-platforms {
        flex-direction: column;
    }

    .sp-podcast-platform-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .sp-podcast-episodes-section {
        padding: 48px 0;
    }

    .sp-podcast-ep-card__num {
        display: none;
    }

    .sp-podcast-ep-card__row {
        flex-direction: column;
        gap: 20px;
    }

    .sp-podcast-ep-card__media {
        width: 100%;
        height: 200px;
    }

    .sp-podcast-ep-card__links {
        align-self: stretch;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    /* Checklist/chips/hosts collapse behind "Pokaż więcej" on mobile
       (Figma node 1133:7311). Animated with the CSS grid 0fr/1fr trick
       instead of [hidden]/display so the reveal expands smoothly - the
       -inner wrapper is what actually gets clipped/measured, since a grid
       track's height can't be transitioned directly on the item itself. */
    .sp-podcast-ep-card__extra {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease;
    }

    .sp-podcast-ep-card__extra.is-expanded {
        grid-template-rows: 1fr;
    }

    .sp-podcast-ep-card__extra-inner {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-height: 0;
        overflow: hidden;
    }

    .sp-podcast-ep-card__more-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        align-self: flex-start;
        padding: 0;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        color: var(--wp--preset--color--black);
        cursor: pointer;
    }

    .sp-podcast-ep-card__more-btn svg {
        width: 16px;
        height: 16px;
        transition: transform 0.2s ease;
    }

    .sp-podcast-ep-card__more-btn[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .sp-podcast-platforms-section {
        padding: 48px 0;
    }

    .sp-podcast-episodes__title {
        font-size: 26px;
    }

    /* Sidebar podcast info card - mobile values from Figma (node 1133:7357):
       smaller padding, square corners, one shade lighter background than
       desktop's --black, and a wider icon-to-text gap since the icon itself
       is bigger on mobile. */
    .sp-post-layout--podcast .sp-podcast-info-card {
        padding: 24px;
        border-radius: 0;
        background: var(--wp--preset--color--dark, #2E2E39);
    }

    .sp-post-layout--podcast .sp-podcast-info {
        gap: 16px;
    }

    .sp-post-layout--podcast .sp-podcast-info__icon {
        width: 24px;
        height: 24px;
    }
}

/* Dark mode */

html[data-theme="dark"] .sp-podcast-checklist span,
html[data-theme="dark"] .sp-podcast-hosts__name,
html[data-theme="dark"] .sp-podcast-platform-card__title,
html[data-theme="dark"] .sp-podcast-ep-card__title,
html[data-theme="dark"] .sp-podcast-ep-card__desc,
html[data-theme="dark"] .sp-podcast-ep-card__tag,
html[data-theme="dark"] .sp-podcast-ep-card__hosts-label,
html[data-theme="dark"] .sp-podcast-ep-card__more-btn,
html[data-theme="dark"] .sp-podcast-platform-link {
    color: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .sp-podcast-hosts {
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-podcast-episodes-section {
    /* Was the same "dark" as .sp-post's own dark-mode background, so the
       section was invisible against the page - use "black" so it stands
       out (and so the cards inside, one shade lighter, stand out from it). */
    background: var(--wp--preset--color--black, #1A1A25);
}

html[data-theme="dark"] .sp-podcast-ep-card {
    background: var(--wp--preset--color--dark, #2E2E39);
}

html[data-theme="dark"] .sp-podcast-ep-card__num {
    background: var(--wp--preset--color--black, #1A1A25);
}

html[data-theme="dark"] .sp-podcast-ep-card__tag {
    border-color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .sp-podcast-ep-card__hosts-line {
    background: rgba(255, 255, 255, 0.15);
}

html[data-theme="dark"] .sp-podcast-ep-card__media--placeholder {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .sp-podcast-ep-card__notify-btn {
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-podcast-ep-card__notify-btn:hover {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
}

html[data-theme="dark"] .sp-podcast-platform-card {
    /* Section itself has no dark-mode background override (it sits directly
       on .sp-post, which is already "dark") - use "black" here so the card
       actually stands out instead of disappearing into an identical bg. */
    background: var(--wp--preset--color--black, #1A1A25);
    border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .sp-podcast-platform-card__desc {
    color: rgba(255, 255, 255, 0.65);
}

html[data-theme="dark"] .sp-podcast-platform-link:hover {
    color: var(--wp--preset--color--yellow, #FFE500);
}

/* -- "Słuchaj tam, gdzie lubisz" platforms section (general, not per-episode) -
   matches Figma node 1126:31687: centered headline block, short horizontal
   dash instead of the vertical eyebrow bar used by "Sprawdź odcinki". ---- */

.sp-podcast-platforms-section {
    padding: 80px 0;
}

.sp-podcast-platforms-section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin: 0 auto 40px;
    text-align: center;
}

.sp-podcast-platforms-section__dash {
    width: 24px;
    height: 4px;
    margin-bottom: 4px;
    background: var(--wp--preset--color--pink-500, #DF006E);
}

.sp-podcast-platforms-section__eyebrow {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--wp--preset--color--pink-500, #DF006E);
}

.sp-podcast-platforms-section__title {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
    color: var(--wp--preset--color--black);
}

.sp-podcast-platforms-section__desc {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--wp--preset--color--dark);
}

html[data-theme="dark"] .sp-podcast-platforms-section__title {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .sp-podcast-platforms-section__desc {
    color: rgba(255, 255, 255, 0.85);
}

/* -- Yellow "Bądź na bieżąco" CTA - full-width section, markup/classes are a
   literal copy of gutenberg/cta-2/index.php + style.css (same convention as
   woocommerce/content-single-product-szkolenie.php reusing gutenberg/cta-3).
   Keep these rules in sync with that file. -------------------------------- */

.cta-2-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 40px 48px;
    background: var(--wp--preset--color--yellow);
}

.cta-2-body {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    flex: 1;
    min-width: 0;
}

.cta-2-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.cta-2-title {
    margin: 0;
    color: var(--wp--preset--color--black);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.cta-2-desc {
    margin: 0;
    color: var(--wp--preset--color--black);
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    max-width: 640px;
}

.cta-2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 18px 40px;
    border: 1px solid var(--wp--preset--color--dark);
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    color: var(--wp--preset--color--dark);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.cta-2-btn:hover {
    background: var(--wp--preset--color--dark);
    color: var(--wp--preset--color--yellow);
}

html[data-theme="dark"] .cta-2 {
    background: var(--wp--preset--color--black, #1A1A25);
}

.sp-podcast-cta2 {
    padding-top: 32px;
}

/* The podcast page's own .cta-2 usage already sits on the dark
   .sp-post-layout--podcast background above/below it - the section-level
   black background above stacks black-on-black there and reads as a seam,
   so revert to no section background (the visible card is .cta-2-card,
   already handled separately) for this variant only. */
html[data-theme="dark"] .cta-2.sp-podcast-cta2 {
    background: none;
}

html[data-theme="dark"] .cta-2-card {
    background: var(--wp--preset--color--dark, #2E2E39);
}

/* Podcast page's cta-2 card sits directly on the "black" .sp-post-layout--
   podcast background above/below - "dark" (one shade lighter) is what makes
   it stand out as its own card there, same idea as .sp-podcast-ep-card etc. */
html[data-theme="dark"] .sp-podcast-cta2 .cta-2-card {
    background: var(--wp--preset--color--black, #1A1A25);
}

html[data-theme="dark"] .cta-2-title,
html[data-theme="dark"] .cta-2-desc {
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .cta-2-btn {
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white);
}

html[data-theme="dark"] .cta-2-btn:hover {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--dark, #2E2E39);
}

/* -- Dark contact-coordinator CTA - full-width section, markup/classes are a
   literal copy of gutenberg/cta-3/index.php + style.css (same convention
   already used in woocommerce/content-single-product-szkolenie.php - see the
   comment there). Keep in sync with that file. --------------------------- */

.cta-3 {
    padding: 64px 0;
}

.cta-3-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px 48px;
    background: var(--wp--preset--color--black);
    border-radius: 4px;
}

.cta-3-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cta-3-headline {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--wp--preset--color--yellow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-3-title {
    margin: 0;
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    color: var(--wp--preset--color--white);
}

.cta-3-desc {
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: var(--wp--preset--color--neutral-100);
}

/* Podcast/webinar pages can show up to 2 coordinators (the real cta-3 block
   only ever renders one) - side by side when there are two. */
.cta-3-people {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 40px;
    flex-shrink: 0;
}

.cta-3-person {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.cta-3-person__photo {
    flex-shrink: 0;
}

.cta-3-person__img {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.cta-3-person__body {
    display: flex;
    align-items: center;
    gap: 40px;
}

.cta-3-person__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
}

.cta-3-person__name {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--wp--preset--color--white);
}

.cta-3-person__role {
    margin: 0;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: var(--wp--preset--color--neutral-200);
}

.cta-3-person__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.cta-3-person__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wp--preset--color--white);
    border: none;
    text-decoration: none;
    line-height: 0;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cta-3-person__btn:hover {
    background: #f0f0f0;
}

.sp-podcast-cta3 .cta-3-person__btn {
    color: var(--wp--preset--color--purple-500, #430B8E);
}

html[data-theme="dark"] .sp-podcast-cta3 .cta-3-person__btn {
    color: var(--wp--preset--color--pink-500, #DF006E);
}

html[data-theme="dark"] .cta-3 {
    background: var(--wp--preset--color--dark, #2E2E39);
}

@media (max-width: 767px) {
    .cta-2 {
        padding: 48px 0;
    }

    .cta-2-card {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 40px 24px;
    }

    .cta-2-body {
        flex-direction: column;
        gap: 24px;
    }

    .cta-2-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .cta-3 {
        padding: 32px 0;
    }

    .cta-3-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 24px;
        border-radius: 4px;
    }

    .cta-3-people {
        flex-direction: column;
    }

    .cta-3-person {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .cta-3-person__body {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        width: 100%;
    }

    .cta-3-person__meta {
        white-space: normal;
    }
}