/*
Theme Name:   Astra Child — MySoloPage
Theme URI:    https://mysolopage.com
Description:  Child theme for mysolopage.com. ALL custom CSS belongs here, never in the Astra parent theme — Astra auto-updates and would erase parent-theme edits.
Author:       Shobhit Jain
Author URI:   https://mysolopage.com
Template:     astra
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  astra-child
Tags:         astra, child-theme
*/

/* ═══════════════════════════════════════════════════════════════════
   MySoloPage custom styles
   ───────────────────────────────────────────────────────────────────
   The parent Astra stylesheet loads first; everything here overrides
   it. Keep this file organised by section so it stays readable as it
   grows.

   Production site uses Spectra (UAGB) blocks. Spectra emits its own
   per-block scoped classes like .uagb-block-vcjsepjk — do NOT target
   those, they are regenerated when a block is edited. Target semantic
   classes or add your own via the block's "Additional CSS class(es)"
   field in the editor.
   ═══════════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────────
   1. Custom properties
   ─────────────────────────────────────────────────────────────────── */

:root {
	/* Populated from the live site's Astra Global Colors during the
	   first production pull, so local visually matches production. */
}


/* ───────────────────────────────────────────────────────────────────
   2. Global / typography
   ─────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────
   3. Header & navigation
   ─────────────────────────────────────────────────────────────────── */


/* ───────────────────────────────────────────────────────────────────
   4. Page sections
   ─────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   About page (v2)
   ───────────────────────────────────────────────────────────────────
   Every rule is scoped under .msp-about, so nothing here can affect
   another page. Astra's GLOBAL heading sizes are enormous — h1 76px,
   h2 90px on desktop — which is the main reason the old page felt
   shouty. Rather than change the global setting (which would restyle
   the entire site), the scale is overridden only inside this wrapper.
   ═══════════════════════════════════════════════════════════════════ */

