/* Master Empfehlungen – Frontend */

/* ========== Layout Breite (wide / full / max) ========== */
.me-wrap{ box-sizing:border-box; }
.me-wrap .me-inner{ box-sizing:border-box; }

.me-width-wide{ padding: 0 16px; }
.me-width-wide .me-inner{ max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; }

.me-width-max{ width: 100vw; margin-left: calc(50% - 50vw); padding: 0 16px; }
.me-width-max .me-inner{ max-width: 1600px; margin: 0 auto; }

.me-width-full{ width: 100vw; margin-left: calc(50% - 50vw); padding: 0; }
.me-width-full .me-inner{ max-width: none; padding: 0 16px; }

/* avoid accidental horizontal scrollbars */
.me-width-max, .me-width-full{ max-width: 100vw; overflow-x: clip; }


/* ========== Bild-Anpassung (cover | contain) ========== */
.me-fit-cover .me-card__img,
.me-fit-cover .me-cat-card__img{
	width:100%;
	height:100%;
	display:block;
	object-fit: cover;
	object-position:center;
	transition: transform .24s ease;
}

.me-fit-contain .me-card__img,
.me-fit-contain .me-cat-card__img{
	width:100%;
	height:100%;
	display:block;
	object-fit: cover;
	object-position:center;
	transition: transform .24s ease;
}
/* ========== Kategorien (Kachel-Übersicht) ========== */
.me-cat-grid{
	display:grid;
	gap:18px;
	grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
	align-items:stretch;
}

