/**
 * Mainsail Communities — card grid styling (v1.0.1 visual refinement).
 *
 * Redesigned from a generic "image-on-top, text-below" WordPress card into
 * an overlay-tile treatment — a full-bleed photo with the location name and
 * property count set over a gradient at the bottom — matching the Agent
 * Image Panorama reference design's "Featured Locations" section (portrait
 * photo tiles with bold caps name overlaid on the image, not printed below
 * it).
 *
 * Color values reference the Mainsail Child Theme's visual-skin CSS custom
 * properties (Phase 3.3), each with an inline fallback equal to the same
 * sampled reference colors, so this plugin looks correct whether or not the
 * Mainsail Child Theme is the active theme. Heading typography (the card
 * title) intentionally sets NO font-family — Kadence's own Typography
 * Customizer already applies the site's heading font (Playfair Display, per
 * the Phase 3.3 setup) to every <h3> on the site, and overriding it here
 * would fight that global setting rather than cooperate with it.
 *
 * No JavaScript accompanies this stylesheet — the grid is plain CSS Grid,
 * hover/zoom effects are pure CSS, and prefers-reduced-motion is respected.
 */

.mainsail-communities-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 2.5rem 0;
}

@media (min-width: 600px) {
	.mainsail-communities-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75rem;
	}
}

@media (min-width: 900px) {
	.mainsail-communities-grid {
		grid-template-columns: repeat(var(--mainsail-communities-columns, 3), minmax(0, 1fr));
		gap: 2rem;
	}
}

.mainsail-community-card {
	display: flex;
	flex-direction: column;
	/* min-width: 0 prevents a long, unbroken location name or description
	   word from forcing the grid track wider than its column and causing
	   horizontal overflow on narrow screens. */
	min-width: 0;
}

/* ----------------------------------------------------------------------
   The tile: a single <a> (or <div>, if no link is available) containing
   the image and the overlaid title/count. This is the card's one
   interactive element.
   ---------------------------------------------------------------------- */

.mainsail-community-card__tile {
	display: block;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.25s ease;
}

a.mainsail-community-card__tile:hover,
a.mainsail-community-card__tile:focus-within {
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

/* Visible focus outline on the tile itself (not just an inherited browser
   default), since the whole tile — not a small text link — is now the
   keyboard-focusable element for this card. */
a.mainsail-community-card__tile:focus-visible {
	outline: 3px solid var(--mainsail-color-accent, #24bef5);
	outline-offset: 2px;
}

.mainsail-community-card__media {
	position: relative;
	display: block;
	/* Portrait aspect ratio matches the reference design's tall location
	   tiles (as opposed to the previous 4:3 landscape card treatment). */
	aspect-ratio: 3 / 4;
	background-color: #eee;
	overflow: hidden;
}

.mainsail-community-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

a.mainsail-community-card__tile:hover .mainsail-community-card__media img,
a.mainsail-community-card__tile:focus-visible .mainsail-community-card__media img {
	transform: scale(1.06);
}

/* Graceful fallback when Havenlytics has no image stored for this term
   ("missing images have a graceful fallback" requirement): a brand-toned
   gradient fills the tile instead of leaving a blank/broken-looking box,
   so the overlay text still sits on an intentional-looking background. */
.mainsail-community-card__media--no-image {
	background: linear-gradient(
		160deg,
		var(--mainsail-color-dark-surface, #222222) 0%,
		var(--mainsail-color-accent-deep, #40a2d9) 150%
	);
}

/* Always-present gradient scrim behind the text, independent of whether a
   photo or the fallback background is present, so title/count stay legible
   either way. */
.mainsail-community-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.35) 42%,
		rgba(0, 0, 0, 0) 75%
	);
	pointer-events: none;
}

.mainsail-community-card__overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1.25rem 1.1rem 1.1rem;
}

.mainsail-community-card__title {
	margin: 0;
	color: #ffffff;
	font-size: clamp(1.05rem, 1.6vw, 1.35rem);
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	/* Subtle text-shadow as a second legibility safeguard on busy photos,
	   on top of the gradient scrim above. */
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.mainsail-community-card__count {
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------
   Optional description, rendered below the tile (never inside the link —
   see the PHP docblock for why).
   ---------------------------------------------------------------------- */

.mainsail-community-card__description {
	margin: 0.85rem 0 0;
	font-size: 0.92rem;
	color: #5a5a5a;
	line-height: 1.55;
}

.mainsail-community-card__description p {
	margin: 0 0 0.5em;
}

.mainsail-community-card__description p:last-child {
	margin-bottom: 0;
}

/* ----------------------------------------------------------------------
   Responsive safety net: at very narrow widths, keep the tile from
   feeling cramped by slightly reducing padding/font-size rather than
   letting content overflow.
   ---------------------------------------------------------------------- */

@media (max-width: 359px) {
	.mainsail-community-card__overlay {
		padding: 1rem 0.85rem 0.85rem;
	}

	.mainsail-community-card__title {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mainsail-community-card__tile,
	.mainsail-community-card__media img {
		transition: none;
	}

	a.mainsail-community-card__tile:hover .mainsail-community-card__media img,
	a.mainsail-community-card__tile:focus-visible .mainsail-community-card__media img {
		transform: none;
	}
}