.header-content .logonew,
.header-content .logonew span {
    border-color: #fff !important;
    color: #fff !important;
    text-decoration-color: #fff !important;
}

.header-content .logonew span::after,
.header-content .logonew::after {
    background-color: #fff !important;
    border-color: #fff !important;
}

.header-details {
    background: linear-gradient(90deg, #e0625a 0%, #8b5fd6 55%, #5a6fd6 100%) !important;
    border-bottom: 0 !important;
    margin-top: -100px !important;
    padding: 180px 0 90px !important;
    position: relative;
}

.flex-template-hero.hero.ptb150.relative.red-blue-grad-vertical {
    background: transparent !important;
    padding-bottom: 50px !important;
    padding-top: 50px !important;
}

.container {
    gap: 32px !important;
    max-width: 1440px !important;
    padding: 30px 50px 50px !important;
}

.container > .sidebar { flex-shrink: 0; width: 260px !important; }
.container .main-content { min-width: 0; padding-left: 0 !important; }

.resource-directory-filter {
    align-items: end;
    background: #fafafa;
    border: 1px solid #e5e9f0;
    border-radius: 18px;
    display: flex;
    gap: 22px;
    justify-content: space-between;
    margin: 22px 0;
    padding: 22px;
}

.resource-directory-filter fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
.resource-directory-filter legend { color: #222; font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-bottom: 10px; text-transform: uppercase; }
.resource-directory-filter__options { display: flex; flex-wrap: wrap; gap: 8px; }
.resource-directory-filter__options button {
    background: #fff; border: 1px solid #d7d9df; border-radius: 999px; color: #333; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; padding: 9px 14px;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.resource-directory-filter__options button:hover { border-color: #6145f1; color: #6145f1; transform: translateY(-1px); }
.resource-directory-filter__options button[aria-pressed="true"] { background: #6145f1; border-color: #6145f1; color: #fff; }
.resource-directory-filter__clear { background: transparent; border: 0; color: #1080d1; cursor: pointer; flex: 0 0 auto; font-size: 14px; font-weight: 700; padding: 10px 2px; text-decoration: underline; text-underline-offset: 3px; }
.resource-directory-filter__summary { color: #5e5e68; font-size: 14px; margin: -8px 2px 22px; }
[data-directory-card][hidden] { display: none !important; }

.articles-grid [data-directory-card],
.case-studies-grid [data-directory-card] {
    box-sizing: border-box;
    height: 100%;
}

.articles-grid .resource-inner,
.case-studies-grid .resource-inner,
.article-card[data-directory-card] {
    border: 1px solid #e5e9f0;
    border-radius: 20px;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}

.articles-grid .article-card[data-directory-card] {
    display: flex !important;
    flex-direction: column !important;
}

.article-card[data-directory-card] .image-container {
    aspect-ratio: 16 / 9;
    background: #fff;
    flex: 0 0 auto !important;
    height: auto !important;
    overflow: hidden;
    width: 100% !important;
}

.article-card[data-directory-card] .image-container .article-image {
    aspect-ratio: auto;
    display: block;
    height: 100% !important;
    object-fit: cover !important;
    width: 100% !important;
}

.article-card[data-directory-card] .article-content {
    box-sizing: border-box;
    padding: 24px !important;
    width: 100% !important;
}

.article-card[data-directory-card] .recent-article-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin: 0 0 16px !important;
}

.article-card[data-directory-card] .article-meta {
    margin: 0 0 24px !important;
}

.article-card[data-directory-card] .blog-card-cta {
    align-self: flex-start;
    margin-top: auto;
}

.articles-grid .resource-inner:hover,
.case-studies-grid .resource-inner:hover,
.article-card[data-directory-card]:hover {
    box-shadow: 0 10px 20px rgba(34, 34, 34, .1);
    transform: translateY(-2px);
}

.articles-grid .resource-inner,
.case-studies-grid .resource-inner {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    padding: 0 !important;
}

.articles-grid { align-items: stretch; }
.articles-grid > [data-directory-card] { height: 100%; }

.articles-grid .resource-info,
.case-studies-grid .resource-info,
.article-card .article-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    padding: 24px !important;
}

.articles-grid .resource-info > .btn,
.case-studies-grid .resource-info > .btn {
    align-self: flex-start;
    margin-top: auto;
}

.articles-grid .resource-info .resource-type {
    align-self: flex-start;
    background: #eef4fc !important;
    border: 0 !important;
    border-radius: 999px;
    color: #1080d1;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
    min-height: 0;
    padding: 6px 11px;
    position: static !important;
    /* This badge started life as an absolutely-positioned corner ribbon on
       the image (see the legacy translate offset baked into some templates'
       global .resource-type rules). Once JS moves it into the text column,
       that leftover transform shifts it out of alignment with the title
       below it, so it must be explicitly cleared here. */
    transform: none !important;
    width: auto;
}

.articles-grid .resource-info .resource-typenew {
    align-self: flex-start;
    margin: 0 0 16px;
}

.articles-grid .resource-info .resource-type::before,
.articles-grid .resource-info .resource-type::after { display: none !important; }
.articles-grid .resource-info .resource-type span { color: inherit !important; }
.articles-grid .resource-info h3 { font-size: 24px; line-height: 1.3; margin: 0 0 18px !important; }
.articles-grid .resource-info p { line-height: 1.5; margin: 0 0 16px !important; }
.articles-grid .resource-info > .btn { margin-top: auto !important; }

.featured-article,
.featured-whitepaper-card {
    align-items: stretch !important;
    aspect-ratio: 8 / 3;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(59, 123, 181, .1);
    display: flex !important;
    gap: 0 !important;
    overflow: hidden;
}

.featured-image,
.featured-whitepaper-image {
    align-items: center;
    background: #fff;
    display: flex;
    flex: 0 0 50% !important;
    min-width: 0;
}
.featured-image img,
.featured-whitepaper-image img {
    border-radius: 0 !important;
    display: block;
    height: 100% !important;
    object-fit: contain !important;
    width: 100%;
}

/* Blog listings (index.php's /blog/ and category.php's /category/*) show
   real photography in their featured hero card, and both templates' own
   .featured-image img rule already says object-fit:cover -- the
   contain-fit above is only meant to protect *designed* cover art (a
   whitepaper/case-study/report/event graphic with text baked in) on the
   other pages that reuse this same .featured-image markup, and it was
   winning here too via !important, leaving blank gaps around blog photos
   that don't happen to match the card's aspect ratio. */
body.blog .featured-image img,
body.category .featured-image img {
    object-fit: cover !important;
}
.featured-content,
.featured-whitepaper-content { align-self: center; box-sizing: border-box; padding: 36px 40px !important; }
.featured-content .article-title,
.featured-whitepaper-title { font-size: clamp(24px, 2vw, 32px) !important; letter-spacing: -.02em; line-height: 1.2 !important; margin: 0 0 20px !important; }
.featured-content .article-excerpt,
.featured-whitepaper-excerpt { line-height: 1.5 !important; margin: 0 0 20px !important; }
.featured-content .article-meta,
.featured-whitepaper-meta { margin: 0 !important; }

.articles-grid .resource-image,
.case-studies-grid .resource-image,
.article-card .article-image {
    aspect-ratio: 5 / 3;
    background-color: #fff;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    width: 100%;
}

.articles-grid .resource-image { margin: 0 !important; }

/* Events cards render their artwork as a CSS background (.bg-cover) rather
   than an <img>, and that artwork is a designed banner meant to bleed to
   every edge of the card -- unlike the contain-fit treatment above, which
   exists to protect case-study/report cover art from cropping. */
.articles-grid .resource-image.bg-cover {
    background-size: cover !important;
}

.articles-grid .resource-image img,
.case-studies-grid .resource-image img,
.article-card .article-image img {
    display: block;
    height: 100% !important;
    object-fit: contain !important;
    width: 100% !important;
}

/* Blog photography is the one directory asset intended to crop full-bleed. */
.articles-grid .article-card[data-directory-card] .article-image {
    object-fit: cover !important;
}

.directory-inline-cta {
    align-items: center;
    background: linear-gradient(90deg, #5684b9 0%, #ef8c78 100%);
    border-radius: 20px;
    color: #fff;
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin: 8px 0;
    padding: 42px 52px;
}

.directory-inline-cta h3 { color: #fff; font-size: 30px; margin: 0 0 8px; }
.directory-inline-cta p { color: #fff; font-size: 18px; margin: 0; }
.directory-inline-cta .demo-btn { flex: 0 0 auto; margin-left: 32px; }

.resource-directory-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 36px 0 12px;
}

.resource-directory-pagination button {
    background: #fff; border: 1px solid #d7d9df; border-radius: 999px; color: #333; cursor: pointer;
    font: inherit; font-weight: 700; min-width: 42px; padding: 10px 14px;
}
.resource-directory-pagination button:hover:not(:disabled) { border-color: #6145f1; color: #6145f1; transform: translateY(-1px); }
.resource-directory-pagination button[aria-current="page"] { background: #6145f1; border-color: #6145f1; color: #fff; }
.resource-directory-pagination button:disabled { cursor: default; opacity: .45; }

.sidebar > .breadcrumb {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
}

@media (max-width: 700px) {
    .resource-directory-filter { align-items: stretch; flex-direction: column; padding: 18px; }
    .resource-directory-filter__options { flex-wrap: nowrap; margin-right: -18px; overflow-x: auto; padding: 0 18px 6px 0; }
    .resource-directory-filter__options button { flex: 0 0 auto; }
    .resource-directory-filter__clear { align-self: flex-start; }
    .directory-inline-cta { align-items: flex-start; flex-direction: column; padding: 28px 24px; }
    .directory-inline-cta .demo-btn { margin: 24px 0 0; }
}

@media (max-width: 768px) {
    .container { flex-direction: column; padding-left: 20px !important; padding-right: 20px !important; }
    .container > .sidebar { width: 100% !important; }
}

@media (max-width: 1350px) {
    .featured-article,
    .featured-whitepaper-card { aspect-ratio: auto; flex-direction: column !important; }
    .featured-image,
    .featured-whitepaper-image { flex: 0 0 auto !important; width: 100%; }
    .featured-image img,
    .featured-whitepaper-image img { height: auto !important; }
    .featured-content,
    .featured-whitepaper-content { align-self: stretch; padding: 32px !important; }
}

/* Must come after every card display rule. The previous placement allowed the
   more-specific flex layout to override the native hidden state. */
.articles-grid [data-directory-card][hidden],
.case-studies-grid [data-directory-card][hidden] {
    display: none !important;
}