/* DSM Homepage Sections — explicit breakpoint columns fix the "ignores settings on mobile" issue */

.dsm-hs-section {
	--dsm-hs-accent: #aa3333;
	--dsm-hs-cols-desktop: 4;
	--dsm-hs-cols-tablet: 2;
	--dsm-hs-cols-mobile: 1;
	--dsm-hs-aspect: 16/10;
	margin: 40px 0;
}

.dsm-hs-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--dsm-hs-accent);
	padding-bottom: 8px;
}

.dsm-hs-heading { margin: 0; font-size: 1.5em; }
.dsm-hs-subheading { margin: 4px 0 0; opacity: 0.75; font-size: 0.95em; }
.dsm-hs-view-all {
	white-space: nowrap;
	font-weight: 700;
	text-decoration: none;
	color: var(--dsm-hs-accent);
}

.dsm-hs-item {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 6px;
	overflow: hidden;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.dsm-hs-item:hover { transform: translateY(-3px); border-color: var(--dsm-hs-accent); }

.dsm-hs-thumb { position: relative; aspect-ratio: var(--dsm-hs-aspect, 16/10); overflow: hidden; background: #111; }
.dsm-hs-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dsm-hs-no-image { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a1a, #2a0a0a); }

.dsm-hs-badge {
	position: absolute; top: 8px; left: 8px;
	background: var(--dsm-hs-accent); color: #fff;
	font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em;
	padding: 3px 8px; border-radius: 3px;
}

.dsm-hs-score-badge {
	position: absolute; top: 8px; right: 8px;
	background: rgba(0,0,0,0.8); color: #fff;
	font-size: 0.8em; font-weight: 800;
	padding: 3px 8px; border-radius: 3px;
	border: 1px solid var(--dsm-hs-accent);
}

.dsm-hs-body { display: block; padding: 12px; }
.dsm-hs-title { display: block; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.dsm-hs-date { display: block; font-size: 0.8em; opacity: 0.65; }
.dsm-hs-excerpt { font-size: 0.85em; opacity: 0.8; margin: 6px 0 0; }

/* ---- Grid: explicit columns per breakpoint, mobile-first ---- */
.dsm-hs-layout-grid .dsm-hs-items,
.dsm-hs-layout-featured .dsm-hs-items {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(var(--dsm-hs-cols-mobile), 1fr);
}
@media (min-width: 601px) {
	.dsm-hs-layout-grid .dsm-hs-items,
	.dsm-hs-layout-featured .dsm-hs-items {
		grid-template-columns: repeat(var(--dsm-hs-cols-tablet), 1fr);
	}
}
@media (min-width: 901px) {
	.dsm-hs-layout-grid .dsm-hs-items,
	.dsm-hs-layout-featured .dsm-hs-items {
		grid-template-columns: repeat(var(--dsm-hs-cols-desktop), 1fr);
	}
}

/* ---- Featured: first item spans full width above the grid ---- */
.dsm-hs-layout-featured .dsm-hs-item-featured {
	grid-column: 1 / -1;
}
.dsm-hs-layout-featured .dsm-hs-item-featured .dsm-hs-thumb { aspect-ratio: 21/9; }
.dsm-hs-layout-featured .dsm-hs-item-featured .dsm-hs-title { font-size: 1.3em; }

/* ---- List ---- */
.dsm-hs-layout-list .dsm-hs-items { display: flex; flex-direction: column; gap: 0; }
.dsm-hs-layout-list .dsm-hs-item {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	border: none;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	border-radius: 0;
	padding: 10px 0;
}
.dsm-hs-layout-list .dsm-hs-thumb { flex: 0 0 100px; width: 100px; height: 70px; aspect-ratio: auto; border-radius: 4px; }
.dsm-hs-layout-list .dsm-hs-body { padding: 0; }

/* ---- Carousel ---- */
.dsm-hs-carousel { position: relative; display: flex; align-items: center; gap: 8px; }
.dsm-hs-carousel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	flex: 1;
}
.dsm-hs-carousel-track::-webkit-scrollbar { display: none; }
.dsm-hs-carousel-track .dsm-hs-item {
	scroll-snap-align: start;
	flex: 0 0 calc((100% / var(--dsm-hs-cols-mobile)) - 12px);
}
@media (min-width: 601px) {
	.dsm-hs-carousel-track .dsm-hs-item { flex-basis: calc((100% / var(--dsm-hs-cols-tablet)) - 12px); }
}
@media (min-width: 901px) {
	.dsm-hs-carousel-track .dsm-hs-item { flex-basis: calc((100% / var(--dsm-hs-cols-desktop)) - 12px); }
}
.dsm-hs-carousel-nav {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.2);
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 1.1em;
}
.dsm-hs-carousel-nav:hover { border-color: var(--dsm-hs-accent); color: var(--dsm-hs-accent); }