/* ============================================================================
   Mow Notice Gallery — public display (bottom of /open-client-requests/)
   Reuses the .vp / .ocr-card system; this file adds ONLY the few things that
   system doesn't already provide: a fixed-aspect yard-photo frame, a 2-up
   tablet grid step, the "Community Noticed" badge, and section spacing.
   Loaded after vp-system.css + open-client-requests.css.
   ========================================================================== */

/* Section scaffolding */
.vp .mn-gallery-section { scroll-margin-top: 80px; }
.vp .mn-gallery-intro { max-width: 780px; }
.vp .mn-gallery-note { margin: 16px 0 22px; }

/* Card is a flex column so the footer pins to the bottom regardless of summary
   length (matches .ocr-card behaviour). */
.vp .mn-gallery-card { display: flex !important; flex-direction: column !important; }

/* Fixed-aspect (3:2) yard-photo frame — prevents layout shift, crops to fill.
   Cloned from the about/hiw video-embed padding-bottom technique, swapped to
   object-fit:cover. */
.vp .mn-gallery-photo {
	position: relative !important;
	width: 100% !important;
	padding-bottom: 66.66% !important;
	overflow: hidden !important;
	border-radius: 10px !important;
	border: 1px solid #dce9df !important;
	background: #eef6f0 !important;
	margin: 0 0 14px 0 !important;
}
.vp .mn-gallery-photo img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	display: block !important;
}

/* "Community Noticed" badge — small green pill (mirrors .ocr-service-tag). */
.vp .mn-gallery-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 999px;
	color: #3b7f59;
	background: #f0f7f2;
	border: 1px solid #d8e7dc;
	white-space: nowrap;
}

/* Footer: location/date left, attribution right (already flex via .ocr-card-footer). */
.vp .mn-gallery-attr { text-align: right; }

/* Empty + CTA */
.vp .mn-gallery-empty { text-align: center; color: #5f6b63; }
.vp .mn-gallery-empty p { margin: 0; color: #5f6b63; }
.vp .mn-gallery-cta { text-align: center; margin-top: 26px; }
.vp .mn-gallery-cta-lead { margin-bottom: 10px; }
.vp .mn-gallery-more-wrap { text-align: center; margin-top: 22px; }

/* Card appended via Show-More fades in. */
.vp .mn-gallery-card.is-new { animation: mnGalleryFade .35s ease both; }
@keyframes mnGalleryFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Responsive grid steps ----
   vp-system collapses every vp-grid-3 to 1 column at <=900px. For the gallery we
   want 2-up on tablet, 1-up on phones. */
@media (max-width: 900px) {
	.vp .mn-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
	.vp .mn-gallery-grid { grid-template-columns: 1fr !important; }
}