.msp-about {
	--msp-ink:      var(--ast-global-color-2, #16202a);
	--msp-muted:    var(--ast-global-color-3, #55606b);
	--msp-accent:   var(--ast-global-color-0, #0f6fff);
	--msp-surface:  var(--ast-global-color-5, #f6f8fa);
	--msp-line:     rgba(0, 0, 0, 0.09);
	--msp-radius:   14px;

	color: var(--msp-ink);
}

/* ── Type scale ──────────────────────────────────────────────────
   clamp() gives a fluid ramp instead of three hard breakpoints, so
   headings never jump awkwardly between tablet and desktop.
   Astra's selectors are specific, hence the explicit override. */

.msp-about .msp-h1,
.msp-about h1.msp-h1 {
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 0.85rem;
	max-width: 20ch;
}

.msp-about .msp-h2,
.msp-about h2.msp-h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	font-weight: 700;
	margin: 0 0 0.7rem;
	max-width: 24ch;
}

.msp-about .msp-h3,
.msp-about h3.msp-h3 {
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.3;
	font-weight: 650;
	margin: 0 0 0.5rem;
}

.msp-about p {
	line-height: 1.65;
	color: var(--msp-muted);
}

.msp-about .msp-lead {
	font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
	line-height: 1.6;
	max-width: 58ch;
}

/* Small uppercase label above a heading — cheap way to add hierarchy
   without another large type size. */
.msp-about .msp-eyebrow,
.msp-about .msp-kicker {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--msp-accent);
	margin: 0 0 0.65rem;
}

.msp-about .msp-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* The 24ch measure suits the narrow 40%% split columns, but on a
   full-width centred heading it orphaned the last word onto its own
   line ("...and fully / managed"). Give centred headings room. */
.msp-about h2.msp-h2.msp-center {
	max-width: 40ch;
}

.msp-about .msp-final .msp-h2 {
	max-width: 30ch;
}

/* ── Rhythm ──────────────────────────────────────────────────────── */

.msp-about .msp-hero {
	/* Astra's container already provides generous top padding —
	   adding our own stacked into a ~130px void above the eyebrow. */
	padding: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
}

.msp-about .msp-section {
	padding-block: clamp(1.1rem, 1.9vw, 1.65rem);
	border-top: 1px solid var(--msp-line);
	/* WordPress adds a block gap between sibling groups which stacked
	   on top of this padding, producing ~120px voids between sections. */
	margin-block: 0;
}

/* Trailing margins on the last child of a section compounded the same
   problem — the gap you see is padding + block gap + orphan margin. */
.msp-about .wp-block-columns {
	margin-bottom: 0;
}

.msp-about .msp-split p:last-child,
.msp-about .msp-list li:last-child,
.msp-about .msp-card p:last-child,
.msp-about .msp-step p:last-child {
	margin-bottom: 0;
}

.msp-about .msp-split {
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.msp-about .msp-cta-row {
	gap: 0.75rem;
	margin-top: 1.35rem;
}

.msp-about .msp-center-buttons {
	justify-content: center;
}

.msp-about .wp-block-button__link {
	border-radius: 999px;
	padding: 0.8em 1.9em;
	font-weight: 600;
	font-size: 0.98rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.msp-about .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.13);
}

/* ── Cards ───────────────────────────────────────────────────────── */

.msp-about .msp-cards {
	gap: clamp(0.85rem, 1.5vw, 1.25rem);
	margin-top: 1.35rem;
}

.msp-about .msp-card,
.msp-about .msp-step {
	height: 100%;
	padding: clamp(1.35rem, 2.5vw, 1.9rem);
	background: var(--msp-surface);
	border: 1px solid var(--msp-line);
	border-radius: var(--msp-radius);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.msp-about .msp-card:hover,
.msp-about .msp-step:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.msp-about .msp-card p,
.msp-about .msp-step p {
	margin-bottom: 0;
	font-size: 0.97rem;
}

/* Big ghosted step number — visual interest without another heading. */
.msp-about .msp-step-num {
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	margin: 0 0 0.5rem;
	color: var(--msp-accent);
	opacity: 0.22;
}

/* ── List ────────────────────────────────────────────────────────── */

.msp-about .msp-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.msp-about .msp-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.85rem;
	line-height: 1.6;
	color: var(--msp-muted);
}

.msp-about .msp-list li strong {
	color: var(--msp-ink);
}

/* Check mark drawn in CSS — no image request, scales with the text. */
.msp-about .msp-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.68rem;
	height: 0.38rem;
	border-left: 2.5px solid var(--msp-accent);
	border-bottom: 2.5px solid var(--msp-accent);
	transform: rotate(-45deg);
}

/* ── Closing band ────────────────────────────────────────────────── */

.msp-about .msp-final {
	background: var(--msp-surface);
	border-radius: var(--msp-radius);
	padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem);
	margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
	border-top: 0;
}

.msp-about .msp-final .msp-lead {
	margin-inline: auto;
}

/* ── Responsive ──────────────────────────────────────────────────── */

/* Tablet and below — Astra stacks columns at 921px. */
@media (max-width: 921px) {
	.msp-about .msp-h1,
	.msp-about .msp-h2 {
		max-width: 100%;
	}

	.msp-about .msp-cards {
		gap: 1rem;
	}
}

/* Mobile */
@media (max-width: 543px) {
	.msp-about .msp-hero {
		padding-top: 2.25rem;
	}

	.msp-about .msp-cta-row {
		width: 100%;
	}

	/* Full-width tap targets rather than two cramped pills. */
	.msp-about .msp-cta-row .wp-block-button {
		width: 100%;
	}

	.msp-about .msp-cta-row .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}

	.msp-about .msp-step-num {
		font-size: 2rem;
	}
}

/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.msp-about .msp-card,
	.msp-about .msp-step,
	.msp-about .wp-block-button__link {
		transition: none;
	}

	.msp-about .msp-card:hover,
	.msp-about .msp-step:hover,
	.msp-about .wp-block-button__link:hover {
		transform: none;
	}
}


/* ───────────────────────────────────────────────────────────────────
   5. Footer
   ─────────────────────────────────────────────────────────────────── */

