/**
 * Business profile pages — /epixeirisi/{slug}/ (single-business.php).
 * Loaded only on those pages (inc/enqueue.php).
 *
 * Reuses .card, .business-card__details and the status badge so a profile reads as the
 * same site as the directory it came from. Calm and scannable is the brief: the reader
 * may be planning a difficult day out.
 */

/* ---------- Hero ---------- */

.profile-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 0.92rem;
}

.profile-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
	margin-top: 18px;
}

.profile-hero__area {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--safi-text-muted-2);
	font-size: 1rem;
}

/* ---------- Layout ----------
   Two columns on desktop with the practical panel sticky, so contact details and the
   "open in Google Maps" action stay reachable while reading. Single column below 900px,
   with the panel AFTER the content — on a phone the preparation notes are what you came
   for, and a sticky sidebar would just eat the viewport. */

.profile-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 44px;
	align-items: start;
}

@media (max-width: 900px) {
	.profile-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

@media (min-width: 901px) {
	.profile-side {
		position: sticky;
		top: 96px; /* clears the sticky site header */
	}
}

/* ---------- Intro + photo ---------- */

.profile-intro {
	font-size: 1.12rem;
	line-height: 1.75;
	color: var(--safi-text-muted-2);
	margin-bottom: 28px;
}

.profile-intro p:last-child {
	margin-bottom: 0;
}

.profile-photo {
	margin: 0 0 32px;
	border-radius: var(--safi-radius-lg);
	overflow: hidden;
	box-shadow: var(--safi-shadow-card);
}

.profile-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- "What to expect" cards ---------- */

.profile-section-title {
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	color: var(--safi-petrol);
	margin: 0 0 20px;
}

.profile-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	margin-bottom: 36px;
}

.profile-card {
	padding: 24px 22px;
}

.profile-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--safi-teal);
	color: #fff;
	margin-bottom: 14px;
}

.profile-card__title {
	font-size: 1.08rem;
	color: var(--safi-petrol);
	margin: 0 0 8px;
}

.profile-card__text {
	margin: 0;
	font-size: 0.99rem;
	line-height: 1.6;
	color: var(--safi-text-muted-3);
}

/* ---------- Callouts ---------- */

.profile-callouts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.profile-callout {
	padding: 26px 24px;
	background: var(--safi-bg-alt);
	border-color: var(--safi-border-strong);
}

.profile-callout__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.1rem;
	color: var(--safi-petrol);
	margin: 0 0 10px;
}

.profile-callout__text {
	margin: 0 0 10px;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--safi-text-muted-3);
}

.profile-callout__text:last-child {
	margin-bottom: 0;
}

/* ---------- Practical panel ---------- */

.profile-panel {
	padding: 26px 24px;
}

.profile-panel__title {
	font-size: 1.12rem;
	color: var(--safi-petrol);
	margin: 0 0 16px;
}

.profile-panel__website {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 4px;
	font-weight: 600;
	font-size: 0.96rem;
	color: var(--safi-teal-hover);
	text-decoration: none;
}

.profile-panel__website:hover {
	color: var(--safi-petrol);
}

/* The panel's mini map overrides the /xartis/ canvas height — it is a locator, not a
   browsing surface, so it wants to be small and immediately readable. */
.profile-map {
	margin: 20px 0 16px;
}

.safi-map.profile-map.is-ready .safi-map__canvas {
	height: 220px;
}

/* /xartis/ markers went to 42px so they read at island scale on a near-full-height canvas.
   On a 220px locator holding exactly one pin that is a fifth of the frame, so this map
   keeps them nearer the old size. Purely proportional — the ring, the swatch and the
   measured contrast are unchanged.

   Leaflet's iconSize stays 42 either way, so the icon box is still 42px and the anchor
   still lands on the coordinate; only the visible disc inside it shrinks, centred. */
.profile-map .safi-marker {
	width: 32px;
	height: 32px;
	margin: 5px;
}

.profile-map .safi-marker__glyph svg {
	width: 16px;
	height: 16px;
}

.profile-panel__cta {
	width: 100%;
	justify-content: center;
	padding: 12px 18px;
	font-size: 0.98rem;
}

/* Sensory notes are claims a family may plan a day around, so when they were last
   confirmed is part of the information, not a footnote. */
.profile-panel__updated {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--safi-border-soft);
	font-size: 0.88rem;
	color: var(--safi-text-muted-3);
}

/* ---------- Back links ---------- */

.profile-backlinks {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	margin: 44px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--safi-border-soft);
}

.profile-backlinks a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--safi-teal-hover);
	text-decoration: none;
}

.profile-backlinks a:hover {
	color: var(--safi-petrol);
}

/* ---------- Incomplete profile ---------- */

.profile-pending {
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
	padding: 52px 28px;
	border-radius: var(--safi-radius-lg);
	border: 1px dashed var(--safi-border-strong);
	background: var(--safi-surface);
}

.profile-pending__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--safi-teal);
	color: #fff;
	margin-bottom: 16px;
}

.profile-pending__title {
	font-size: 1.3rem;
	color: var(--safi-petrol);
	margin: 0 0 10px;
}

.profile-pending__text {
	margin: 0 auto 24px;
	max-width: 52ch;
	line-height: 1.65;
	color: var(--safi-text-muted-3);
}