/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
 /* container */
/* GRID */
.shof-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
	gap: 30px;
	margin: 40px 0;
}

/* CARD */
.shof-card {
	display: flex;
	background: #000;
	color: #fff;
	max-height: 300px;
	overflow: hidden;
	align-items: stretch;
}

.shof-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(0,0,0,.12);
}

/* FOTO */
.shof-photo {
	width: 33%;
	height: 300px;
	//background: #111;
	//flex-shrink: 0;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-color: #fff;
}

.shof-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* INFO */
.shof-info {
	width: 55%;
	padding: 28px 32px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* NAAM */
.shof-name {
	color: #e30613; /* Sparta rood */
	font-size: 2.5rem;
	margin: 0 0 16px;
	font-weight: 700;
}

/* TEKST */
.shof-info p {
	margin: 0 0 14px;
	line-height: 1.4;
	font-size: 1.8rem;
    font-family: 'FontinSans-Regular' !important;
}

.shof-info strong {
	color: #fff;
}

/* ================================
   HALL OF FAME – STABLE LAYOUT
   ================================ */

/* kaart */
.shof-card {
	display: flex;
	background: #000;
	color: #fff;
}

/* foto links (desktop) 
.shof-photo {
	width: 40%;
}
*/

.shof-photo img {

	width: 100%;
	height: auto;
	display: block;
}

/* tekst rechts */
.shof-info {
	width: 60%;
	padding: 24px;
	box-sizing: border-box;
}

/* =========================
   HALL OF FAME – FILTER
   ========================= */

.shof-filter {
	margin: 0 0 30px 0;
	width: 90%;
}

.shof-search {
	width: 90%;
	max-width: 420px;
	padding: 12px 14px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-sizing: border-box;
}

input.shof-search {
    width: 90%;
}

/* =================================================
   HALL OF FAME – BE THEME OVERRIDE (FINAL)
   ================================================= */

@media (max-width: 768px) {

	/* BeTheme context kill */
	.section .shof-grid .shof-card,
	.wrap .shof-grid .shof-card,
	.column .shof-grid .shof-card,
	.column_attr .shof-grid .shof-card {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* FOTO BOVEN */
	.section .shof-photo,
	.column .shof-photo {
		width: 100% !important;
		height: 60vw !important;
		max-height: 70vh;
		position: relative;
		overflow: hidden;
		background: #111;
	}

	.section .shof-photo img,
	.column .shof-photo img {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
		display: block;
	}

	/* TEKST ERONDER */
	.section .shof-info,
	.column .shof-info {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		padding: 20px !important;
		background: #000;
		color: #fff;
	}

	/* absolute overflow kill */
	.section .shof-info *,
	.column .shof-info * {
		max-width: 100% !important;
		word-break: break-word;
	}
}
  ================================ */

@media (max-width: 768px) {

	/* wrapper breekt BeTheme-flex */
	.shof-card-wrapper {
		display: block !important;
		width: 100%;
	}

	/* GEEN flex meer op mobiel */
	.shof-card {
		display: block !important;
	}

	.shof-photo,
	.shof-info {
		width: 100% !important;
	}

	.shof-photo img {
		width: 100%;
		height: auto;
	}
}