/**
 * Insights Page Header Gradient Overlays
 *
 * Applied via the "Header Gradient Style" ACF select field on each post.
 * Modifier classes are added to the .post-hero element.
 *
 * Available options: green | orange | blue | purple
 *
 * Colors:
 *   Green  — #52C41A (solid) → #B8D706 (fade)
 *   Orange — #FA541C (solid) → #FAAD14 (fade)
 *   Blue   — #1D5BBF → #1890FF → #13C2C2 (fade)
 *   Purple — #722ED1 → #9254DE → #EB2F96 (fade)
 */

/* Ensure position context & shared ::before setup for all variants */
.post-hero--gradient-green,
.post-hero--gradient-orange,
.post-hero--gradient-blue,
.post-hero--gradient-purple {
    position: relative;
}

.post-hero--gradient-green::before,
.post-hero--gradient-orange::before,
.post-hero--gradient-blue::before,
.post-hero--gradient-purple::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* Green */
.post-hero--gradient-green::before {
    background: linear-gradient(96deg, #52C41A 0%, #52C41A 50%, rgba(184, 215, 6, 0.10) 100%) !important;
}

/* Orange */
.post-hero--gradient-orange::before {
    background: linear-gradient(96deg, #FA541C 1.91%, #FA541C 50.95%, rgba(250, 173, 20, 0.15) 100%) !important;
}

/* Blue */
.post-hero--gradient-blue::before {
    background: linear-gradient(96deg, #1D5BBF 3.02%, #1890FF 51.07%, rgba(19, 194, 194, 0.10) 99.11%) !important;
}

/* Purple */
.post-hero--gradient-purple::before {
    background: linear-gradient(96deg, #722ED1 3.02%, #9254DE 51.07%, rgba(235, 47, 150, 0.10) 99.11%) !important;
}


/* ============================================================
   GATED CONTENT — gradient header layout
   The gradient + photo are combined as a CSS multiple-background
   shorthand in the entry-header inline style (content-gated.php).
   Prefixed body.single-gated to beat single-gated.css in cascade.
   ============================================================ */

/* Override the default #f7f7f7 background-color so the inline bg-image shows.
   body.single-gated prefix gives higher specificity than .single-gated .entry-header */
body.single-gated .entry-header[class*="gradient-"] {
    background-color: transparent !important;
}

/* Remove the post-hero's own duplicate background-image and grey bg-color */
body.single-gated .entry-header[class*="gradient-"] .post-hero {
    background-image: none !important;
    background-color: transparent !important;
    min-height: 0 !important;
}
body.single-gated .entry-header[class*="gradient-"] .post-hero::before {
    display: none !important;
}

/* Hide the img element — the photo is the entry-header background */
body.single-gated .entry-header[class*="gradient-"] .post-hero-img {
    display: none;
}

/* White text throughout the gradient header */
body.single-gated .entry-header[class*="gradient-"] .post-hero__content,
body.single-gated .entry-header[class*="gradient-"] .entry-title,
body.single-gated .entry-header[class*="gradient-"] .entry-header__content-title,
body.single-gated .entry-header[class*="gradient-"] .entry-header__content-taxonomy {
    color: #fff !important;
}

/* Breadcrumbs */
body.single-gated .entry-header[class*="gradient-"] .post-hero__breadcrumbs a,
body.single-gated .entry-header[class*="gradient-"] .post-hero__breadcrumbs .separator,
body.single-gated .entry-header[class*="gradient-"] .post-hero__breadcrumbs .current {
    color: rgba(255, 255, 255, 0.85) !important;
}
body.single-gated .entry-header[class*="gradient-"] .post-hero__breadcrumbs a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* Date, author, taxonomy terms */
body.single-gated .entry-header[class*="gradient-"] .entry-date,
body.single-gated .entry-header[class*="gradient-"] .entry-author,
body.single-gated .entry-header[class*="gradient-"] .post-hero__meta-term {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Fixed 350px header height — propagate height through the full chain */
body.single-gated .entry-header[class*="gradient-"] {
    min-height: 0 !important;
    height: 350px !important;
    overflow: hidden !important;
}
/* Propagate height through wrapper so post-hero can be 100% */
body.single-gated .entry-header[class*="gradient-"] > .wrapper {
    height: 100% !important;
    grid-template-columns: 1fr !important; /* span full width — no image col */
    align-items: stretch !important;
}
body.single-gated .entry-header[class*="gradient-"] .post-hero {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}
body.single-gated .entry-header[class*="gradient-"] .post-hero .post-hero__content {
    width: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Scale title to fit within 350px — matches Figma ~40px */
body.single-gated #page .entry-header[class*="gradient-"] .post-hero__title h1.entry-title,
body.single-gated #page .entry-header[class*="gradient-"] h1.entry-title {
    font-size: 40px !important;
    line-height: 1.2 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* Hide date — not relevant on guide/whitepaper gradient headers */
body.single-gated .entry-header[class*="gradient-"] .entry-date {
    display: none !important;
}

/* Widen inner content so breadcrumbs don't wrap */
body.single-gated .entry-header[class*="gradient-"] .post-hero-inner {
    width: 65% !important;
}
@media (min-width: 1025px) and (max-width: 1200px) {
    body.single-gated .entry-header[class*="gradient-"] .post-hero-inner {
        padding-left: 60px !important;
    }
}

/* Pull form card up to overlap the gradient header */
@media (min-width: 768px) {
    body.single-gated article.has-hero-gradient .entry-content__sidebar {
        margin-top: -18rem !important;
    }
}

/* Hide CTA blocks on all gated content pages */
.single-gated .cta-block-outer {
    display: none !important;
}

/* ============================================================
   AUTHORS — gated content pages
   ============================================================ */
.entry-content__authors {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 2.5rem 0 1.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e5e5;
}
.entry-content__authors-heading {
    font-size: 2rem;
    font-weight: 400;
    color: #1a1a1a;
    margin: 0 0 0.5rem;
    padding: 0;
}
.entry-content__author {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}
.entry-content__author-avatar {
    flex-shrink: 0;
}
.entry-content__author-avatar img {
    width: 170px;
    height: 170px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.entry-content__author-info {
    display: flex;
    flex-direction: column;
    padding-top: 0.125rem;
}
.entry-content__authors .entry-content__author-name {
    font-size: 24px !important;
    font-weight: 300 !important;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0 0 0.5rem !important;
}
.entry-content__authors .entry-content__author-title {
    font-size: 18px !important;
    font-weight: 300 !important;
    color: #555;
    line-height: 1.4;
    margin: 0 0 0.75rem !important;
    display: block;
}
#page .entry-content__authors-heading {
    font-family: "Gotham Rounded", var(--font-round-light), sans-serif !important;
    font-size: 40px !important;
    font-style: normal;
    font-weight: 300 !important;
    line-height: 50px !important;
    color: #1D5BBF !important;
    margin: 0 0 1.25rem !important;
    padding: 0;
}
#page .entry-content__authors .entry-content__author-bio {
    font-size: 13px !important;
    color: #555;
    line-height: 19px !important;
    margin: 0 0 0.75rem !important;
    font-weight: 300 !important;
}
.entry-content__author-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0066cc;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.entry-content__author-link:hover {
    text-decoration: underline;
}

body.single-gated article.has-hero-gradient .entry-content__sidebar.is-stuck {
    margin-top: 0 !important;
}

body.single-events .event__pardot.is-stuck {
    margin-top: 0 !important;
}

/* White card with shadow */
body.single-gated article.has-hero-gradient .entry-content__sidebar-inner {
    background-color: #fff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
    padding: 1.5rem 1.75rem 2rem !important;
    border-radius: 20px !important;
}

/* Large dark title */
body.single-gated article.has-hero-gradient .entry-content__form-title {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--brand-blue) !important;
    font-family: var(--font-main) !important;
    margin-bottom: 1rem !important;
}

/* Rounded thumbnail */
body.single-gated article.has-hero-gradient .entry-content__sidebar-thumbnail {
    margin: 0 0 1.25rem !important;
}
body.single-gated article.has-hero-gradient .entry-content__sidebar-thumbnail img {
    border-radius: 0.75rem !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
}

/* =============================================
   Related Insights Carousel
   ============================================= */
.related-insights-carousel {
    background-color: #f1f2f4;
    padding: 4rem 0;
    margin-top: 0;
}
.related-insights-carousel__inner {
    max-width: 66.25rem; /* matches .entry-content .wrapper */
    margin: 0 auto;
    padding: 0 1.875rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.875rem;
}
@media (min-width: 960px) {
    #page .breadcrumbs,
    #page #breadcrumbs,
    #page .breadcrumbs *,
    #page #breadcrumbs *,
    #page .hero-split__breadcrumbs nav a,
    #page .post-hero__breadcrumbs nav a,
    #page .webinar__breadcrumbs nav a,
    #page .hero-split__breadcrumbs nav .breadcrumb-separator,
    #page .post-hero__breadcrumbs nav .breadcrumb-separator,
    #page .webinar__breadcrumbs nav .breadcrumb-separator,
    #page .hero-split__breadcrumbs nav .separator,
    #page .post-hero__breadcrumbs nav .separator,
    #page .webinar__breadcrumbs nav .separator,
    #page .hero-split__breadcrumbs nav .breadcrumb-current,
    #page .post-hero__breadcrumbs nav .breadcrumb-current,
    #page .webinar__breadcrumbs nav .breadcrumb-current,
    #page .hero-split__breadcrumbs nav .current,
    #page .post-hero__breadcrumbs nav .current,
    #page .webinar__breadcrumbs nav .current {
        font-size: 16px !important;
    }
    .related-insights-carousel__inner {
        grid-template-columns: 1fr 24.0625rem; /* matches content 1fr + sidebar 385px */
    }
}
@media (min-width: 1440px) {
    .related-insights-carousel__inner {
        padding: 0;
    }
}
.related-insights-carousel__col {
    min-width: 0; /* prevent grid blowout */
}
#page .related-insights-carousel__heading {
    font-family: "Gotham Rounded", var(--font-round-light), sans-serif !important;
    font-size: 40px !important;
    font-style: normal;
    font-weight: 300 !important;
    line-height: 50px !important;
    color: #1D5BBF !important;
    margin: 0 0 2rem !important;
}
.related-insights-swiper {
    overflow: hidden;
}
.related-insights-swiper .swiper-wrapper {
    align-items: stretch;
}
.related-insights-swiper .swiper-slide {
    height: auto;
}
.related-insights-carousel__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 3px 1px rgba(0,0,0,0.1);
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: box-shadow 0.2s ease;
}
.related-insights-carousel__card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}
.related-insights-carousel__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.related-insights-carousel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.related-insights-carousel__body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}
#page .related-insights-carousel__term {
    font-size: 13px !important;
    font-weight: 500;
    color: #1a1a1a;
    text-transform: capitalize;
    margin-bottom: 0.5rem;
    display: block;
    line-height: 1.3;
}
#page .related-insights-carousel__title {
    font-size: 18px !important;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.45;
    margin: 0 0 2rem !important;
    flex: 1;
}
.related-insights-carousel__card:hover .related-insights-carousel__title {
    color: #1d5bbe;
}
.related-insights-carousel__arrow {
    position: absolute;
    bottom: 1.25rem;
    right: 1.5rem;
    font-size: 1.25rem;
    color: #1d5bbe;
    line-height: 1;
}
.related-insights-pagination {
    margin-top: 1.5rem;
    position: static !important;
    text-align: left;
}
.related-insights-pagination .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    width: 10px;
    height: 10px;
}
.related-insights-pagination .swiper-pagination-bullet-active {
    background: #1d5bbe;
}

