/**
 * Archihub – Freelancers Grid Style 4: Image Overlay
 *
 * Scoped to .ah4-grid so nothing bleeds into Styles 1–3.
 *
 * Card anatomy (.ah4- prefix = fully owned by this stylesheet, zero conflicts):
 *
 *   .wr-freelancers-grid-item.ah4-card   ← Elementor item controls target this
 *     ├── a.ah4-image                     ← full-bleed profile photo link
 *     │     └── figure > img
 *     └── .ah4-overlay                   ← info panel, hidden until hover/focus
 *           ├── .ah4-name > a + [badge]
 *           ├── p.ah4-tagline > a
 *           └── .ah4-btn > a
 */

/* ─── Card shell ─────────────────────────────────────────────────────────── */

/*
 * .wr-freelancers-grid-item base: display:flex; flex-direction:column; padding:4px;
 * height:100%; border-radius:20px. We override only what we must.
 */
.ah4-grid .wr-freelancers-grid-item.ah4-card {
	position: relative;
	overflow: hidden;
	padding: 0;
	border-radius: 12px;
	min-height: 340px;
	cursor: pointer;
	/* Workreap's base sets height:100% which collapses without a definite parent
	   height. display:grid on .wr-freelancers-grid-items gives each cell a
	   definite height via align-items:stretch, so height:100% works correctly. */
}

/* ─── Grid container: ensure cells stretch to fill row height ────────────── */

.ah4-grid .wr-freelancers-grid-items {
	align-items: stretch;
}

/* ─── Profile image ──────────────────────────────────────────────────────── */

.ah4-grid .ah4-card .ah4-image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.ah4-grid .ah4-card .ah4-image figure {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.ah4-grid .ah4-card .ah4-image figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.45s ease;
}

.ah4-grid .ah4-card:hover .ah4-image figure img,
.ah4-grid .ah4-card:focus-within .ah4-image figure img {
	transform: scale(1.04);
}

/* ─── Overlay panel ──────────────────────────────────────────────────────── */

.ah4-grid .ah4-card .ah4-overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	padding: 20px 18px 18px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	/* Hidden by default, slides up on hover / focus */
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.35s ease, opacity 0.28s ease;
}

.ah4-grid .ah4-card:hover .ah4-overlay,
.ah4-grid .ah4-card:focus-within .ah4-overlay,
.ah4-grid .ah4-card .ah4-overlay:focus {
	transform: translateY(0);
	opacity: 1;
}

/* ─── Name ───────────────────────────────────────────────────────────────── */

.ah4-grid .ah4-card .ah4-name {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
}

.ah4-grid .ah4-card .ah4-name a {
	font-size: 1rem;
	font-weight: 700;
	color: #111;
	text-decoration: none;
	line-height: 1.25;
}

.ah4-grid .ah4-card .ah4-name a:hover,
.ah4-grid .ah4-card .ah4-name a:focus {
	color: #000;
	text-decoration: underline;
}

/* ─── Tagline ────────────────────────────────────────────────────────────── */

.ah4-grid .ah4-card .ah4-tagline {
	margin: 0 0 14px;
	font-size: 0.82rem;
	font-weight: 400;
	color: #555;
	line-height: 1.45;

	/* Single-line truncation */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ah4-grid .ah4-card .ah4-tagline a {
	color: inherit;
	text-decoration: none;
}

/* ─── View Profile button ────────────────────────────────────────────────── */

.ah4-grid .ah4-card .ah4-btn a {
	display: inline-block;
	padding: 8px 20px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	border-radius: 6px;
	border: 1px solid #ddd;
	background: #f0f0f0;
	color: #222;
	text-decoration: none;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.ah4-grid .ah4-card .ah4-btn a:hover,
.ah4-grid .ah4-card .ah4-btn a:focus {
	background: #111;
	color: #fff;
	border-color: #111;
	outline: none;
}

/* ─── Touch devices: overlay always visible ──────────────────────────────── */

@media (hover: none) {
	.ah4-grid .ah4-card .ah4-overlay {
		transform: translateY(0);
		opacity: 1;
	}
}