/* ── Site-wide mobile overflow fix ────────────────────────────────
   On a 390px phone the whole site scrolls sideways: document
   scrollWidth measures 505px against a 390px viewport, on EVERY page
   — this is pre-existing, not introduced by any page redesign.

   Isolated by selective hiding under device emulation:
       baseline                505
       hiding the footer       390   ← source
       hiding [data-aos]       390   ← specifically the scroll animations
       clearing AOS transforms 390

   Cause: Spectra's AOS entrance animations put the footer headings at
   scale(1.2) translateX(±100px) before they animate in. A transform is
   applied AFTER layout, so max-width cannot restrain it — the element
   is 350px wide but paints 420px wide, 100px off-centre.

   Fix by clipping at the footer instead. `clip` is preferred over
   `hidden` because it does not create a scroll container (which would
   break position:sticky inside).

   Originally this was scoped to <=921px on the assumption that desktop
   was unaffected. It is not: at 1440px the document still measures
   1504px on every page, because `zoom-out-left` translates the footer
   heading past the right edge regardless of viewport width. The clip
   therefore applies at ALL widths. */

.site-footer {
	overflow-x: hidden;  /* fallback for older browsers */
	overflow-x: clip;
}


/* ───────────────────────────────────────────────────────────────────
   6. Responsive
   ───────────────────────────────────────────────────────────────────
   Astra's own breakpoints, matched here so behaviour stays consistent:
     Mobile   ≤ 543px
     Tablet   544px – 921px
     Desktop  ≥ 922px
   Every change must be checked at all three widths before deploying.
   ─────────────────────────────────────────────────────────────────── */

/* Tablet and below */
@media (max-width: 921px) {

}

/* Mobile only */
@media (max-width: 543px) {

}


/* ═══════════════════════════════════════════════════════════════════
   Photographer page — Satish Jain "Akela"  (.msp-photo)
   ───────────────────────────────────────────────────────────────────
   Scoped entirely under .msp-photo so no other page is affected.

   The previous version of this page was built from Spectra containers
   whose padding was set per-block in the editor. That is what produced
   the large empty bands between sections: each container carried its
   own top AND bottom padding, which then stacked. Here spacing comes
   from ONE rhythm variable, so sections cannot drift apart.

   Astra's global headings are enormous (h1 76px / h2 90px on desktop).
   Overriding them globally would restyle the whole site, so the scale
   is re-declared only inside this wrapper.
   ═══════════════════════════════════════════════════════════════════ */

