/* ── Learn / Blog shared hero styles ───────────────────────────── */
.blog-hero-background {
    background-image: linear-gradient(to top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.9) 100%), url(/assets/img/jumbotron-hero-bg5.jpg);
    background-position: center;
    background-size: cover;
}

.post-hero-section {
    width: 100%;
    padding-top: 90px;
    margin-bottom: 1rem;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(23,183,224,0.25) 0%, rgba(23,183,224,0) 30%),
        radial-gradient(circle at 80% 10%, rgba(70,47,104,0.35) 0%, rgba(70,47,104,0) 30%),
        linear-gradient(135deg, #082565 0%, #133B88 50%, #462F68 100%);
}
.author-hero-section {
    width: 100%;
    padding-top: 90px;
    margin-bottom: 1rem;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(23,183,224,0.22) 0%, transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(70,47,104,0.3) 0%, transparent 30%),
        linear-gradient(135deg, #082565 0%, #133B88 50%, #462F68 100%);
}
.post-hero-ambient { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.post-hero-blob { position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.55; }
.post-hero-blob.blob-one { width: 300px; height: 300px; top: -60px; right: -60px; background: rgba(23,183,224,0.2); }
.post-hero-blob.blob-two { width: 220px; height: 220px; bottom: -40px; left: -30px; background: rgba(70,47,104,0.28); }
.post-hero-category {
    font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: rgba(23,183,224,0.18); border: 1px solid rgba(23,183,224,0.35);
    color: #7DE1FF; padding: .3rem .8rem; border-radius: 999px; text-decoration: none;
}
.post-hero-category:hover { background: rgba(23,183,224,0.3); color: #7DE1FF; text-decoration: none; }
.post-hero-meta { font-size: .88rem; color: rgba(255,255,255,0.72); gap: .25rem; }
.post-hero-author-link { color: rgba(255,255,255,0.85); text-decoration: none; }
.post-hero-author-link:hover { color: #17B7E0; }
.post-hero-tag {
    font-size: .76rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75); text-decoration: none;
}
.post-hero-tag:hover { background: rgba(23,183,224,0.2); color: #7DE1FF; text-decoration: none; }

.learn-hero-section {
	min-height: 60vh;
	padding-top: 90px;
    margin-bottom: 1rem;
	background-image:
		radial-gradient(circle at 16% 20%, rgba(23,183,224,0.28) 0%, rgba(23,183,224,0) 30%),
		radial-gradient(circle at 80% 15%, rgba(70,47,104,0.38) 0%, rgba(70,47,104,0) 32%),
		linear-gradient(135deg, #082565 0%, #133B88 44%, #462F68 100%);
}
.learn-hero-ambient { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.learn-hero-blob {
	position:absolute; border-radius:50%; filter:blur(48px); opacity:0.6;
}
.learn-hero-blob.blob-one { width:340px; height:340px; top:-60px; right:-80px; background:rgba(23,183,224,0.22); }
.learn-hero-blob.blob-two { width:260px; height:260px; bottom:-40px; left:-50px; background:rgba(70,47,104,0.32); }
.learn-hero-ring {
	position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,0.07);
	width:480px; height:480px; top:50%; left:60%; transform:translate(-50%,-50%);
}
.learn-hero-eyebrow {
	display:inline-block; padding:.45rem .9rem; border-radius:999px;
	font-size:.75rem; font-weight:700; letter-spacing:.12em;
	background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.16); color:#DFF8FF;
}
.learn-hero-primary-btn, .learn-hero-secondary-btn {
	display:inline-flex; align-items:center; gap:.75rem; border-radius:.75rem;
	font-weight:600; font-size:.95rem; text-decoration:none; transition:all .2s;
}
.learn-hero-primary-btn {
	background:linear-gradient(135deg,#17B7E0,#0e8fae); color:#fff;
	box-shadow:0 8px 24px rgba(23,183,224,0.3);
}
.learn-hero-primary-btn:hover { opacity:.9; color:#fff; text-decoration:none; }
.learn-hero-secondary-btn {
	background:rgba(255,255,255,0.1); color:#fff;
	border:1px solid rgba(255,255,255,0.22);
}
.learn-hero-secondary-btn:hover { background:rgba(255,255,255,0.18); color:#fff; text-decoration:none; }
.learn-hero-btn-icon { display:inline-flex; align-items:center; justify-content:center;
	width:1.6rem; height:1.6rem; background:rgba(255,255,255,0.15); border-radius:50%; font-size:.75rem; }
.learn-hero-card {
	background:linear-gradient(145deg, rgba(11,28,76,0.92) 0%, rgba(37,50,113,0.88) 50%, rgba(70,47,104,0.9) 100%);
	border:1px solid rgba(255,255,255,0.14); border-radius:1.25rem;
	padding:2rem 2.25rem; box-shadow:0 24px 56px rgba(5,16,42,0.28);
}
.learn-hero-card-kicker {
	font-size:.7rem; font-weight:700; letter-spacing:.14em; color:rgba(255,255,255,0.5);
	margin-bottom:1.25rem;
}
.learn-hero-topic-list { list-style:none; padding:0; margin:0; }
.learn-hero-topic-list li { color:#e8f0ff; font-size:.95rem; padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,0.07); }
.learn-hero-topic-list li:last-child { border-bottom:none; }

.author-hero-avatar { border-radius: 50%; border: 3px solid rgba(23,183,224,0.4); object-fit: cover; width: 96px; height: 96px; }
.author-hero-bio { color: rgba(255,255,255,0.75); font-size: .95rem; max-width: 540px; margin: 0 auto; }
.author-hero-twitter { color: rgba(255,255,255,0.6); font-size: .88rem; text-decoration: none; }
.author-hero-twitter:hover { color: #17B7E0; text-decoration: none; }

/* ── Learn widget styles ───────────────────────────── */

.learn-cta-widget {
    background: linear-gradient(145deg, #082565 0%, #133B88 50%, #462F68 100%);
    border-radius: 1.1rem;
    padding: 1.75rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 12px 36px rgba(8,37,101,0.18);
    text-align: center;
}

.learn-cta-widget-kicker {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,0.5);
    margin-bottom: .75rem;
}

.learn-cta-widget-headline {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.learn-cta-widget-body {
    font-size: .88rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.learn-cta-widget-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,#17B7E0,#0e8fae);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    padding: .65rem 1.4rem;
    border-radius: .7rem;
    text-decoration: none;
    width: 100%;
    box-shadow: 0 6px 18px rgba(23,183,224,0.3);
    transition: opacity .2s;
}

    .learn-cta-widget-btn:hover {
        opacity: .88;
        color: #fff;
        text-decoration: none;
    }

.learn-cta-widget-link {
    font-size: .82rem;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
}

    .learn-cta-widget-link:hover {
        color: #17B7E0;
        text-decoration: none;
    }

.learn-postcta {
    margin-bottom: 2rem;
}

.learn-postcta-inner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #082565 0%, #133B88 50%, #462F68 100%);
    border-radius: 1.25rem;
    padding: 2.25rem 2.5rem;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 16px 48px rgba(8,37,101,0.18);
}

.learn-postcta-ambient {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.learn-postcta-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(52px);
    opacity: 0.5;
    width: 280px;
    height: 280px;
    top: -60px;
    right: -60px;
    background: rgba(23,183,224,0.28);
}

.learn-postcta-content {
    position: relative;
    z-index: 1;
}

.learn-postcta-eyebrow {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    color: rgba(255,255,255,0.5);
    margin-bottom: .75rem;
}

.learn-postcta-headline {
    font-size: 1.45rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: .75rem;
    line-height: 1.3;
}

.learn-postcta-body {
    font-size: .95rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    max-width: 560px;
    margin-bottom: 1.5rem;
}

.learn-postcta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}

.learn-postcta-btn-primary {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #17B7E0, #0e8fae);
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    padding: .7rem 1.5rem;
    border-radius: .7rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(23,183,224,0.3);
    transition: opacity .2s;
}

    .learn-postcta-btn-primary:hover {
        opacity: .88;
        color: #fff;
        text-decoration: none;
    }

.learn-postcta-btn-secondary {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.65);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s;
}

    .learn-postcta-btn-secondary:hover {
        color: #17B7E0;
        text-decoration: none;
    }
.learn-post-article-body img {
    display: block;
    width: auto;
    margin: 2rem auto;
    padding: 0.5rem;
    border: 1px solid rgba(8,37,101,0.08);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,248,252,0.98));
    box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 18px 40px rgba(7,23,59,0.08), 0 0 0 1px rgba(8,37,101,0.03);
}

.learn-post-article-body p > img:only-child,
.learn-post-article-body a > img:only-child {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
}

@media screen and (max-width: 767px) {
    .learn-post-article-body img {
        padding: 0.35rem;
        border-radius: 0.85rem;
        box-shadow: 0 12px 28px rgba(7,23,59,0.08), 0 0 0 1px rgba(8,37,101,0.04);
    }
}