/* ================================================================
   HUB PAGE — page-hub.php
================================================================ */

/* ── Hub hero — taller than standard inner-page hero ────────────── */

.page-hero {
	height:     65vh;
	min-height: 400px;
}

/* ── Hub intro content area ─────────────────────────────────────── */

.hub-intro-pad {
	padding-block: var(--space-12);
}

/* ── Hub children grid ──────────────────────────────────────────── */

.hub-children {
	margin-top:     var(--space-12);
	padding-bottom: var(--space-24);
}

.hub-children__grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   var(--space-8);
}

@media (max-width: 768px) {
	.hub-children__grid {
		grid-template-columns: 1fr;
	}
}

.hub-card {
	display:        flex;
	flex-direction: column;
	position:       relative;
}

.hub-card__img-wrap {
	display:       block;
	overflow:      hidden;
	aspect-ratio:  21 / 9;
	margin-bottom: var(--space-4);
}

.hub-card__img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform var(--duration-slow) var(--ease-default);
}

.hub-card:hover .hub-card__img {
	transform: scale(1.03);
}

.hub-card__body {
	flex:           1;
	display:        flex;
	flex-direction: column;
}

.hub-card__title {
	font-size:   var(--text-xl);
	font-weight: 400;
	color:       var(--text-heading);
	margin:      0 0 var(--space-2);
}

.hub-card__title a {
	color:           inherit;
	text-decoration: none;
}

/* Stretched link — copre tutta la card */
.hub-card__title a::after {
	content:  '';
	position: absolute;
	inset:    0;
	z-index:  1;
}

.hub-card__title a:hover {
	color: var(--text-heading);
}

.hub-card__desc {
	font-size:   var(--text-md);
	color:       var(--text-muted);
	line-height: var(--leading-normal);
	margin:      0 0 var(--space-4);
	flex:        1;
}

.hub-card__cta {
	position: relative;
	z-index:  2;
	font-size:       var(--text-sm);
	font-weight:     500;
	color:           var(--color-gold);
	text-decoration: none;
	letter-spacing:  var(--tracking-wide);
	align-self:      flex-start;
}

.hub-card__cta:hover {
	text-decoration: underline;
}