/**
 * Agents archive (/agents/) redesign — only enqueued on the Havenlytics
 * `hvnly_agent` CPT archive (mainsail_agents_archive_enqueue_assets() in
 * functions.php). Restyles Havenlytics' own archive markup and this
 * theme's two template overrides (havenlytics/content-archive-agent.php,
 * havenlytics/partials/cards/agent-card.php) — Havenlytics' CSS is not
 * modified, this file only adds rules scoped under .hvnly-agent-archive.
 */

/* ----------------------------------------------------------------------
   In-content heading + paragraph (editable at wp-admin -> Agents ->
   Archive Page Content) — reuses Havenlytics' own .hvnly-property--
   archive__title/__subtitle elements, just restyled.
   ---------------------------------------------------------------------- */

/* Kadence's own Archive Title/banner area (Customizer -> Agents
   Archive) now renders above this (see mainsail_agents_archive_hero_
   header() in functions.php) and occupies real document flow height,
   so it's what clears this site's sitewide transparent-header mode. */
.hvnly-agent-archive {
	padding-top: 0;
	padding-bottom: clamp(48px, 6vw, 80px);
}

/* Banner not full-width: NOT a Kadence Customizer setting — Havenlytics'
   own .hvnly-container (a single shared wrapper around this whole page,
   hero included, not something scoped to it) is capped to a max-width
   per breakpoint by Havenlytics' own DynamicStyleGenerator, driven by
   Settings -> Properties -> "Container Width" (hvnly_container_width_*
   options). That setting is sitewide — it also sizes the single-
   property and property-archive pages, which are explicitly locked/
   stable elsewhere in this project — so rather than changing it
   globally, this un-boxes .hvnly-container only when this specific
   page's body class is present. The cards grid below keeps its own
   independent width/centering regardless of how wide this outer
   wrapper is, so nothing here affects that. */
body.hvnly-agent-archive .hvnly-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Havenlytics' own .hvnly-property--archive ALSO caps itself
   (max-width:1220px + 16px side padding, independent of .hvnly-
   container above) — without neutralizing this too, the grid's 60%
   width below would compute against that already-narrowed 1220px
   instead of the true full page width. */
