/* Content Strategy resource cards — scoped to avoid Bootstrap/site conflicts */
.content-resources {
    --content-ink: #101747;
    --content-muted: #5d6689;
    --content-blue: #3465ff;
}

.content-resources .content-resource-card {
    position: relative;
    display: flex;
    min-height: 270px;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #d7ddff;
    border-radius: 20px;
    background: linear-gradient(115deg, #fff 5%, #f8fbff 45%, #e2efff 100%);
    box-shadow: 0 12px 30px rgba(32, 45, 107, .09);
    transition: transform .25s ease, box-shadow .25s ease;
}

.content-resources .content-resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(32, 45, 107, .17);
}

.content-resources .content-resource-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -70px -10%;
    height: 130px;
    z-index: -1;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(208, 231, 255, .75), rgba(241, 235, 255, .7));
    transform: rotate(-6deg);
}

.content-resources .content-resource-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 68%;
    padding: 20px 0 19px 20px;
}

.content-resources .content-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
    color: var(--content-ink);
}

.content-resources .content-card-top > i { font-size: 17px; }

.content-resources .content-tag {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(230, 228, 255, .85);
    color: #272c64;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.content-resources .content-card-title {
    margin: 0 0 10px;
    color: var(--content-ink);
    font-size: 1.3em;
    line-height: 1.32;
    font-weight: 800;
    letter-spacing: -.025em;
}

.content-resources .content-card-description {
    margin: 0 0 30px;
    color: var(--content-muted);
    font-size: 0.9em;
    line-height: 1.55;
}

.content-resources .content-resource-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--content-blue);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #2454ef;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease;
}

.content-resources .content-resource-link:hover,
.content-resources .content-resource-link:focus-visible {
    background: #eaf0ff;
    color: #143bc0;
}

.content-resources .content-link-arrow {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5975ff, #2457e9);
    color: white;
    font-size: 15px;
}

/* Decorative CSS artwork: no external image dependencies */
.content-resources .content-card-art {
    position: absolute;
    inset: 0 0 0 53%;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(circle at 75% 40%, var(--art-glow), transparent 65%);
}

.content-resources .content-art-orbit {
    position: absolute;
    width: 190px;
    height: 190px;
    top: 16%;
    left: 12%;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(255, 255, 255, .23), 0 0 0 45px rgba(255, 255, 255, .14);
}

.content-resources .content-art-tile {
    position: absolute;
    top: 27%;
    left: 25%;
    display: grid;
    place-items: center;
    width: 116px;
    height: 116px;
    border: 7px solid rgba(255, 255, 255, .65);
    border-radius: 27px;
    background: linear-gradient(135deg, var(--art-primary), var(--art-secondary));
    box-shadow: 0 20px 35px rgba(62, 67, 162, .24);
    color: white;
    font-size: 62px;
    transform: rotate(-12deg);
}

.content-resources .content-art-spark {
    position: absolute;
    color: #fff;
    font-size: 32px;
    text-shadow: 0 3px 14px rgba(92, 77, 203, .35);
}

.content-resources .spark-one { top: 13%; right: 13%; }
.content-resources .spark-two { bottom: 17%; left: 10%; font-size: 22px; }

.content-resources .content-art-dot {
    position: absolute;
    width: 28px;
    height: 28px;
    right: 14%;
    bottom: 17%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, white, var(--art-primary));
    box-shadow: 0 7px 15px rgba(78, 73, 164, .15);
}

.content-resources .content-art-tiktok { --art-primary: #20234c; --art-secondary: #f24b9a; --art-glow: #c7e7ff; }
.content-resources .content-art-design { --art-primary: #8761ff; --art-secondary: #ff8cbd; --art-glow: #e4d7ff; }
.content-resources .content-art-youtube { --art-primary: #ff4a69; --art-secondary: #a75aff; --art-glow: #d6e3ff; }
.content-resources .content-art-convert { --art-primary: #fb659b; --art-secondary: #7754fa; --art-glow: #e2d9ff; }
.content-resources .content-art-voice { --art-primary: #5479ff; --art-secondary: #b166ff; --art-glow: #c9e7ff; }

@media (max-width: 1199.98px) {
    .content-resources .content-resource-copy { width: 72%; }
    .content-resources .content-art-tile { left: 34%; }
}

@media (max-width: 767.98px) {
    .content-resources .content-resource-card { min-height: 250px; }
    .content-resources .content-resource-copy { width: 72%; }
    .content-resources .content-card-title { font-size: 17px; }
    .content-resources .content-art-tile { width: 100px; height: 100px; font-size: 52px; }
}

@media (max-width: 420px) {
    .content-resources .content-resource-copy { width: 77%; padding-left: 15px; }
    .content-resources .content-card-art { opacity: .55; }
    .content-resources .content-tag { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .content-resources .content-resource-card,
    .content-resources .content-resource-link { transition: none; }
}