/* =============================================================================
   SIDEBAR LAYOUT -- shared main-column + sticky-sidebar split with the
   standard sidebar boxes. Used by: blog archive, single posts.
   Ported from the live site.
   ============================================================================= */

.sidebar-layout {
	display:        flex;
	flex-direction: row;
	gap:            var(--space-4xl);
	align-items:    stretch;
}

.sidebar-layout__main {
	flex: 1 0 0;
}

/* Live relied on Oxygen's flex column for the box stack + gap; declared
   explicitly here. */
.sidebar-layout__sidebar {
	flex:           0 0 350px;
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

/* =============================================================================
   SIDEBAR BOXES
   ============================================================================= */

.sidebar__boxes-container {
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

.sidebar__box {
	width:         100%;
	padding:       var(--space-xl) var(--space-l);
	border:        1px solid var(--color-border-subtle);
	border-radius: var(--radius-m);
}

/* ---- Related posts ---- */

.sidebar__box--related-posts h3 {
	margin-bottom: var(--space-m);
}

.sidebar__box--related-posts ul {
	border-top: 1px solid var(--color-border-subtle);
}

.sidebar__box--related-posts ul li {
	border-bottom: 1px solid var(--color-border-subtle);
	display:       flex;
}

.sidebar__box--related-posts ul li a {
	padding:     var(--space-xs) 10px;
	color:       var(--color-text-primary);
	font-size: var(--text-ui);
	line-height: var(--leading-slim);
}

.sidebar__box--related-posts ul li a:hover {
	background-color: var(--color-bg-subtle);
	text-decoration:  none;
}

/* ---- Service CTA ---- */

.sidebar__box--service-cta img {
	width:         70%;
	margin-bottom: var(--space-xs);
}

.sidebar__box--service-cta h3 {
	font-size: var(--text-h4);
	margin-bottom: var(--space-2xs);
}

.sidebar__box--service-cta p {
	margin-bottom: var(--space-m);
}

.sidebar__box--service-cta a {
	width: 100%;
}

/* ---- Social ---- */

.sidebar__box--social {
	display:        flex;
	flex-direction: row;
	align-items:    center;
	padding:        var(--space-m) var(--space-l);
}

.sidebar__box--social p {
	font-weight:  var(--weight-black);
	margin-right: 10px;
	margin-top:   var(--space-3xs);
	color:        var(--color-text-primary);
}

.sidebar__box--social svg {
	width:      30px;
	height:     30px;
	color:      var(--color-text-primary);
	transition: color var(--duration-fast) ease;
}

.sidebar__box--social a:hover svg {
	color: var(--color-accent);
}

.sidebar__box--social a:first-of-type {
	margin-right: var(--space-3xs);
}

/* =============================================================================
   RESPONSIVE -- 1024px: sidebar drops below the main column
   ============================================================================= */

@media ( max-width: 1024px ) {

	.sidebar-layout {
		flex-direction: column;
		gap:            0;
	}

	.sidebar-layout__main {
		padding-bottom: var(--section-y-sm);
		border-bottom:  1px solid var(--color-border-subtle);
		margin-bottom:  var(--space-xl);
	}

	.sidebar-layout__sidebar {
		width:     100%;
		max-width: 400px;
		margin:    auto;
	}

}