/* ── Events: hero/content alignment + overlapping sticky form ── */
body.single-events #primary .entry-content.event {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.single-events .post-hero__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 3rem 120px 4rem;
}
body.single-events .post-hero__content {
    padding: 0 !important;
    max-width: none !important;
}
body.single-events .post-hero__event-meta {
    margin-top: 0.75rem;
    font-size: 15px;
    line-height: 23px;
    color: #fff;
    font-family: var(--font-narrow-medium, sans-serif);
}
body.single-events .post-hero__event-sep {
    margin: 0 0.35em;
    opacity: 0.7;
}
body.single-events .post-hero--event .post-hero__title h1.entry-title {
    color: #fff !important;
}
body.single-events .post-hero--event .post-hero__meta-terms a,
body.single-events .post-hero--event .post-hero__meta .post-hero__meta-term,
body.single-events .post-hero--event .post-hero__breadcrumbs,
body.single-events .post-hero--event .post-hero__breadcrumbs a,
body.single-events .post-hero--event .post-hero__breadcrumbs .separator,
body.single-events .post-hero--event .post-hero__breadcrumbs .current {
    color: #fff !important;
}
body.single-events .post-hero--event .post-hero__meta-terms a {
    border: 1px solid rgba(255, 255, 255, 0.55);
}
body.single-events .entry-content.event {
    padding: 3rem 0;
}
body.single-events .event__wrapper {
    padding-left: 60px !important;
    padding-right: 60px !important;
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
}
body.single-events .event__wrapper.has-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 5rem;
    align-items: start;
}
body.single-events .event__pardot {
    width: 380px;
    margin-top: -240px;
    padding: 2rem !important;
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important;
    position: relative;
    z-index: 4;
}
body.single-events .event__pardot.is-stuck {
    margin-top: 0 !important;
}
@media (max-width: 1024px) {
    body.single-events .post-hero__inner {
        padding: 2rem 2rem 3rem;
    }
    body.single-events .event__wrapper {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    body.single-events .event__wrapper.has-form {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    body.single-events .event__pardot {
        width: 100%;
        margin-top: 0;
    }
}
@media (max-width: 767px) {
    body.single-events .post-hero__inner {
        padding: 1.5rem 1rem 2rem;
    }
}

/* pin main content to col 1 so it never expands when sidebar is fixed */
.single-gated .entry-content__main {
    grid-column: 1;
    min-width: 0;
}
@media (max-width: 960px) {
    .related-insights-carousel__inner {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .related-insights-carousel { padding: 2.5rem 0; }
}
@media (max-width: 767px) {
    body.single-gated .entry-header[class*="gradient-"] {
        height: auto !important;
        overflow: visible !important;
    }
    body.single-gated .entry-header[class*="gradient-"] .post-hero-inner {
        width: 100% !important;
    }
}