/* ==========================================================================
   HOMEPAGE ARTICLE (.hp-*)
   Every class in this file - and only these classes - is used by the site's
   About/home article (see #__content id 7/8): hero, bio, services and CTA
   bands. Not tied to any specific view, so this loads sitewide rather than
   only on the homepage, in case that article is ever reached through a
   different menu item.
   ========================================================================== */

.hp-artist-intro {
	/* Opt out of the sitewide `body { text-align: justify; }` - it stretches
	   short lines (leads, taglines, quotes) into ugly gaps, same issue fixed
	   on the homepage hero tagline. */
	text-align: left;
}

/* Bands stack full-bleed, colour differentiates one from the next; the
   actual content is capped and centred by .hp-band-inner. */
.hp-band {
	padding-block: var(--pi-space-8);
}

.hp-band-inner {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: var(--pi-space-5);
}

@media (min-width: 992px) {
	.hp-band-inner {
		padding-inline: var(--pi-space-6);
	}
}

/* Small uppercase label used above a heading in every band. */
.hp-eyebrow {
	margin: 0 0 var(--pi-space-2);
	color: var(--pi-color-highlight);
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
}

/* Sitewide h1-h3 are boxed/bordered brand-colour treatments (see
   components.css) - wrong for a text-led editorial layout like this one, so
   every heading in here is reset to plain text and restyled per band. */
.hp-band h1,
.hp-band h2,
.hp-band h3 {
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	text-align: inherit;
	text-shadow: none;
	padding: 0;
	line-height: 1.15;
}

/* ==========================================================================
   Hero band - name/tagline/lead copy beside a portrait photo
   ========================================================================== */

.hp-hero-inner {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: var(--pi-space-7);
}

.hp-hero-copy {
	max-width: 60ch;
	text-align: center;
}

.hp-hero-copy h1 {
	margin: 0 0 var(--pi-space-3);
	font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
	font-weight: 700;
	color: var(--pi-color-text);
}

.hp-hero-tagline {
	margin: 0 0 var(--pi-space-4);
	color: var(--pi-color-secondary);
	font-size: 1.25rem;
	font-weight: 600;
}

.hp-hero-lead {
	margin: 0;
	color: var(--pi-color-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Same border/shadow as .pi-hero__portrait on the homepage hero. */
.hp-photo-frame {
	flex: 0 0 auto;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, .85);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.hp-photo-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: var(--pi-space-4);
	background: #f5f5f5;
	border: 2px dashed var(--pi-color-border);
	color: var(--pi-color-muted);
	font-size: .875rem;
	text-align: center;
}

@media (min-width: 768px) {
	.hp-hero-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.hp-hero-copy {
		text-align: left;
	}
}

@media (min-width: 992px) {
	.hp-photo-frame {
		width: 320px;
		height: 320px;
		border-width: 4px;
	}
}

/* ==========================================================================
   Bio band
   ========================================================================== */

.hp-bio-inner {
	max-width: 760px;
	text-align: center;
}

.hp-bio-statement {
	margin: 0 0 var(--pi-space-5);
	color: var(--pi-color-text);
	font-size: 1.375rem;
	font-weight: 600;
	font-style: italic;
	line-height: 1.4;
}

.hp-bio-body {
	text-align: left;
	color: var(--pi-color-text);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.hp-bio-body p {
	margin: 0 0 var(--pi-space-4);
}

.hp-bio-body p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Services band
   ========================================================================== */

.hp-services-head {
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--pi-space-7);
	text-align: center;
}

.hp-services-head h2 {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 700;
	color: var(--pi-color-text);
}

/* Flex-wrap instead of a fixed-column grid - with a grid, a row that
   isn't completely full (e.g. 2 services when there's room for 3) stays
   left-aligned with an empty trailing column instead of centring the
   items that are actually there. Flex-wrap centres each row on its own,
   regardless of how many services end up in it or in the last row. */
.hp-services-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pi-space-5);
}

/* Perfect circle instead of the previous wavy-blob shape. A fixed
   width/aspect-ratio keeps it a true circle (not an ellipse) no matter how
   wide its grid column is; content is centred both ways with generous
   padding so it sits comfortably inside the curve. Colour, border and
   shadow are unchanged from the previous card design. */
.hp-service {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Fixed 300px on anything wide enough - shrinks (keeping its circle
	   shape via aspect-ratio) rather than growing past that on a narrow
	   viewport, the same responsiveness the old width:100%/max-width:300px
	   pairing gave it under CSS grid. */
	flex: 0 1 300px;
	max-width: 300px;
	aspect-ratio: 1 / 1;
	padding: var(--pi-space-6);
	text-align: center;
	background: var(--pi-color-background);
	border: 1px solid var(--pi-color-border);
	border-radius: 50%;
	box-shadow: var(--pi-shadow-card);
	transition: box-shadow var(--pi-transition-base), transform var(--pi-transition-base);
}

.hp-service:hover,
.hp-service:focus-within {
	box-shadow: var(--pi-shadow-card-hover);
	transform: translateY(-2px);
}

.hp-service h3 {
	margin: 0 0 var(--pi-space-2);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--pi-color-text);
}

.hp-service p {
	margin: 0 0 var(--pi-space-3);
	color: var(--pi-color-muted);
	font-size: .9375rem;
	line-height: 1.6;
}

.hp-service a {
	font-weight: 600;
	text-decoration: none;
}

.hp-service a:hover,
.hp-service a:focus {
	text-decoration: underline;
}

/* ==========================================================================
   Call-to-action band
   ========================================================================== */

.hp-cta .hp-band-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pi-space-5);
	text-align: center;
}

.hp-cta h2 {
	margin: 0 0 var(--pi-space-2);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-weight: 700;
	color: var(--pi-color-text);
}

.hp-cta p {
	margin: 0;
	color: var(--pi-color-muted);
	font-size: 1.0625rem;
}

/* Same colours as the top menu's own resting/hover states (see
   .pi-nav__menu in components.css) - primary by default, secondary on
   hover/focus - matching every other button in the template. */
.hp-cta-btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: var(--pi-space-3) var(--pi-space-6);
	border-radius: var(--pi-radius-sm);
	background: var(--pi-color-primary);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--pi-transition-fast);
}

.hp-cta-btn:hover,
.hp-cta-btn:focus {
	background: var(--pi-color-secondary);
	color: #ffffff;
}

@media (min-width: 768px) {
	.hp-cta .hp-band-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

/* ==========================================================================
   End of homepage article (.hp-*) section
   ========================================================================== */