.puffCol4 { min-height: 340px; /* desktop */ }
.puffCol12 { min-height: 460px; /* desktop */ }
.puffColPh { min-height: 50vh; /* desktop */ }

@media (max-width: 1280px) { /* desktop */
	.puffCol4 { min-height: 300px; }
	.puffCol12 { min-height: 390px; }
}

@media (max-width: 1024px) { /* padda liggande */
	.puffCol4 { min-height: 240px; }
	.puffCol12 { min-height: 310px; }
}

@media (max-width: 768px) { /* padda stående */
	.puffCol4 { min-height: 175px; }
	.puffCol12 { min-height: 235px; }
}


.hp4-card-link { display:block; text-decoration:none; }
.hp4-img { display:block; width:100%; height:auto; object-fit:cover; }

/* TYPE 1 */
.hp4-static-wrap {
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:10px;
}
.hp4-static-item { min-width:0; }

@media (max-width: 1199.98px){
	.hp4-static-wrap { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767.98px){
	.hp4-static-wrap { grid-template-columns:1fr; }
}

/* TYPE 2/3 scroll */
.hp4-scroll-shell { overflow:hidden; }
.hp4-scroll-track{
	display:flex;
	gap:10px;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	padding-bottom:4px;
}
.hp4-scroll-track::-webkit-scrollbar{ display:none; }

.hp4-scroll-card{
	flex:0 0 82%;
	scroll-snap-align:start;
	min-width:0;
	display:flex;
	flex-direction:column;
}

/* tablet */
@media (min-width: 768px){
	.hp4-scroll-card{ flex:0 0 calc((100% - 10px)/2); }
}
/* desktop: 4 i rad */
@media (min-width: 1200px){
	.hp4-scroll-card{ flex:0 0 calc((100% - 30px)/4); }
}

/* Pil */
.hp4-prev-btn,
.hp4-next-btn{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:40px;
	height:40px;
	border:none;
	border-radius:50%;
	background:#000;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:.6;
	z-index:3;
}
.hp4-prev-btn{ left:10px; }
.hp4-next-btn{ right:10px; }

.hp4-prev-btn:hover,
.hp4-next-btn:hover{ opacity:1; }

.hp4-prev-btn.is-hidden,
.hp4-next-btn.is-hidden{ display:none !important; }

/* TYPE 3 textplate: no gap against image + equal height */
.hp4-textbox{
	margin-top:0;              /* viktig: ingen luft ovanför */
	padding:12px 12px 8px;
	text-align:center;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	height: auto;         /* viktigt: inte 100% */
	min-height: 96px;     /* jämn grundhöjd */
}
.hp4-textbox p:last-of-type{ margin-bottom:0.5rem; }

.hp4-bg-gray {
  background-color: #DCDCDC !important;
  color: #666 !important; /* mörk text */
}