/* Public styles for Darthost Link Panels */
.dhlp-grid{
	display:grid;
	gap: 16px;
	grid-template-columns: repeat(var(--dhlp-cols-mobile,2), 1fr);
	margin: 8px 0 24px 0;
}
@media(min-width: 768px){
	.dhlp-grid{ grid-template-columns: repeat(var(--dhlp-cols-desktop,3), 1fr); }
}
.dhlp-card{
	display:grid;
	grid-template-columns: 120px 1fr;
	align-items:center;
	background: var(--dhlp-bg, #0a3c74);
	color: var(--dhlp-fg, #fff);
	text-decoration:none;
	border-radius:12px;
	box-shadow: 0 4px 14px rgba(0,0,0,.15);
	overflow:hidden;
	min-height:110px;
	transition: transform .12s ease, box-shadow .12s ease;
	min-width:0;
}
.dhlp-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.dhlp-card__media{ background-size: cover; background-position: center; height: 100%; }
.dhlp-grid.is-panel .dhlp-card.no-media{ grid-template-columns: 1fr; }
.dhlp-grid.is-panel .dhlp-card.no-media .dhlp-card__media{ display:none; }
.dhlp-card__title{
	font-weight: 700;
	font-size: clamp(14px, 3.8vw, 20px);
	line-height: 1.25;
	padding: 0 12px;
	color: inherit;
	overflow-wrap: anywhere;
	text-shadow: 0 1px 1px rgba(0,0,0,.15);
	min-width:0;
}
/* Square tile layout */
.dhlp-grid.is-square .dhlp-card{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:stretch;
	aspect-ratio: var(--dhlp-aspect, 1 / 1);
	padding: 10px;
	grid-template-columns: unset;
	min-height: unset;
}
.dhlp-grid.is-square .dhlp-card__media{
	height: 52%;
	border-radius:10px;
	margin-bottom:10px;
}
.dhlp-grid.is-square .dhlp-card.no-media .dhlp-card__media{ display:none; }
.dhlp-grid.is-square .dhlp-card__title{
	text-align:center;
	font-size: clamp(13px, 3.6vw, 19px);
	line-height:1.25;
	padding: 6px;
}
/* If square and the ratio is wide (>= 2:1), center the title and hide media for clean look */
.dhlp-grid.is-square.is-wide .dhlp-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8px;
}
.dhlp-grid.is-square.is-wide .dhlp-card__media{ display:none !important; }
.dhlp-grid.is-square.is-wide .dhlp-card__title{
  text-align:center;
  font-size: clamp(14px, 3.4vw, 20px);
  line-height: 1.2;
  padding: 4px;
}
@media (max-width: 420px){
  .dhlp-grid.is-square .dhlp-card{ padding: 8px; }
  .dhlp-grid.is-panel .dhlp-card__title{ font-size: clamp(13px, 4.2vw, 18px); }
  .dhlp-grid.is-square .dhlp-card__title{ font-size: clamp(12px, 4vw, 17px); }
}

/* ===== Added: customizable border for the card ===== */
.dhlp-card{
  border: var(--dhlp-border-width, 0) solid var(--dhlp-border-color, transparent);
  border-radius: var(--dhlp-radius, 12px);
  box-sizing: border-box;
}