.msp-photo {
	--ph-ink:       #ffffff;
	--ph-muted:     rgba(255, 255, 255, 0.68);
	--ph-faint:     rgba(255, 255, 255, 0.52);
	--ph-accent:    var(--ast-global-color-0, #c3317d);
	--ph-bg:        var(--ast-global-color-4, #18202c);
	--ph-surface:   var(--ast-global-color-5, #1c2735);
	--ph-surface-2: #212e3e;
	--ph-line:      rgba(255, 255, 255, 0.10);
	--ph-line-2:    rgba(255, 255, 255, 0.16);
	--ph-radius:    16px;

	/* One rhythm for every section — the fix for the stacked gaps. */
	--ph-gap:       clamp(2.25rem, 3.6vw, 3.25rem);

	color: var(--ph-ink);
}

/* Astra/Gutenberg put a 24px block gap between every top-level child,
   which showed as a stripe of page background between two tinted bands
   and added to the padding on both sides of the seam. Measured at
   1440px the total was 82.5 + 24 + 82.5 = 189px between sections.
   Bands must meet flush; the padding alone provides the rhythm. */
.msp-photo > * {
	margin-block: 0;
}

/* The wrapper's own 45px top/bottom padding stacks on top of the hero's
   and the last section's, adding dead space at both ends of the page. */
.msp-photo {
	padding-block: 0;
}

/* ── Type scale ──────────────────────────────────────────────────── */

.msp-photo .ph-h1,
.msp-photo h1.ph-h1 {
	font-size: clamp(2.1rem, 5.2vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 700;
	margin: 0 0 0.6rem;
	color: var(--ph-ink);
}

.msp-photo .ph-h2,
.msp-photo h2.ph-h2 {
	font-size: clamp(1.6rem, 3.4vw, 2.35rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--ph-ink);
}

.msp-photo .ph-h3,
.msp-photo h3.ph-h3 {
	font-size: clamp(1.12rem, 1.9vw, 1.3rem);
	line-height: 1.25;
	font-weight: 650;
	margin: 0 0 0.45rem;
	color: var(--ph-ink);
}

.msp-photo p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ph-muted);
	margin: 0 0 0.9rem;
}

.msp-photo p:last-child { margin-bottom: 0; }

.msp-photo .ph-lead {
	font-size: clamp(1.02rem, 1.5vw, 1.14rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.msp-photo strong { color: var(--ph-ink); font-weight: 650; }

.msp-photo .ph-eyebrow,
.msp-photo .ph-kicker {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ph-accent);
	margin: 0 0 0.7rem;
}

/* ── Section rhythm ──────────────────────────────────────────────── */

.msp-photo .ph-section {
	padding-block: var(--ph-gap);
	border-top: 1px solid var(--ph-line);
}

.msp-photo .ph-section--flush { border-top: 0; }

.msp-photo .ph-section--alt {
	background: var(--ph-surface);
	border-top: 0;
}

/* Section heading block — capped so a centred intro never runs the
   full width and leaves a ragged last line. */
.msp-photo .ph-head {
	max-width: 46rem;
	margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
}

.msp-photo .ph-head--center {
	margin-inline: auto;
	text-align: center;
}

.msp-photo .ph-sub {
	font-size: 1.02rem;
	color: var(--ph-faint);
	margin: 0;
}

/* ── Hero ────────────────────────────────────────────────────────── */

.msp-photo .ph-hero {
	padding-block: clamp(2.25rem, 5vw, 4rem) var(--ph-gap);
}

.msp-photo .ph-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: center;
}

.msp-photo .ph-hero__media {
	position: relative;
	border-radius: var(--ph-radius);
	overflow: hidden;
	border: 1px solid var(--ph-line-2);
	/* Fixed ratio so the hero never changes height as the image loads. */
	aspect-ratio: 4 / 3;
}

.msp-photo .ph-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.msp-photo .ph-role {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	font-weight: 600;
	color: var(--ph-ink);
	margin: 0 0 0.75rem;
}

.msp-photo .ph-role span { color: var(--ph-accent); }

/* ── Buttons ─────────────────────────────────────────────────────── */

.msp-photo .ph-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 1.5rem;
}

.msp-photo .ph-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.4rem;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 650;
	text-decoration: none;
	line-height: 1;
	transition: transform 0.16s ease, background-color 0.16s ease,
		border-color 0.16s ease;
}

.msp-photo .ph-btn--primary {
	background: var(--ph-accent);
	color: #fff;
	border: 1px solid var(--ph-accent);
}

.msp-photo .ph-btn--primary:hover {
	background: #d5488f;
	border-color: #d5488f;
	transform: translateY(-1px);
	color: #fff;
}

.msp-photo .ph-btn--ghost {
	background: transparent;
	color: var(--ph-ink);
	border: 1px solid var(--ph-line-2);
}

.msp-photo .ph-btn--ghost:hover {
	border-color: var(--ph-accent);
	color: var(--ph-ink);
	transform: translateY(-1px);
}

/* ── Stat strip ──────────────────────────────────────────────────── */

.msp-photo .ph-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--ph-line);
	border: 1px solid var(--ph-line);
	border-radius: var(--ph-radius);
	overflow: hidden;
}

.msp-photo .ph-stat {
	background: var(--ph-surface);
	padding: 1.35rem 1.15rem;
	text-align: center;
}

.msp-photo .ph-stat__n {
	display: block;
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	font-weight: 700;
	color: var(--ph-ink);
	line-height: 1.1;
	margin-bottom: 0.3rem;
}

.msp-photo .ph-stat__l {
	display: block;
	font-size: 0.82rem;
	color: var(--ph-faint);
	line-height: 1.35;
}

/* ── Split (about) ───────────────────────────────────────────────── */

.msp-photo .ph-split {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: start;
}

.msp-photo .ph-split--rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }

/* The figure has a fixed aspect ratio, so it cannot stretch to match a
   taller text column. Centring it is tidier than leaving it hanging
   from the top with dead space underneath. */