body.hvnly-agent-archive .hvnly-property--archive {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.hvnly-agent-archive .hvnly-property--archive__header {
	max-width: 720px;
	margin: 0 auto clamp(40px, 5vw, 64px);
	padding: 50px 20px 30px;
	text-align: center;
}

.hvnly-agent-archive .hvnly-property--archive__title {
	margin: 0;
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 400;
	line-height: 1.25;
	/* Capitalizes each word's first letter (was uppercase — every
	   letter). */
	text-transform: capitalize;
	letter-spacing: 0.02em;
	color: var(--mainsail-color-ink, #000000);
}

.hvnly-agent-archive .hvnly-property--archive__subtitle {
	margin: 20px 0 0;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 16px;
	line-height: 1.8;
	color: var(--mainsail-color-ink-muted, rgba(0, 0, 0, 0.65));
}

/* ----------------------------------------------------------------------
   Grid — 2 per row, a lone odd-one-out centers itself. Flexbox (not CSS
   grid) specifically because justify-content:center on a wrapping flex
   row centers a leftover last item automatically; a grid's fixed
   column tracks would leave it stuck in the first column instead.
   ---------------------------------------------------------------------- */

/* 60% width / 20% margin each side, per direct request — but only
   above tablet width. At 60% a typical phone viewport would leave each
   2-up card under 200px wide (worse once you subtract the card's own
   gap), so this only kicks in at 900px+ where 60% still leaves enough
   room for two ~360px cards side by side; narrower screens use the
   existing max-width/gap-based sizing instead. */
.hvnly-agent-archive .hvnly-property--archive__cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(24px, 3vw, 40px);
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

@media (min-width: 900px) {
	.hvnly-agent-archive .hvnly-property--archive__cards {
		width: 60%;
		max-width: none;
		padding: 0;
	}
}

/* ----------------------------------------------------------------------
   Card — normal state: just the square photo, no info panel. Hover:
   card lifts + rounds (shadow), and the name/position panel slides up
   from the bottom edge over the photo (position:absolute, clipped by
   the link's own overflow:hidden until it's supposed to show).
   ---------------------------------------------------------------------- */

.hvnly-agent-archive .mainsail-agent-card {
	flex: 1 1 360px;
	max-width: 480px;
	list-style: none;
}

.hvnly-agent-archive .mainsail-agent-card__link {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
	background: #ffffff;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	transition: box-shadow 0.25s ease, border-radius 0.25s ease, transform 0.25s ease;
}

.hvnly-agent-archive .mainsail-agent-card__link:hover,
.hvnly-agent-archive .mainsail-agent-card__link:focus-visible {
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
	transform: translateY(-4px);
}

/* LOCKED at 1:1 — 3:2 (landscape) and 2:3 (portrait) were both
   previewed live and rejected; square is final. Don't change this
   without a direct request. */
.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__photo,
.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__photo--placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__photo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mainsail-color-dark-surface, #222222);
	color: var(--mainsail-color-dark-surface-text, #f2f2f2);
	font-size: 48px;
}

/* The two overlay badges kept on the photo, per direct request — same
   role Havenlytics' own CSS gives them, restyled to this design's
   black/white pill treatment instead of the plugin's default colors.
   Each badge needs its OWN explicit left/right (not just top/bottom) —
   Havenlytics' own hvnly-frontend-cards.css already sets `right` on
   --listings and `left` on --status; a shared base rule that only set
   `left` left Havenlytics' own `right` also in effect on --listings,
   stretching it edge-to-edge instead of sizing to its own content
   (confirmed live: computed left:16px AND right:12px on the same
   badge). Explicit left:auto/right:auto on the two variants is what
   actually fixes that, not just adding position values on top. */
.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__overlay-badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__overlay-badge--listings {
	top: 16px;
	right: 16px;
	left: auto;
}

.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__overlay-badge--status {
	bottom: 16px;
	left: 16px;
	right: auto;
}

.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #3ddc84;
}

/* Havenlytics' 4 availability statuses (available/busy/away/offline) —
   green for available, amber/red for the rest. */
.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__overlay-badge--busy .hvnly-agent-card__status-dot,
.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__overlay-badge--away .hvnly-agent-card__status-dot {
	background: #f0b429;
}

.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__overlay-badge--offline .hvnly-agent-card__status-dot {
	background: #ff6b6b;
}

/* Hidden in the normal state, slides up over the bottom of the photo
   on hover — the link's own overflow:hidden clips it out of view until
   then. */
.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 8px 26px;
	text-align: center;
	background: #f2f2f2;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.hvnly-agent-archive .mainsail-agent-card__link:hover .hvnly-agent-card__body,
.hvnly-agent-archive .mainsail-agent-card__link:focus-visible .hvnly-agent-card__body {
	transform: translateY(0);
}

.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__name {
	margin: 0;
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--mainsail-color-ink, #000000);
}

.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__position {
	margin: 6px 0 0;
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mainsail-color-ink-muted, rgba(0, 0, 0, 0.65));
}

@media (prefers-reduced-motion: reduce) {
	.hvnly-agent-archive .mainsail-agent-card__link,
	.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__body {
		transition: none;
	}
}

@media (max-width: 640px) {
	.hvnly-agent-archive .mainsail-agent-card {
		flex: 1 1 100%;
		max-width: 420px;
	}
}

/* Touch devices have no reliable :hover — the reveal-on-hover panel
   above would otherwise leave the agent's name permanently invisible
   there. Shown as a normal static panel below the photo instead,
   matching how it always worked before the hover-reveal change. */
@media (hover: none) {
	.hvnly-agent-archive .mainsail-agent-card .hvnly-agent-card__body {
		position: static;
		transform: none;
	}
}