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

/* =====================================================================
   Max Fitness Installations — SINGLE project page (LIGHT theme)
   Logo + title + brief → description → gallery → "More Installations".
   Matches the listing's white card style. Gold accents.
   ===================================================================== */

.mf-single-wrap{
	--mf-gold:#f0a500;
	--mf-gold-2:#ffc845;
	--mf-paper:#f4f4f2;
	--mf-card:#ffffff;
	--mf-ink:#1c1c1f;
	--mf-ink-soft:#6c6c72;
	--mf-line:#e6e6e2;

	font-family:'Barlow',Arial,sans-serif;
	color:var(--mf-ink);
	background:var(--mf-paper);
	position:relative;
	left:50%;right:50%;
	margin-left:-50vw;margin-right:-50vw;
	width:100vw;max-width:100vw;
	overflow-x:hidden;
	padding:0 0 28px;
}
.mf-single-wrap *{ box-sizing:border-box; }
.mf-single-inner{
	position:relative;z-index:1;
	max-width:1400px;margin:0 auto;
	padding:12px 40px 0;
}

/* ---------- back link ---------- */
.mf-single-back{
	display:inline-flex;align-items:center;gap:8px;
	color:var(--mf-ink-soft);text-decoration:none;
	font-size:13.5px;font-weight:600;letter-spacing:.02em;
	transition:color .2s ease;
}
.mf-single-back:hover{ color:#d9920f; }
.mf-single-back-arrow{ font-size:16px;line-height:1; }

/* ---------- HEADER : logo + title in one line + brief ---------- */
.mf-single-top{
	display:flex;align-items:center;gap:22px;
	margin:16px 0 0;padding-bottom:22px;
	border-bottom:1px solid var(--mf-line);
	position:relative;
}
.mf-single-top::after{
	content:"";position:absolute;left:0;bottom:-1px;width:84px;height:2px;
	background:linear-gradient(90deg,var(--mf-gold),var(--mf-gold-2));
}
.mf-single-logo{
	flex-shrink:0;
	width:88px;height:88px;border-radius:16px;
	background:#fff;border:1px solid var(--mf-line);
	display:flex;align-items:center;justify-content:center;padding:12px;
	box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.mf-single-logo img{ max-width:100%;max-height:100%;object-fit:contain;display:block; }
.mf-single-headtext{ flex:1;min-width:0; }
.mf-single-headtext h1{
	margin:0;
	font-family:'Oswald','Barlow',Arial,sans-serif;
	font-size:clamp(26px,3.4vw,40px);
	font-weight:600;line-height:1.1;letter-spacing:1px;
	text-transform:uppercase;color:var(--mf-ink);
}
.mf-single-brief{ display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:12px; }
.mf-single-badge{
	display:inline-flex;align-items:center;gap:7px;
	background:rgba(240,165,0,.14);border:1px solid rgba(240,165,0,.45);
	color:#a9760a;
	font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
	padding:6px 13px;border-radius:999px;
}
.mf-single-badge .mf-icon{ width:14px;height:14px;background:#c8941c; }
.mf-single-loc{ display:inline-flex;align-items:center;gap:7px;color:var(--mf-ink-soft);font-size:14.5px;font-weight:500; }
.mf-single-loc .mf-icon{ width:15px;height:15px;background:var(--mf-gold); }

/* ---------- shared section ---------- */
.mf-single-section{ margin:40px 0 0; }
.mf-single-h2{
	margin:0 0 20px;
	font-family:'Oswald','Barlow',Arial,sans-serif;
	font-size:22px;font-weight:600;letter-spacing:1px;
	text-transform:uppercase;color:var(--mf-ink);
	position:relative;padding-bottom:12px;
}
.mf-single-h2::after{
	content:"";position:absolute;left:0;bottom:0;width:50px;height:3px;border-radius:3px;
	background:linear-gradient(90deg,var(--mf-gold),var(--mf-gold-2));
}

/* ---------- DESCRIPTION ---------- */
.mf-single-description{
	background:var(--mf-card);border:1px solid var(--mf-line);border-radius:16px;
	padding:26px 30px;box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.mf-single-description p{ margin:0 0 14px;color:#444;font-size:16px;line-height:1.7; }
.mf-single-description p:last-child{ margin-bottom:0; }
.mf-single-description a{ color:#d9920f;text-decoration:none; }
.mf-single-description a:hover{ text-decoration:underline; }
.mf-single-description ul,.mf-single-description ol{ color:#444;padding-left:20px;line-height:1.7; }

/* ---------- GALLERY ---------- */
.mf-gallery-grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.mf-gallery-link{
	display:block;position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
	border:1px solid var(--mf-line);background:#fff;aspect-ratio:4/3;
	box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.mf-gallery-link img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.mf-gallery-link::after{ content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(240,165,0,.20));opacity:0;transition:opacity .3s ease; }
.mf-gallery-link:hover img{ transform:scale(1.07); }
.mf-gallery-link:hover{ border-color:rgba(240,165,0,.55); }
.mf-gallery-link:hover::after{ opacity:1; }

/* ---------- ADDITIONAL INFO ---------- */
.mf-single-additional-body{
	background:var(--mf-card);border:1px solid var(--mf-line);border-left:3px solid var(--mf-gold);
	border-radius:16px;padding:26px 30px;box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.mf-single-additional-body p{ margin:0 0 14px;color:#444;font-size:16px;line-height:1.7; }
.mf-single-additional-body p:last-child{ margin-bottom:0; }
.mf-single-additional-body a{ color:#d9920f; }
.mf-single-additional-body ul,.mf-single-additional-body ol{ color:#444;padding-left:20px;line-height:1.7; }
.mf-single-additional-body img{ max-width:100%;height:auto;border-radius:10px; }

/* ---------- MORE INSTALLATIONS (carousel) ---------- */
.mf-more-head{ display:flex;align-items:center;justify-content:space-between;gap:14px; }
.mf-more-head .mf-single-h2{ margin-bottom:0; }
.mf-more-nav{ display:flex;gap:10px;flex-shrink:0; }
/* !important guards: WoodMart's global button styling was repainting these
   into grey boxes with invisible glyphs */
.mf-more-btn,
.mf-single-wrap button.mf-more-btn{
	width:52px !important;height:52px !important;min-height:0 !important;
	padding:0 !important;border-radius:50% !important;
	border:1px solid #dcdcd6 !important;
	background:#ffffff !important;color:#1c1c1f !important;
	font-size:28px !important;font-weight:400 !important;line-height:1 !important;
	cursor:pointer;
	display:flex !important;align-items:center;justify-content:center;
	box-shadow:0 6px 16px rgba(0,0,0,.10) !important;
	text-transform:none !important;letter-spacing:0 !important;
	transition:border-color .2s,color .2s,transform .2s,box-shadow .2s;
}
.mf-more-btn:hover,
.mf-single-wrap button.mf-more-btn:hover{
	border-color:rgba(240,165,0,.8) !important;color:#d9920f !important;
	transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.14) !important;
}
.mf-more-btn:disabled,
.mf-single-wrap button.mf-more-btn:disabled{
	opacity:.35 !important;cursor:default;transform:none;
	border-color:#dcdcd6 !important;color:#1c1c1f !important;
}
.mf-more-track{
	display:flex;align-items:stretch;gap:18px;margin-top:22px;
	overflow-x:auto;scroll-behavior:smooth;
	scroll-snap-type:x mandatory;
	padding-bottom:6px;
	background:transparent !important;
	scrollbar-width:none;-ms-overflow-style:none;
}
.mf-more-item{ background:transparent !important; }
.mf-more-track::-webkit-scrollbar{ display:none; }
.mf-more-item{ flex:0 0 calc((100% - 81px)/4.5);scroll-snap-align:start;min-width:0; } /* 4 full + half peek */
@media (max-width:1200px){ .mf-more-item{ flex-basis:calc((100% - 63px)/3.5); } }
@media (max-width:980px){ .mf-more-item{ flex-basis:calc((100% - 45px)/2.5); } }

/* ---- belt & braces: force EVERY carousel card identical & complete.
   WoodMart's global styles were hiding titles / breaking image ratios. ---- */
.mf-single-wrap .mf-more-item .mf-card,
.mf-single-wrap .mf-more-item a.mf-card,
.mf-single-wrap .mf-more-item a.mf-card:link,
.mf-single-wrap .mf-more-item a.mf-card:visited{
	display:flex !important;flex-direction:column !important;height:100% !important;
	color:inherit !important;text-decoration:none !important;
	background:#fff !important;border:1px solid var(--mf-line) !important;
	box-shadow:0 2px 8px rgba(0,0,0,.05) !important; /* no heavy grey halo */
	filter:none !important;
}
.mf-single-wrap .mf-more-track,
.mf-single-wrap .mf-more-item{
	background:transparent !important;box-shadow:none !important;
	filter:none !important;-webkit-mask-image:none !important;mask-image:none !important;
}
.mf-single-wrap .mf-more-item::before,
.mf-single-wrap .mf-more-item::after,
.mf-single-wrap .mf-more-track::before,
.mf-single-wrap .mf-more-track::after{ display:none !important;content:none !important; }
.mf-single-wrap .mf-more-item .mf-card-media{
	display:block !important;width:100% !important;
	aspect-ratio:4/3 !important;height:auto !important;overflow:hidden !important;
}
@supports not (aspect-ratio:4/3){
	.mf-single-wrap .mf-more-item .mf-card-media{ height:190px !important; }
}
.mf-single-wrap .mf-more-item .mf-card-media img{
	width:100% !important;height:100% !important;object-fit:cover !important;display:block !important;
}
.mf-single-wrap .mf-more-item .mf-card-body{
	display:flex !important;flex-direction:column !important;flex:1 1 auto !important;
	padding:16px 18px 18px !important;
}
.mf-single-wrap .mf-more-item .mf-card-title{
	display:block !important;visibility:visible !important;opacity:1 !important;
	font-size:15.5px !important;font-weight:800 !important;line-height:1.3 !important;
	margin:0 0 10px !important;color:#1c1c1f !important;
	overflow:hidden;text-overflow:ellipsis;display:-webkit-box !important;
	-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.mf-single-wrap .mf-more-item .mf-card-meta{ color:#6c6c72 !important;margin:0 0 7px !important; }
.mf-single-wrap .mf-more-item .mf-view-link{ margin-top:auto !important;color:#d9920f !important; }

/* ---------- white project card (shared style with the listing) ---------- */
.mf-card{
	position:relative;display:flex;flex-direction:column;
	text-decoration:none;color:inherit;
	border-radius:14px;border:1px solid var(--mf-line);background:var(--mf-card);
	box-shadow:0 6px 18px rgba(0,0,0,.06);overflow:hidden;height:100%;
	transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.mf-card:hover{ transform:translateY(-5px);border-color:rgba(240,165,0,.55);box-shadow:0 18px 38px rgba(0,0,0,.13); }
.mf-card-media{ display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:#e9e9e6; }
.mf-card-media img{ width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease; }
.mf-card:hover .mf-card-media img{ transform:scale(1.06); }
.mf-card-body{ display:block;padding:16px 18px 18px; }
.mf-card-title{ display:block;font-size:16.5px;font-weight:800;line-height:1.25;margin:0 0 16px !important;color:var(--mf-ink); }
.mf-card-meta{ display:flex;align-items:center;gap:8px;font-size:13px;color:var(--mf-ink-soft);margin:0 0 10px; }
.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-line);
	font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--mf-gold);text-transform:uppercase;
}
.mf-card:hover .mf-view-link{ color:#d9920f; }
.mf-arrow{ transition:transform .18s ease; }
.mf-card:hover .mf-arrow{ transform:translateX(6px); }

/* ---------- LIGHTBOX (dark overlay) ---------- */
.mf-lightbox{
	position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
	background:rgba(6,6,8,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.mf-lightbox.is-open{ display:flex; }
.mf-lightbox-img{ max-width:88vw;max-height:84vh;border-radius:12px;box-shadow:0 40px 120px -30px rgba(0,0,0,.9);border:1px solid rgba(240,165,0,.45); }
.mf-lightbox button{
	position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;
	border-radius:50%;display:flex;align-items:center;justify-content:center;
	transition:background .2s ease,border-color .2s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.mf-lightbox button:hover{ background:rgba(240,165,0,.30); }
.mf-lightbox-close{ top:24px;right:24px;width:48px;height:48px;font-size:28px;line-height:1; }
.mf-lightbox-prev,.mf-lightbox-next{ top:50%;transform:translateY(-50%);width:54px;height:54px;font-size:30px;line-height:1; }
.mf-lightbox-prev{ left:24px; }
.mf-lightbox-next{ right:24px; }

/* ---------- mask icons ---------- */
.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"); }

/* ---------- responsive ---------- */
@media (max-width:1100px){ .mf-gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .mf-gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){
	.mf-single-top{ flex-direction:column;align-items:flex-start;gap:16px; }
	.mf-single-logo{ width:72px;height:72px; }
	.mf-single-inner{ padding:18px 18px 0; }
	.mf-single-description,.mf-single-additional-body{ padding:22px 20px; }
	.mf-more-item{ flex-basis:calc((100% - 18px)/2); }
}
@media (max-width:480px){
	.mf-gallery-grid{ grid-template-columns:1fr;gap:12px; }
	.mf-single-h2{ font-size:19px; }
	.mf-single-inner{ padding:4px 14px 0; }
	.mf-single-back{ font-size:12.5px; }
	.mf-single-top{ margin-top:10px;padding-bottom:16px;gap:12px; }
	.mf-single-logo{ width:60px;height:60px;border-radius:12px;padding:8px; }
	.mf-single-headtext h1{ font-size:22px; }
	.mf-single-badge{ font-size:10.5px;padding:5px 10px; }
	.mf-single-loc{ font-size:13px; }
	.mf-single-section{ margin:26px 0 0; }
	.mf-single-description,.mf-single-additional-body{ padding:18px 16px;border-radius:14px; }
	.mf-more-btn,.mf-single-wrap button.mf-more-btn{ width:42px !important;height:42px !important;font-size:22px !important; }
	/* carousel: 2 full cards + 20% of the 3rd */
	.mf-more-track{ gap:12px; }
	.mf-more-item{ flex-basis:calc((100% - 26.4px)/2.2); }
	.mf-single-wrap .mf-more-item .mf-card-body{ padding:11px 12px 12px !important; }
	.mf-single-wrap .mf-more-item .mf-card-title{ font-size:12.5px !important;margin:0 0 10px !important; }
	.mf-single-wrap .mf-more-item .mf-card-meta{ font-size:11px;gap:6px;margin:0 0 7px !important; }
	.mf-single-wrap .mf-more-item .mf-card-meta .mf-icon{ width:12px;height:12px; }
	.mf-single-wrap .mf-more-item .mf-view-link{ font-size:11px;margin:10px -12px 0;padding:10px 12px 0; }
	.mf-lightbox-prev,.mf-lightbox-next{ width:46px;height:46px;font-size:26px;left:12px; }
	.mf-lightbox-next{ right:12px;left:auto; }
}
@media (hover:none){
	.mf-card:hover{ transform:none !important;box-shadow:0 6px 18px rgba(0,0,0,.06) !important; }
	.mf-card:hover .mf-card-media img{ transform:none !important; }
	.mf-card:hover .mf-arrow{ transform:none !important; }
	.mf-gallery-link:hover img{ transform:none !important; }
}
@media (prefers-reduced-motion:reduce){ .mf-single-wrap *{ transition:none !important; } }