.msp-photo .ph-split--mid { align-items: center; }

.msp-photo .ph-figure {
	margin: 0;
	border-radius: var(--ph-radius);
	overflow: hidden;
	border: 1px solid var(--ph-line);
	aspect-ratio: 4 / 3;
}

.msp-photo .ph-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.msp-photo .ph-figure--tall { aspect-ratio: 3 / 4; }

/* Hindi callout — the original ran at ~11px in a cramped column. */
.msp-photo .ph-hindi {
	margin-top: 1.5rem;
	padding: 1.4rem 1.5rem;
	background: var(--ph-surface-2);
	border: 1px solid var(--ph-line);
	border-left: 3px solid var(--ph-accent);
	border-radius: 12px;
}

.msp-photo .ph-hindi p {
	font-size: 1rem;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.78);
}

.msp-photo .ph-hindi .ph-hindi__q {
	font-weight: 650;
	color: var(--ph-ink);
	margin-bottom: 0.6rem;
}

.msp-photo .ph-hindi ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msp-photo .ph-hindi li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.5rem;
	font-size: 0.97rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.78);
}

.msp-photo .ph-hindi li:last-child { margin-bottom: 0; }

.msp-photo .ph-hindi li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--ph-accent);
}

/* ── Cards (services / benefits) ─────────────────────────────────── */

.msp-photo .ph-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

/* 16rem rather than 15: at 768px three columns would each be ~229px,
   which squeezes the album card's size chips into a tall ragged stack.
   This drops the row to two columns on tablet instead. */
.msp-photo .ph-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.msp-photo .ph-card {
	display: flex;
	flex-direction: column;
	background: var(--ph-surface);
	border: 1px solid var(--ph-line);
	border-radius: var(--ph-radius);
	overflow: hidden;
	transition: transform 0.18s ease, border-color 0.18s ease;
}

.msp-photo .ph-section--alt .ph-card { background: var(--ph-bg); }

.msp-photo .ph-card:hover {
	transform: translateY(-3px);
	border-color: var(--ph-line-2);
}

.msp-photo .ph-card__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ph-surface-2);
}

.msp-photo .ph-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.msp-photo .ph-card:hover .ph-card__media img { transform: scale(1.04); }

.msp-photo .ph-card__body { padding: 1.25rem 1.3rem 1.4rem; }

.msp-photo .ph-card__body p { font-size: 0.94rem; }

/* ── Numbered points ─────────────────────────────────────────────── */

.msp-photo .ph-points {
	display: grid;
	gap: 1rem;
}

.msp-photo .ph-point {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
	padding: 1.35rem 1.4rem;
	background: var(--ph-surface);
	border: 1px solid var(--ph-line);
	border-radius: var(--ph-radius);
}

.msp-photo .ph-section--alt .ph-point { background: var(--ph-bg); }

.msp-photo .ph-point__n {
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: rgba(195, 49, 125, 0.16);
	border: 1px solid rgba(195, 49, 125, 0.4);
	color: var(--ph-accent);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1;
}

.msp-photo .ph-point p { font-size: 0.95rem; }

/* ── Mosaic gallery ──────────────────────────────────────────────── */

.msp-photo .ph-mosaic {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
	gap: 0.75rem;
	/* Dense packing back-fills the cell a row-spanning tile would
	   otherwise leave empty further up the grid. */
	grid-auto-flow: dense;
}

.msp-photo .ph-mosaic figure {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--ph-line);
	aspect-ratio: 1 / 1;
	background: var(--ph-surface-2);
}

.msp-photo .ph-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease, opacity 0.25s ease;
}

.msp-photo .ph-mosaic figure:hover img {
	transform: scale(1.05);
	opacity: 0.92;
}

/* A few deliberate spans stop the grid reading as a plain checkerboard.
   Only applied where there is room for them. */
@media (min-width: 700px) {
	.msp-photo .ph-mosaic .ph-m-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
	.msp-photo .ph-mosaic .ph-m-tall { grid-row: span 2; aspect-ratio: 1 / 2; }
}

