/* DH Preferred Content — front end.
   Colours and type deliberately inherit from the theme; only structure and the
   accent are set here, so the block matches the site without duplicating it. */

.dh-preferred{
	--dh-accent:#c98f69;
	--dh-ink:#111111;
	margin:2.5em 0;
}

.dh-preferred__title{
	font-size:14px;
	font-weight:600;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--dh-ink);
	margin:0 0 1.1em;
	padding-bottom:.6em;
	border-bottom:1px solid #ececec;
}

.dh-preferred__items{
	list-style:none;
	margin:0 !important;
	padding:0 !important;
	display:grid;
	gap:26px;
}

.dh-preferred__items li{margin:0;padding:0 !important;}

.dh-preferred--grid .dh-preferred__items{grid-template-columns:repeat(3,1fr);}
.dh-preferred--list .dh-preferred__items{grid-template-columns:1fr;gap:22px;}

.dh-preferred__item{position:relative;}

.dh-preferred__media{
	display:block;
	position:relative;
	overflow:hidden;
	margin-bottom:.75em;
}
.dh-preferred__media img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:74/49;
	object-fit:cover;
	object-position:center;
	transition:transform .5s ease;
}
.dh-preferred__item:hover .dh-preferred__media img{transform:scale(1.03);}

.dh-preferred__heading{
	font-size:17px;
	line-height:1.4;
	font-weight:600;
	margin:0 0 .4em;
}
.dh-preferred__heading a{
	color:var(--dh-ink);
	text-decoration:none;
	box-shadow:0 -2px 0 0 rgba(201,143,105,0) inset;
	transition:box-shadow .3s ease;
	border-bottom:0 !important;
}
.dh-preferred__heading a:hover{box-shadow:0 -2px 0 0 var(--dh-accent) inset;}

.dh-preferred__excerpt{
	font-size:14px !important;
	line-height:22px !important;
	color:#505050 !important;
	margin:0 !important;
}

@media (max-width:900px){
	.dh-preferred--grid .dh-preferred__items{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:600px){
	.dh-preferred--grid .dh-preferred__items{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
	.dh-preferred__media img{transition:none;}
}

/* --- Mobile: swipeable, next card peeking -----------------------------
   CSS scroll-snap only. No JS, no library, no layout shift on load. The
   0.68 basis leaves roughly half of the next card visible, which is what
   signals "swipe me" without a scrollbar or arrows. */

@media (max-width:600px){
	.dh-preferred--mobile-slider .dh-preferred__items{
		display:flex;
		grid-template-columns:none;
		gap:14px;
		overflow-x:auto;
		overflow-y:hidden;
		scroll-snap-type:x mandatory;
		scroll-padding-left:0;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		padding-bottom:4px;
	}

	.dh-preferred--mobile-slider .dh-preferred__items::-webkit-scrollbar{
		display:none;
	}

	.dh-preferred--mobile-slider .dh-preferred__item{
		flex:0 0 68%;
		scroll-snap-align:start;
	}

	.dh-preferred--mobile-slider .dh-preferred__excerpt{
		display:-webkit-box;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
		overflow:hidden;
	}
}