@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

/* =========================================================
   Max Fitness — Installations listing
   Dark hero + dark glossy category cards  →  WHITE project grid
   (matches the approved reference screenshot)
========================================================= */
.mf-installs-wrap{
	--mf-base:#0c0c0e;
	--mf-gold:#f0a500;
	--mf-gold-2:#ffc845;
	--mf-text:#f4f4f5;
	--mf-muted:#a4a4ac;
	--mf-faint:#7c7c84;
	--mf-glass:rgba(255,255,255,.06);
	--mf-glass-2:rgba(255,255,255,.02);
	--mf-line:rgba(255,255,255,.12);

	/* light grid zone tokens */
	--mf-paper:#f4f4f2;
	--mf-card:#ffffff;
	--mf-ink:#1c1c1f;
	--mf-ink-soft:#6c6c72;
	--mf-paper-line:#e6e6e2;

	font-family:'Barlow',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color:var(--mf-text);
	width:100vw;
	position:relative;
	left:50%;right:50%;
	margin-left:-50vw;margin-right:-50vw;
	max-width:100vw;
	overflow-x:hidden;
	padding:0;
	background:var(--mf-base);
}
.mf-installs-wrap *{ box-sizing:border-box; }

/* ---------------- HERO (dark, compact) ---------------- */
.mf-hero{
	position:relative;
	width:100%;
	min-height:215px;
	display:flex;
	align-items:center;
	overflow:hidden;
	background:
		radial-gradient(680px 340px at 86% 45%, rgba(240,165,0,.10), transparent 70%),
		linear-gradient(90deg,#0c0c0e 0%,#101013 100%);
}
/* right-side photo — FULL image visible, blended into the black canvas with
   top/bottom/left black gradients (no mask hard-cuts). */
.mf-hero-image{
	position:absolute;top:0;right:0;bottom:0;
	width:72%;
	background-size:cover;
	background-position:center;
}
.mf-hero-image::after{
	content:"";position:absolute;inset:0;
	background:
		/* left: dissolve into the dark text zone */
		linear-gradient(90deg,#0c0c0e 0%,rgba(12,12,14,.88) 12%,rgba(12,12,14,.45) 30%,transparent 52%),
		/* top: blend under the header — kills the hard top edge */
		linear-gradient(180deg,#0c0c0e 0%,rgba(12,12,14,.65) 14%,transparent 40%),
		/* bottom: blend into the category band — kills the hard bottom edge */
		linear-gradient(0deg,#0c0c0e 0%,rgba(12,12,14,.65) 14%,transparent 40%),
		/* right: soft vignette so the frame edge never shows */
		linear-gradient(270deg,rgba(12,12,14,.5) 0%,transparent 16%);
}

.mf-hero-inner{
	position:relative;z-index:2;
	width:100%;max-width:1400px;
	margin:0 auto;
	padding:26px 40px;
}
.mf-hero-inner h1{
	color:#fff;
	font-family:'Oswald','Barlow',Arial,sans-serif;
	font-size:44px;
	font-weight:600;
	letter-spacing:1.5px;
	line-height:1.08;
	margin:0 0 12px;
	text-transform:uppercase;
	text-shadow:0 2px 22px rgba(0,0,0,.5);
}
.mf-hero-rule{
	display:block;width:58px;height:4px;border-radius:2px;
	background:linear-gradient(90deg,var(--mf-gold),var(--mf-gold-2));
	margin-bottom:14px;
}
.mf-hero-inner p{
	color:#d6d6da;font-family:'Barlow',Arial,sans-serif;font-weight:400;
	font-size:15.5px;letter-spacing:.02em;line-height:1.6;margin:0;max-width:460px;
}

/* ---------------- CATEGORY CARDS (dark glossy, on the dark band) ---------------- */
/* !important guards beat WoodMart's global button styling */
.mf-cats{ width:100%;position:relative;z-index:3;padding:14px 0 32px; }
.mf-cats-inner{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	gap:18px;
	max-width:1400px;
	margin:0 auto;
	padding:0 40px;
}
.mf-cat-card{
	position:relative;
	display:flex !important;
	align-items:center;
	gap:14px;
	text-align:left;
	cursor:pointer;
	color:var(--mf-text) !important;
	padding:18px 20px !important;
	border-radius:16px !important;
	border:1px solid var(--mf-line) !important;
	background:linear-gradient(160deg,rgba(28,28,32,.92),rgba(16,16,19,.92)) !important;
	-webkit-backdrop-filter:blur(12px) saturate(130%);
	backdrop-filter:blur(12px) saturate(130%);
	box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08) !important;
	overflow:hidden;
	transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s cubic-bezier(.22,.61,.36,1),background .4s cubic-bezier(.22,.61,.36,1);
	will-change:transform;
	width:100%;
	text-transform:none !important;
	line-height:1.3 !important;
	min-height:0 !important;
}
.mf-cat-card::after{ /* optional uploaded image, faint */
	content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;
	background-image:var(--mf-cat-img,none);
	background-size:cover;background-position:center;
	opacity:.14;
}
.mf-cat-card > *{ position:relative;z-index:1; }
.mf-cat-card:hover{
	transform:translateY(-4px);
	border-color:rgba(240,165,0,.55) !important;
	box-shadow:0 16px 36px rgba(0,0,0,.55),0 0 0 1px rgba(240,165,0,.18) !important;
}
.mf-cat-card.is-active{
	border-color:var(--mf-gold) !important;
	background:linear-gradient(160deg,rgba(240,165,0,.20),rgba(28,28,32,.92)) !important;
	box-shadow:0 16px 36px rgba(0,0,0,.5),inset 0 -3px 0 var(--mf-gold) !important;
}
.mf-cat-icon{
	flex-shrink:0;
	width:46px;height:46px;border-radius:12px;
	display:flex;align-items:center;justify-content:center;
	background:linear-gradient(150deg,rgba(240,165,0,.22),rgba(240,165,0,.06));
	border:1px solid rgba(240,165,0,.30);
}
.mf-cat-icon{ transition:background .4s cubic-bezier(.22,.61,.36,1),border-color .4s cubic-bezier(.22,.61,.36,1); }
.mf-cat-icon .mf-icon{ width:22px;height:22px;background:var(--mf-gold);transition:background .4s cubic-bezier(.22,.61,.36,1); }
.mf-cat-card.is-active .mf-cat-icon .mf-icon,
.mf-cat-card:hover .mf-cat-icon .mf-icon{ background:var(--mf-gold-2); }
.mf-cat-text{ display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0; }
.mf-cat-text strong{ font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.2;color:#fff; }
.mf-cat-text em{ font-style:normal;font-size:12px;color:var(--mf-muted);line-height:1.3; }
.mf-cat-text small{ font-size:12.5px;color:var(--mf-faint); }

/* ---- belt & braces: max-specificity guards so WoodMart's global
   button styling can NEVER repaint these cards white ---- */
.mf-installs-wrap .mf-cats .mf-cat-card,
.mf-installs-wrap button.mf-cat-card{
	background:linear-gradient(160deg,rgba(28,28,32,.94),rgba(16,16,19,.94)) !important;
	color:#fff !important;
	border:1px solid rgba(255,255,255,.12) !important;
	box-shadow:0 12px 30px rgba(0,0,0,.45) !important;
}
.mf-installs-wrap .mf-cats .mf-cat-card.is-active,
.mf-installs-wrap button.mf-cat-card.is-active{
	background:linear-gradient(160deg,rgba(240,165,0,.20),rgba(28,28,32,.94)) !important;
	border-color:#f0a500 !important;
}
.mf-installs-wrap .mf-cats .mf-cat-card:hover,
.mf-installs-wrap button.mf-cat-card:hover{
	border-color:rgba(240,165,0,.55) !important;
}
.mf-installs-wrap .mf-cat-text strong{ color:#fff !important; }

/* ================= WHITE GRID ZONE ================= */
.mf-body{
	width:100%;
	background:var(--mf-paper);
	color:var(--mf-ink);
}
.mf-body-inner{
	max-width:1400px;
	margin:0 auto;
	padding:30px 40px 84px;
}

/* toolbar (light) */
.mf-toolbar{
	display:flex;align-items:center;justify-content:space-between;
	flex-wrap:wrap;gap:14px;
	margin:0 0 26px;
}
.mf-search{
	position:relative;
	display:flex;align-items:center;
	flex:1 1 340px;max-width:430px;
	background:#fff !important;
	border:1px solid var(--mf-paper-line);
	border-radius:12px;
	padding:0 14px;
	box-shadow:0 2px 8px rgba(0,0,0,.04);
	transition:border-color .2s,box-shadow .2s;
	overflow:hidden;
}
.mf-search:focus-within{ border-color:rgba(240,165,0,.7);box-shadow:0 0 0 3px rgba(240,165,0,.14); }
.mf-search .mf-icon-search{ width:18px;height:18px;background:#9a9aa0;flex-shrink:0; }
.mf-search input{
	flex:1 1 auto;width:100%;min-width:0;
	border:0 !important;outline:0 !important;background:transparent !important;
	color:var(--mf-ink) !important;font-size:15px;font-family:inherit;
	padding:13px 10px;
	box-shadow:none !important;
	-webkit-appearance:none;appearance:none;
	border-radius:0 !important;
}
.mf-search input::placeholder{ color:#a0a0a6; }

.mf-location{ position:relative;display:flex;align-items:center; }
.mf-location select{
	appearance:none;-webkit-appearance:none;-moz-appearance:none;
	background:#fff !important;
	border:1px solid var(--mf-paper-line);
	border-radius:12px;
	color:var(--mf-ink) !important;
	font-size:14px;font-family:inherit;font-weight:600;
	padding:13px 40px 13px 16px;
	cursor:pointer;
	box-shadow:0 2px 8px rgba(0,0,0,.04);
	max-width:240px;
}
.mf-location select:focus{ outline:0;border-color:rgba(240,165,0,.7); }
.mf-location select option{ color:#161616; }
.mf-location-icon{
	position:absolute;left:14px;top:50%;transform:translateY(-50%);
	width:15px;height:15px;background:var(--mf-gold);pointer-events:none;
}
.mf-location select{ padding-left:38px; }
.mf-location-caret{
	position:absolute;right:16px;top:50%;width:9px;height:9px;pointer-events:none;
	border-right:2px solid #6c6c72;border-bottom:2px solid #6c6c72;
	transform:translateY(-65%) rotate(45deg);
}

/* grid: 4 cols × (3 rows = 12/page) */
.mf-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:22px;
}
@media(max-width:1180px){ .mf-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:820px){ .mf-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .mf-grid{ grid-template-columns:1fr; } }

/* white project card — the card itself NEVER animates on hover.
   Only the image zooms and the arrow nudges forward (see below). */
.mf-card{
	position:relative;
	display:flex;flex-direction:column;
	text-decoration:none;color:inherit;
	border-radius:14px;
	border:1px solid var(--mf-paper-line);
	background:var(--mf-card);
	box-shadow:0 6px 18px rgba(0,0,0,.06);
	overflow:hidden;
}
.mf-card-media{
	display:block;position:relative;z-index:1;
	aspect-ratio:4/3;overflow:hidden;background:#e9e9e6;
}
.mf-card-media img{
	width:100%;height:100%;object-fit:cover;object-position:center;
	display:block;transform:scale(1.001);
	transition:transform .45s cubic-bezier(.25,.8,.25,1);
	backface-visibility:hidden;
}
.mf-card:hover .mf-card-media img{ transform:scale(1.08); }
.mf-card-logo{
	position:absolute;top:10px;right:10px;z-index:2;
	width:54px;height:54px;border-radius:12px;
	background:#ffffff;
	border:1px solid rgba(0,0,0,.06);
	box-shadow:0 4px 14px rgba(0,0,0,.18);
	display:flex;align-items:center;justify-content:center;
	padding:7px;overflow:hidden;
}
.mf-card-logo img{
	width:100% !important;height:100% !important;
	object-fit:contain !important;transform:none !important;
	transition:none !important;display:block;
}
.mf-card:hover .mf-card-logo img{ transform:none !important; }
.mf-card-body{ display:block;position:relative;z-index:2;padding:16px 18px 18px; }
.mf-card-title{
	display:block;font-size:17px;font-weight:800;line-height:1.3;
	margin:0 0 18px !important;color:#1c1c1f !important;
}
.mf-card-meta{
	display:flex;align-items:center;gap:8px;
	font-size:13px;color:#6c6c72 !important;margin:0 0 9px !important;
}
.mf-card-meta:last-of-type{ margin-bottom:2px; }
.mf-card-meta .mf-icon{ width:14px;height:14px;background:var(--mf-gold);flex-shrink:0; }
.mf-view-link{
	display:flex;align-items:center;gap:7px;
	margin:16px -18px 0;
	padding:14px 18px 0;
	border-top:1px solid var(--mf-paper-line);
	font-size:13px;font-weight:700;letter-spacing:.3px;
	color:#d9920f !important;
	text-transform:uppercase;
}
.mf-arrow{ transition:transform .18s ease;display:inline-block; }
.mf-card:hover .mf-arrow{ transform:translateX(6px); }

/* ---- belt & braces: max-specificity guards so the theme's global
   link-color rules can NEVER make project card text invisible ---- */
.mf-installs-wrap .mf-grid a.mf-card,
.mf-installs-wrap .mf-grid a.mf-card:link,
.mf-installs-wrap .mf-grid a.mf-card:visited{
	color:inherit !important;
	text-decoration:none !important;
}
.mf-installs-wrap .mf-card .mf-card-title{ color:#1c1c1f !important;margin-bottom:18px !important; }
.mf-installs-wrap .mf-card .mf-card-meta{ color:#6c6c72 !important; }
.mf-installs-wrap .mf-card .mf-view-link{ color:#d9920f !important; }
/* extra guard against theme '.entry-content a', '.site-content a' etc. */
.entry-content .mf-installs-wrap .mf-card .mf-card-title,
.site-content .mf-installs-wrap .mf-card .mf-card-title,
#primary .mf-installs-wrap .mf-card .mf-card-title{ color:#1c1c1f !important;margin-bottom:18px !important; }
.entry-content .mf-installs-wrap .mf-card .mf-card-meta,
.site-content .mf-installs-wrap .mf-card .mf-card-meta,
#primary .mf-installs-wrap .mf-card .mf-card-meta{ color:#6c6c72 !important; }
.entry-content .mf-installs-wrap .mf-card .mf-view-link,
.site-content .mf-installs-wrap .mf-card .mf-view-link,
#primary .mf-installs-wrap .mf-card .mf-view-link{ color:#d9920f !important; }

.mf-no-results{ text-align:center;color:var(--mf-ink-soft);padding:60px 0;font-size:15px; }

/* ---------------- PAGINATION (on white) ---------------- */
.mf-pagination{
	display:flex;align-items:center;justify-content:center;
	gap:10px;flex-wrap:wrap;
	margin-top:46px;
}
.mf-page{
	min-width:42px;height:42px;padding:0 8px;
	display:inline-flex;align-items:center;justify-content:center;
	border-radius:50%;
	border:1px solid var(--mf-paper-line);
	background:#fff;
	color:var(--mf-ink);
	font-size:14px;font-weight:700;font-family:inherit;
	cursor:pointer;
	transition:transform .15s,border-color .15s,background .15s,color .15s;
}
.mf-page:hover{ border-color:rgba(240,165,0,.7);transform:translateY(-2px);color:#161616; }
.mf-page.is-active{
	background:#161616;
	border-color:#161616;
	color:#fff;
	box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.mf-page.is-active:hover{ color:#fff;transform:none; }
.mf-page-nav{ font-size:20px;line-height:1; }
.mf-page-dots{ color:#9a9aa0;min-width:24px;text-align:center;font-weight:700; }

/* ---------------- ICONS (mask shapes) ---------------- */
.mf-icon{
	display:inline-block;
	-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
}
.mf-icon-dumbbell{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h2v6H3V9zm3-3h2v12H6V6zm10 0h2v12h-2V6zm3 3h2v6h-2V9zM9 11h6v2H9v-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h2v6H3V9zm3-3h2v12H6V6zm10 0h2v12h-2V6zm3 3h2v6h-2V9zM9 11h6v2H9v-2z'/%3E%3C/svg%3E"); }
.mf-icon-building{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E"); }
.mf-icon-home{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }
.mf-icon-briefcase{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM10 4h4v2h-4V4zm10 15H4V8h16v11z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM10 4h4v2h-4V4zm10 15H4V8h16v11z'/%3E%3C/svg%3E"); }
.mf-icon-pin{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }
.mf-icon-search{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 1 0-.7.7l.27.28v.79l5 4.99L20.49 19zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z'/%3E%3C/svg%3E"); }
.mf-icon-grid{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z'/%3E%3C/svg%3E"); }
.mf-icon-star{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); }
.mf-icon-heart{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); }
.mf-icon-trophy{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.4 4.94A5.99 5.99 0 0 0 11 16.9V19H7v2h10v-2h-4v-2.1a5.99 5.99 0 0 0 3.6-3.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.4 4.94A5.99 5.99 0 0 0 11 16.9V19H7v2h10v-2h-4v-2.1a5.99 5.99 0 0 0 3.6-3.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E"); }
.mf-icon-users{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E"); }

/* ---- disable hover motion on touch devices (mobile: no card hover) ---- */
@media (hover:none){
	.mf-card:hover .mf-card-media img{ transform:none !important; }
	.mf-card:hover .mf-arrow{ transform:none !important; }
	.mf-cat-card:hover{ transform:none !important; }
}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1024px){
	.mf-cats-inner{ grid-template-columns:repeat(3,1fr);padding:0 28px; }
	.mf-body-inner{ padding:28px 28px 64px; }
	.mf-hero-inner{ padding:24px 28px; }
	.mf-hero-image{ width:66%; }
}
@media(max-width:768px){
	/* PREMIUM MOBILE HERO — full-bleed photo blended by black gradients (no flat overlay) */
	.mf-hero{ min-height:195px; }
	.mf-hero-image{ width:100%;opacity:1; }
	.mf-hero-image::after{
		background:
			linear-gradient(180deg,#0c0c0e 0%,rgba(12,12,14,.7) 16%,rgba(12,12,14,.45) 45%,rgba(12,12,14,.75) 78%,#0c0c0e 100%),
			linear-gradient(90deg,rgba(12,12,14,.7) 0%,rgba(12,12,14,.25) 40%,transparent 70%);
	}
	.mf-hero-inner{ padding:16px 18px; }
	.mf-hero-inner h1{ font-size:32px;letter-spacing:1px;margin-bottom:10px; }
	.mf-hero-rule{ width:48px;height:3px;margin-bottom:10px; }
	.mf-hero-inner p{ max-width:none;font-size:14px;line-height:1.55; }

	/* CATEGORY CHIPS — 3 per row, RECTANGULAR: icon left + text right, compact */
	.mf-cats{ padding:10px 0 22px; }
	.mf-cats-inner{ grid-template-columns:repeat(3,1fr);gap:9px;padding:0 14px; }
	.mf-cat-card{
		flex-direction:row !important;
		align-items:center;justify-content:flex-start;
		text-align:left;gap:8px;
		padding:10px 10px !important;border-radius:12px !important;
		min-height:52px !important;
	}
	.mf-cat-icon{ width:30px;height:30px;border-radius:8px;flex-shrink:0; }
	.mf-cat-icon .mf-icon{ width:15px;height:15px; }
	.mf-cat-text{ align-items:flex-start;justify-content:center; }
	.mf-cat-text strong{ font-size:11px;line-height:1.2;letter-spacing:0; }
	.mf-cat-text em{ display:none; }

	/* TOOLBAR — search + location in ONE row */
	.mf-toolbar{ flex-direction:row;flex-wrap:nowrap;align-items:center;gap:10px;margin-bottom:20px; }
	.mf-search{ flex:1 1 auto;max-width:none;min-width:0;height:46px !important;padding:0 12px; }
	.mf-search input{ padding:0 8px !important;height:44px !important;line-height:44px;font-size:14px; }
	.mf-location{ flex:0 0 auto; }
	.mf-location select{
		width:auto;max-width:150px;height:46px !important;
		padding:0 30px 0 32px !important;font-size:13px;
	}
	.mf-location-icon{ left:11px;width:13px;height:13px; }
	.mf-location-caret{ right:12px; }

	.mf-grid{ gap:16px; }
	.mf-card-title{ font-size:16px; }
}
@media(max-width:520px){
	.mf-body-inner{ padding:22px 16px 48px; }
	.mf-hero{ min-height:195px; }
	.mf-hero-inner{ padding:18px 16px; }
	.mf-hero-inner h1{ font-size:27px; }
	.mf-grid{ grid-template-columns:1fr;gap:14px; }
	.mf-card{ border-radius:16px; }
	.mf-card-body{ padding:15px 16px 16px; }
	.mf-card-title{ margin-bottom:14px !important; }
	.mf-card-logo{ width:46px;height:46px;border-radius:10px;padding:6px;top:8px;right:8px; }
	.mf-view-link{ margin:14px -16px 0;padding:13px 16px 0; }
	.mf-page{ min-width:38px;height:38px; }
	.mf-pagination{ margin-top:32px;gap:8px; }
}
@media (prefers-reduced-motion:reduce){
	.mf-installs-wrap *{ transition:none !important; }
}