.msp-photo .ph-note {
	margin-top: 1rem;
	font-size: 0.85rem;
	color: var(--ph-faint);
}

/* ── Spec chips (album sizes) ────────────────────────────────────── */

.msp-photo .ph-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
	margin-top: 1.1rem;
	padding: 0;
	list-style: none;
}

.msp-photo .ph-chips li {
	padding: 0.5rem 0.95rem;
	border-radius: 999px;
	border: 1px solid var(--ph-line-2);
	background: var(--ph-bg);
	font-size: 0.87rem;
	color: rgba(255, 255, 255, 0.82);
}

/* ── Contact ─────────────────────────────────────────────────────── */

.msp-photo .ph-contacts {
	display: grid;
	gap: 0.85rem;
}

.msp-photo .ph-ct {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding: 1.1rem 1.25rem;
	background: var(--ph-surface);
	border: 1px solid var(--ph-line);
	border-radius: 14px;
	text-decoration: none;
	transition: border-color 0.16s ease, transform 0.16s ease;
}

.msp-photo .ph-section--alt .ph-ct { background: var(--ph-bg); }

.msp-photo a.ph-ct:hover {
	border-color: var(--ph-accent);
	transform: translateY(-1px);
}

.msp-photo .ph-ct__ico {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(195, 49, 125, 0.16);
	font-size: 1.1rem;
	line-height: 1;
}

.msp-photo .ph-ct__k {
	display: block;
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ph-faint);
	margin-bottom: 0.15rem;
}

.msp-photo .ph-ct__v {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ph-ink);
	line-height: 1.35;
	/* Long addresses must wrap, never widen the grid. */
	overflow-wrap: anywhere;
}

.msp-photo .ph-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.msp-photo .ph-social__l {
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ph-faint);
	margin-right: 0.25rem;
}

