/**
 * Homepage blueprint sections — responsive rules for the section kinds
 * rendered natively (no Elementor required) by inc/homepage-section-renderer.php.
 * Also carries the "Advanced" options tab's design tokens (container width via
 * --cst-container, section spacing, card style) so they apply theme-wide.
 *
 * @package New_Bloggers_Theme
 */

:root {
	--nbt-section-gap: 2.5rem;
}

.nbt-crypto-section {
	margin-block: var(--nbt-section-gap);
}

/* Card style variants — set as a body class from the "card_style" option */
body.nbt-card-style--flat .nbt-crypto-card,
body.nbt-card-style--flat .cst-card {
	box-shadow: none;
	border-width: 1px;
}

body.nbt-card-style--shadow .nbt-crypto-card,
body.nbt-card-style--shadow .cst-card {
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

body.nbt-card-style--bordered .nbt-crypto-card,
body.nbt-card-style--bordered .cst-card {
	box-shadow: none;
	border-width: 2px;
	border-color: var(--nbt-crypto-neon);
}

body.nbt-card-style--minimal .nbt-crypto-card,
body.nbt-card-style--minimal .cst-card {
	box-shadow: none;
	border: 0;
	background: transparent;
}

/* Missing crypto-posts layout variant used by nbt_map_category_widget_layout() */
.nbt-crypto-posts--horizontal-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.nbt-crypto-posts--horizontal-list .nbt-crypto-card__link {
	display: grid;
	grid-template-columns: 140px 1fr;
	align-items: stretch;
}

.nbt-crypto-posts--horizontal-list .nbt-crypto-card__image,
.nbt-crypto-posts--horizontal-list .nbt-crypto-card__image--placeholder {
	height: 100%;
	min-height: 96px;
	aspect-ratio: auto;
}

/* Popular tags module */
.nbt-portal-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.nbt-portal-tag {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: var(--nbt-crypto-surface-2);
	border: 1px solid var(--nbt-crypto-border);
	color: var(--nbt-crypto-text);
	font-size: 0.85rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nbt-portal-tag:hover,
.nbt-portal-tag:focus-visible {
	background: var(--nbt-crypto-neon);
	border-color: var(--nbt-crypto-neon);
	color: #fff;
}

/* Author spotlight module */
.nbt-portal-authors {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.nbt-portal-author {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem;
	border-radius: 10px;
	background: var(--nbt-crypto-surface-2);
	border: 1px solid var(--nbt-crypto-border);
	color: var(--nbt-crypto-text);
	text-align: center;
	text-decoration: none;
}

.nbt-portal-author img {
	border-radius: 50%;
	width: 64px;
	height: 64px;
}

.nbt-portal-author__name {
	font-size: 0.85rem;
	font-weight: 600;
}

/* Timeline module */
.nbt-portal-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.25rem;
	border-left: 2px solid var(--nbt-crypto-border);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.nbt-portal-timeline__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem;
}

.nbt-portal-timeline__item::before {
	content: "";
	position: absolute;
	left: -1.56rem;
	top: 0.35rem;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--nbt-crypto-neon);
}

.nbt-portal-timeline__date {
	flex: 0 0 auto;
	font-size: 0.8rem;
	color: var(--nbt-crypto-muted);
	white-space: nowrap;
}

.nbt-portal-timeline__title {
	color: var(--nbt-crypto-text);
	text-decoration: none;
	font-weight: 600;
}

.nbt-portal-timeline__title:hover {
	color: var(--nbt-crypto-neon);
}

@media (max-width: 960px) {
	.nbt-portal-authors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.nbt-crypto-posts--horizontal-list .nbt-crypto-card__link {
		grid-template-columns: 1fr;
	}
	.nbt-portal-authors {
		grid-template-columns: 1fr;
	}
	.nbt-portal-timeline__item {
		flex-direction: column;
		gap: 0.25rem;
	}
}