@media (max-width: 768px){
	.me-cat-grid{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
}

.me-cat-card{
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	border:1px solid rgba(0,0,0,.08);
	border-radius:18px;
	overflow:hidden;
	background:#fff;
	box-shadow: 0 10px 34px rgba(0,0,0,.06);
	min-height: 320px;
}

.me-cat-card__link{
	display:flex;
	flex-direction:column;
	height:100%;
	text-decoration:none;
	color:inherit;
}

.me-cat-card__media{
	position:relative;
	aspect-ratio: 16 / 10;
	background: rgba(0,0,0,.02);
	overflow:hidden;
}

.me-cat-card__img{
	width:100%;
	height:100%;
	display:block;
	object-fit: cover;
	object-position:center;
	transition: transform .24s ease;
}

.me-cat-card__placeholder{
	width:100%;
	height:100%;
	background: linear-gradient(135deg, rgba(0,0,0,.05), rgba(0,0,0,.02));
}

.me-cat-card__body{
	padding:18px 18px 20px;
	display:flex;
	flex-direction:column;
	gap:8px;
	flex:1;
}

.me-cat-card__title{
	margin:0;
	font-size:1.25rem;
	line-height:1.2;
}

.me-cat-card__meta{
	opacity:.85;
	font-size: .95rem;
}

.me-cat-card:hover{
	transform: translateY(-6px);
	box-shadow: 0 18px 46px rgba(0,0,0,.10);
	border-color: rgba(0,0,0,.14);
}

/* ========== Kategorie-Ansicht (Back + Titel) ========== */
.me-category-bar{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:10px;
	margin: 0 0 16px;
	flex-wrap:wrap;
}

.me-back-btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 12px;
	border-radius:999px;
	text-decoration:none;
	font-weight:600;
	font-size:14px;
	line-height:1;
	color: var(--wp--preset--color--primary, #1e5aa8);
	border:1px solid rgba(30,90,168,.28);
	background: rgba(30,90,168,.02);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #1e5aa8) 4%, transparent);
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}


.me-cat-btn,
.me-cat-pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 12px;
	border-radius:999px;
	text-decoration:none;
	font-weight:700;
	font-size:14px;
	line-height:1;
	color: var(--wp--preset--color--primary, #1e5aa8);
	border:1px solid rgba(30,90,168,.30);
	background: rgba(30,90,168,.08);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #1e5aa8) 10%, transparent);
}

.me-back-btn:hover{
	transform: translateY(-1px);
	border-color: rgba(30,90,168,.40);
	background: rgba(30,90,168,.06);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #1e5aa8) 8%, transparent);
	box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.me-cat-btn:hover{
	transform: translateY(-1px);
	border-color: rgba(30,90,168,.42);
	background: rgba(30,90,168,.12);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #1e5aa8) 14%, transparent);
	box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.me-cat-btn[aria-current="page"]{
	box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.me-sr-only{
	position:absolute !important;
	width:1px !important;
	height:1px !important;
	padding:0 !important;
	margin:-1px !important;
	overflow:hidden !important;
	clip:rect(0,0,0,0) !important;
	white-space:nowrap !important;
	border:0 !important;
}
.me-category-title{
	margin:0;
	font-size:1.35rem;
	line-height:1.2;
}

.me-recs{
	display:grid;
	gap:16px;
	/*
	 * Important (mobile Safari/Chrome):
	 * Some themes/blocks use viewport based min-heights.
	 * If grid items are stretched, a single card can inherit that changing
	 * height while scrolling (address bar collapse/expand) and appears to
	 * "grow" downward. We keep cards content-sized.
	 */
	align-items:start;
}

.me-recs.me-cols-1{ grid-template-columns:1fr; }
.me-recs.me-cols-2{ grid-template-columns:repeat(2,1fr); }
.me-recs.me-cols-3{ grid-template-columns:repeat(3,1fr); }
.me-recs.me-cols-4{ grid-template-columns:repeat(4,1fr); }
.me-recs.me-cols-5{ grid-template-columns:repeat(5,1fr); }
.me-recs.me-cols-6{ grid-template-columns:repeat(6,1fr); }

@media (max-width: 1024px){
	.me-recs.me-cols-4,
	.me-recs.me-cols-5,
	.me-recs.me-cols-6{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 768px){
	.me-recs.me-cols-3,
	.me-recs.me-cols-4,
	.me-recs.me-cols-5,
	.me-recs.me-cols-6{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 520px){
	.me-recs{ grid-template-columns:1fr !important; }
}

.me-card{
	border:1px solid rgba(0,0,0,.08);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	border-radius:14px;
	overflow:hidden;
	background:#fff;
	box-shadow: 0 8px 30px rgba(0,0,0,.05);
	display:flex;
	flex-direction:column;
	/* prevent unintended stretching inside grid / viewport-sized parents */
	min-height:0;
	height:auto;
	align-self:start;
}

.me-card__media{
	position:relative;
	overflow:hidden;
	background: rgba(0,0,0,.02);
	aspect-ratio: 4 / 3;
}

.me-card__img{
	width:100%;
	height:100%;
	display:block;
	object-fit: cover;
	object-position:center;
}

.me-card__body{
	padding:14px 14px 16px;
	display:flex;
	flex-direction:column;
	gap:10px;
	flex:1;
}

.me-card__title{
	margin:0;
	font-size: 1.05rem;
	line-height:1.25;
}

.me-card__title a{
	text-decoration:none;
}

.me-card__excerpt{
	opacity:.9;
	font-size: .95rem;
	line-height:1.45;
}

.me-card__actions{
	margin-top:auto;
	padding-top:6px;
}

.me-card__btn{
	display:inline-block;
	padding:10px 12px;
	border-radius:12px;
	border:1px solid rgba(0,0,0,.10);
	text-decoration:none;
	font-weight:600;
}

.me-card__btn:hover{
	transform: translateY(-1px);
}


/* ========== Kachelgröße ========== */
.me-cat-grid.me-tile-size-l{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.me-cat-grid.me-tile-size-xl{ grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); }
.me-cat-grid.me-tile-size-xxl{ grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); }

.me-cat-grid.me-tile-size-l .me-cat-card{ min-height: 320px; }
.me-cat-grid.me-tile-size-xl .me-cat-card{ min-height: 380px; }
.me-cat-grid.me-tile-size-xxl .me-cat-card{ min-height: 460px; }

.me-cat-grid.me-tile-size-xxl .me-cat-card__media{ aspect-ratio: 16 / 9; }


.me-cat-card__badge{
	position:absolute;
	top:14px;
	left:14px;
	padding:8px 10px;
	border-radius: 999px;
	background: rgba(0,0,0,.70);
	color: #fff;
	font-weight: 800;
	font-size: .85rem;
	letter-spacing: .2px;
	backdrop-filter: blur(6px);
}

.me-cat-card__icon{
	margin-right: 8px;
	font-size: 20px;
	line-height: 1;
	opacity: .9;
}

.me-cat-card__subtitle{
	opacity: .85;
	font-size: .98rem;
	line-height: 1.35;
}

.me-cat-card:hover .me-cat-card__img{
	width:100%;
	height:100%;
	display:block;
	object-fit: cover;
	object-position:center;
	transition: transform .24s ease;
}

.me-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,.08); border-color: rgba(0,0,0,.14); }

.me-cat-pill{ cursor: default; user-select:none; }