.msp-photo .ph-social a {
	display: inline-grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 1px solid var(--ph-line-2);
	color: var(--ph-ink);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 650;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.msp-photo .ph-social a:hover {
	border-color: var(--ph-accent);
	background: rgba(195, 49, 125, 0.14);
}

/* ── Embedded Spectra form ───────────────────────────────────────── */

.msp-photo .ph-form {
	max-width: 44rem;
	margin-inline: auto;
}

.msp-photo .ph-form .uagb-forms-main-form { margin-inline: auto; }

/* ── Responsive ──────────────────────────────────────────────────── */

/* Tablet and below */
@media (max-width: 921px) {
	.msp-photo .ph-hero__grid,
	.msp-photo .ph-split,
	.msp-photo .ph-split--rev {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Photo first on the hero reads better than a lone block of text. */
	.msp-photo .ph-hero__media { order: -1; }

	.msp-photo .ph-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.msp-photo .ph-figure,
	.msp-photo .ph-figure--tall { aspect-ratio: 16 / 10; }
}

/* Mobile only */
@media (max-width: 543px) {
	.msp-photo .ph-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.msp-photo .ph-point {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.75rem;
	}

	.msp-photo .ph-cta { flex-direction: column; align-items: stretch; }
	.msp-photo .ph-btn { justify-content: center; }
}

/* Users who prefer less motion get no transforms. */
@media (prefers-reduced-motion: reduce) {
	.msp-photo * {
		transition: none !important;
		transform: none !important;
	}
}


/* ═══════════════════════════════════════════════════════════════════
   Photographer page — sticky page navigation
   ───────────────────────────────────────────────────────────────────
   Used by page-photographer.php, which suppresses Astra's own header
   and footer. Two competing sticky bars would be worse than one, so
   this replaces the site header on this page only.
   ═══════════════════════════════════════════════════════════════════ */

.photo-template .ph-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(24, 32, 44, 0.92);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.photo-template .ph-nav.is-stuck {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
	border-bottom-color: rgba(255, 255, 255, 0.14);
}

.photo-template .ph-nav__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 1200px;
	margin-inline: auto;
	padding: 0.7rem clamp(1rem, 3vw, 2rem);
}

.photo-template .ph-nav__brand {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	text-decoration: none;
	margin-right: auto;
	min-width: 0;
}

.photo-template .ph-nav__name {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
}

.photo-template .ph-nav__sub {
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
}

.photo-template .ph-nav__menu {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.photo-template .ph-nav__menu a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: 8px;
	font-size: 0.88rem;
	font-weight: 550;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.photo-template .ph-nav__menu a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
}

.photo-template .ph-nav__menu a.is-active {
	color: #fff;
	background: rgba(195, 49, 125, 0.2);
}

/* Nav call-to-action — the whole point of the page is an enquiry. */
.photo-template .ph-nav__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.55rem 1.05rem;
	border-radius: 999px;
	background: var(--ast-global-color-0, #c3317d);
	color: #fff;
	font-size: 0.87rem;
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.photo-template .ph-nav__cta:hover { background: #d5488f; color: #fff; }

.photo-template .ph-nav__toggle {
	display: none;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 9px;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.photo-template .ph-nav__toggle span,
.photo-template .ph-nav__toggle span::before,
.photo-template .ph-nav__toggle span::after {
	display: block;
	width: 17px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	margin-inline: auto;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.photo-template .ph-nav__toggle span { position: relative; }
.photo-template .ph-nav__toggle span::before { content: ""; position: absolute; top: -6px; }
.photo-template .ph-nav__toggle span::after { content: ""; position: absolute; top: 6px; }

.photo-template .ph-nav__toggle[aria-expanded="true"] span { background: transparent; }
.photo-template .ph-nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.photo-template .ph-nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Anchors must clear the sticky bar when jumped to. */
.photo-template .msp-photo [id] { scroll-margin-top: 76px; }

/* scroll-behavior belongs on the scrolling element, which is <html> —
   and <html> is an ancestor of the body carrying .photo-template, not a
   descendant, so it cannot be set from here. It is emitted per-template
   in functions.php instead. */

/* ── Page footer (replaces Astra's) ──────────────────────────────── */

.photo-template .ph-foot {
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	padding: 1.75rem clamp(1rem, 3vw, 2rem);
	text-align: center;
}

.photo-template .ph-foot p {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}

.photo-template .ph-foot a { color: rgba(255, 255, 255, 0.75); }

/* ── Nav responsive ──────────────────────────────────────────────── */

@media (max-width: 921px) {
	.photo-template .ph-nav__toggle { display: grid; place-items: center; }

	.photo-template .ph-nav__menu {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem;
		background: #18202c;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
	}

	.photo-template .ph-nav__menu.is-open { display: flex; }

	.photo-template .ph-nav__menu a {
		padding: 0.8rem 0.9rem;
		border-radius: 10px;
		font-size: 0.95rem;
	}

	.photo-template .ph-nav__inner { position: relative; }

	/* The CTA stays visible next to the toggle — it is the conversion. */
	.photo-template .ph-nav__cta { padding: 0.5rem 0.9rem; font-size: 0.82rem; }
}

@media (max-width: 543px) {
	.photo-template .ph-nav__sub { display: none; }
	.photo-template .ph-nav__cta { padding: 0.5rem 0.8rem; font-size: 0.78rem; }
}


/* ── Full-bleed layout for the photographer template ─────────────────
   Astra's .ast-container is a flex row capped at 1180px. Inside it the
   page sized to its content (1047px of 1180px) and then overflowed,
   and the tinted section bands stopped short of the viewport edges,
   which is part of what read as "gaps" either side of each band.

   The container becomes a plain full-width block here; each section
   then paints edge to edge while its CONTENTS stay constrained to the
   same 1180px measure as the rest of the site, so line lengths are
   unchanged. Scoped to .photo-template — no other page is affected. */

.photo-template .ast-container {
	display: block;
	max-width: 100%;
	padding-inline: 0;
}

.photo-template .ph-main,
.photo-template .msp-photo {
	width: 100%;
	max-width: 100%;
}

.msp-photo .ph-hero,
.msp-photo .ph-section {
	padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Beats Gutenberg's :where(.is-layout-constrained > *) rule, which has
   zero specificity, so the constrained measure is ours. */
.msp-photo .ph-hero > *,
.msp-photo .ph-section > * {
	max-width: 1180px;
	margin-inline: auto;
}