/**
 * Aurelle NY - the public experiences list.
 *
 * Front-end, so this deliberately does not use the admin design tokens:
 * those are defined by Aurelle NY Core inside wp-admin and are not
 * present out here. The values below are the same palette, declared
 * locally, so the list keeps its look whether or not Core is installed
 * and whatever theme is active.
 *
 * Scoped under .aurelle-experiences throughout. A theme's own styles
 * for h2, h3, hr and a would otherwise reach in, and the first thing a
 * shortcode has to survive is the theme it lands in.
 */

.aurelle-experiences {
	--aurelle-exp-rose: #C4818E;
	--aurelle-exp-ink: #453A40;
	--aurelle-exp-muted: #8E9399;
	--aurelle-exp-line: rgba(196, 129, 142, .22);
	--aurelle-exp-radius: 14px;
	/*
	 * Georgia, deliberately. The theme's own headings are Anton and its
	 * body copy is Roboto; this section is set apart from them on
	 * purpose, as a quieter editorial voice against a loud display
	 * face. Tried matching the theme in 0.62.0 and reverted -- so this
	 * is a choice now rather than the accident it started as, and worth
	 * leaving alone unless the whole site's typography changes.
	 */
	--aurelle-exp-display: Georgia, 'Times New Roman', serif;
	--aurelle-exp-columns: 4;
	/* One declaration, because the card basis below is calculated from
	   it. Two copies of a gap that must agree is the sort of thing that
	   drifts the moment either is adjusted. */
	--aurelle-exp-gap: 28px;

	max-width: 1180px;
	margin: 0 auto;
	padding: 8px 0 16px;
	color: var(--aurelle-exp-ink);
}

.aurelle-experiences * { box-sizing: border-box; }

/* ── Section head ── */

.aurelle-experiences .aurelle-exp-eyebrow {
	font-family: var(--aurelle-exp-display);
	font-style: italic;
	font-size: 20px;
	color: var(--aurelle-exp-rose);
	text-align: center;
	margin: 0 0 6px;
}

.aurelle-experiences .aurelle-exp-title {
	font-family: var(--aurelle-exp-display);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.2;
	text-align: center;
	margin: 0 0 14px;
	color: var(--aurelle-exp-ink);
}

.aurelle-experiences .aurelle-exp-ornament {
	display: block;
	margin: 0 auto 20px;
	width: 74px;
	height: 16px;
	color: var(--aurelle-exp-rose);
}

.aurelle-experiences .aurelle-exp-intro {
	max-width: 620px;
	margin: 0 auto 44px;
	text-align: center;
	color: var(--aurelle-exp-muted);
	font-size: 15.5px;
	line-height: 1.65;
}

/* ── Cards ── */

/*
 * Flex wrap rather than a grid, so that a last row holding fewer cards
 * than the others centres under them instead of sitting hard left
 * against an empty gap. With five experiences in four columns that
 * single trailing card looks like a mistake rather than a fifth item.
 *
 * A full row is identical either way: the basis is the exact width a
 * grid column would have been, so nothing about the common case
 * changes.
 */
.aurelle-experiences .aurelle-exp-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--aurelle-exp-gap);
}

.aurelle-experiences .aurelle-exp-card {
	/* As a flex item: the exact width a grid column would have been,
	   allowed to shrink but never to grow, so a short last row keeps
	   the same card size as the rows above it rather than stretching
	   to fill the space. */
	flex: 0 1 calc(
		(100% - (var(--aurelle-exp-columns) - 1) * var(--aurelle-exp-gap))
		/ var(--aurelle-exp-columns)
	);

	/* As a flex container: the card's own contents, stacked. */
	display: flex;
	flex-direction: column;

	/* A flex item defaults to min-width:auto and so cannot shrink
	   below its own widest content -- a long experience name would
	   otherwise push its card wider than its share of the row. */
	min-width: 0;
}

/*
 * The card is a link, so the theme's own anchor styling has to be shut
 * out: an underlined card title and a blue heading would look like a
 * mistake rather than a design.
 */
.aurelle-experiences a.aurelle-exp-card,
.aurelle-experiences a.aurelle-exp-card:hover,
.aurelle-experiences a.aurelle-exp-card:focus {
	text-decoration: none;
	color: var(--aurelle-exp-ink);
	box-shadow: none;
}

.aurelle-experiences .aurelle-exp-card.is-linked {
	border-radius: var(--aurelle-exp-radius);
	transition: transform .15s ease;
}

.aurelle-experiences .aurelle-exp-card.is-linked:hover { transform: translateY(-3px); }
.aurelle-experiences .aurelle-exp-card.is-linked:hover .aurelle-exp-media { box-shadow: 0 10px 26px rgba(69, 58, 64, .14); }
.aurelle-experiences .aurelle-exp-card.is-linked:hover .aurelle-exp-name { color: #AC717D; }

/* Keyboard users get the same affordance the mouse gets. */
.aurelle-experiences .aurelle-exp-card.is-linked:focus-visible {
	outline: 2px solid var(--aurelle-exp-rose);
	outline-offset: 6px;
}

/*
 * The prompt where the button used to be. It carries real information
 * -- that the card is clickable at all, and whether this experience is
 * booked or enquired about -- so it is not decoration and does not get
 * hidden on small screens.
 */
.aurelle-experiences .aurelle-exp-more {
	text-align: center;
	margin: 12px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #AC717D;
}

.aurelle-experiences .aurelle-exp-media {
	aspect-ratio: 4 / 3;
	border-radius: var(--aurelle-exp-radius);
	overflow: hidden;
	background: linear-gradient(135deg, #EFE3E6, #F7EFF1);
	position: relative;
}

.aurelle-experiences .aurelle-exp-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aurelle-experiences .aurelle-exp-media-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	text-align: center;
	font-family: var(--aurelle-exp-display);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--aurelle-exp-rose);
}

.aurelle-experiences .aurelle-exp-name {
	font-family: var(--aurelle-exp-display);
	font-weight: 400;
	font-size: 21px;
	line-height: 1.3;
	text-align: center;
	margin: 20px 0 0;
	color: var(--aurelle-exp-ink);
}

.aurelle-experiences .aurelle-exp-rule {
	width: 44px;
	height: 2px;
	background: var(--aurelle-exp-rose);
	border: 0;
	margin: 12px auto 14px;
}

.aurelle-experiences .aurelle-exp-desc {
	text-align: center;
	color: var(--aurelle-exp-muted);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0 0 14px;
}

.aurelle-experiences .aurelle-exp-figure {
	text-align: center;
	font-family: var(--aurelle-exp-display);
	font-size: 23px;
	margin: 0;
	color: var(--aurelle-exp-ink);
}

/*
 * The label is not decoration. The deposit is what the card is charged;
 * the minimum is what to expect to spend on the day. An unlabelled
 * figure reads as the price of the appointment, which neither of them
 * is.
 */
.aurelle-experiences .aurelle-exp-figure small {
	display: block;
	font-family: inherit;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--aurelle-exp-muted);
	margin-top: 5px;
}

.aurelle-experiences .aurelle-exp-note {
	text-align: center;
	font-size: 12.5px;
	color: var(--aurelle-exp-muted);
	margin: 10px 0 0;
}

.aurelle-experiences .aurelle-exp-cta {
	margin: 16px 0 0;
	text-align: center;
}

.aurelle-experiences .aurelle-exp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 10px 24px;
	font-size: 13.5px;
	font-weight: 600;
	border: 1px solid var(--aurelle-exp-rose);
	background: var(--aurelle-exp-rose);
	color: #fff;
	text-decoration: none;
	line-height: 1.2;
}

.aurelle-experiences .aurelle-exp-btn:hover,
.aurelle-experiences .aurelle-exp-btn:focus {
	background: #AC717D;
	border-color: #AC717D;
	color: #fff;
	text-decoration: none;
}

/* Enquiry-only experiences read as the quieter option, because they
   are: nothing is booked or paid by pressing it. */
.aurelle-experiences .aurelle-exp-btn.is-outline {
	background: transparent;
	color: var(--aurelle-exp-ink);
	border-color: var(--aurelle-exp-line);
}

.aurelle-experiences .aurelle-exp-btn.is-outline:hover,
.aurelle-experiences .aurelle-exp-btn.is-outline:focus {
	background: rgba(196, 129, 142, .08);
	color: var(--aurelle-exp-ink);
	border-color: var(--aurelle-exp-rose);
}

/* ── The single closing button ── */

.aurelle-experiences .aurelle-exp-footer-cta { text-align: center; margin: 44px 0 0; }

.aurelle-experiences .aurelle-exp-btn-lg {
	padding: 14px 40px;
	font-size: 15px;
	letter-spacing: .03em;
}

/* ── Narrower screens ── */

@media (max-width: 1000px) {
	/* Overriding the basis rather than the column count, since the
	   basis is what actually sizes a card now. */
	.aurelle-experiences .aurelle-exp-card {
		flex-basis: calc((100% - var(--aurelle-exp-gap)) / 2);
	}
}

@media (max-width: 640px) {
	.aurelle-experiences .aurelle-exp-grid { gap: 34px; }
	.aurelle-experiences .aurelle-exp-card { flex-basis: 100%; }
	.aurelle-experiences .aurelle-exp-title { font-size: 27px; }
	.aurelle-experiences .aurelle-exp-intro { margin-bottom: 32px; }
	.aurelle-experiences .aurelle-exp-btn { width: 100%; }
	.aurelle-experiences .aurelle-exp-footer-cta { margin-top: 32px; }
	/* No hover on a touch screen, so the lift would only ever be seen
	   as a stuck state after a tap. */
	.aurelle-experiences .aurelle-exp-card.is-linked:hover { transform: none; }
}

/* ── Compact cards: [aurelle_experiences layout="compact"] ──────── */

/*
 * The same experiences with less on each: a bordered card holding the
 * picture, the name, one line and the figures. On a phone each card
 * turns on its side into a row - picture left, words right - so six
 * experiences fit in about a screen and a half instead of six.
 */
.aurelle-experiences.is-compact { --aurelle-exp-gap: 24px; }

.aurelle-experiences.is-compact .aurelle-exp-card {
	position: relative;
	text-align: left;
	background: #fff;
	border: 1px solid #E7DCD6;
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aurelle-experiences.is-compact .aurelle-exp-card.is-linked:hover {
	transform: none;
	border-color: #E3AAB5;
	box-shadow: 0 6px 18px rgba(69, 58, 64, .08);
}

.aurelle-experiences.is-compact .aurelle-exp-card.is-linked:hover .aurelle-exp-media { box-shadow: none; }
.aurelle-experiences.is-compact .aurelle-exp-card.is-linked:hover .aurelle-exp-name { color: var(--aurelle-exp-ink); }
.aurelle-experiences.is-compact .aurelle-exp-card.is-linked:focus-visible { outline-offset: 2px; }

.aurelle-experiences.is-compact .aurelle-exp-media { border-radius: 0; }
.aurelle-experiences.is-compact .aurelle-exp-media img { transition: transform .4s ease; }
.aurelle-experiences.is-compact .aurelle-exp-card.is-linked:hover .aurelle-exp-media img { transform: scale(1.04); }

.aurelle-experiences.is-compact .aurelle-exp-body { padding: 20px 22px 22px; min-width: 0; }

.aurelle-experiences.is-compact .aurelle-exp-name {
	font-size: 22px;
	line-height: 1.2;
	text-align: left;
	margin: 0;
}

.aurelle-experiences.is-compact .aurelle-exp-desc {
	text-align: left;
	font-size: 15px;
	line-height: 1.4;
	color: #5E5358;
	margin: 4px 0 0;
}

/* Darker than the rose used elsewhere: at this size on white the
   lighter one falls short of 4.5:1. */
.aurelle-experiences.is-compact .aurelle-exp-meta {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	line-height: 1.4;
	color: #8F5563;
	margin: 6px 0 0;
}

.aurelle-experiences.is-compact .aurelle-exp-more {
	display: inline-block;
	text-align: left;
	margin: 14px 0 0;
	padding-bottom: 2px;
	border-bottom: 1px solid #E3AAB5;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #8F5563;
}

.aurelle-experiences.is-compact .aurelle-exp-chev { display: none; }

@media (max-width: 640px) {
	.aurelle-experiences.is-compact .aurelle-exp-grid { gap: 10px; }

	.aurelle-experiences.is-compact .aurelle-exp-card {
		display: grid;
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
		min-height: 120px;
		padding: 8px;
	}

	.aurelle-experiences.is-compact .aurelle-exp-card.is-linked {
		grid-template-columns: 104px minmax(0, 1fr) 20px;
	}

	.aurelle-experiences.is-compact .aurelle-exp-media {
		width: 104px;
		height: 104px;
		aspect-ratio: auto;
		border-radius: 8px;
	}

	.aurelle-experiences.is-compact .aurelle-exp-card.is-linked:hover .aurelle-exp-media img { transform: none; }

	.aurelle-experiences.is-compact .aurelle-exp-body { padding: 0; }
	.aurelle-experiences.is-compact .aurelle-exp-name { font-size: 19px; }

	/* Out of sight, not out of the page: the whole row is the link and
	   the chevron says so to the eye, but a screen reader still gets
	   the words. */
	.aurelle-experiences.is-compact .aurelle-exp-more {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: 0;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.aurelle-experiences.is-compact .aurelle-exp-chev {
		display: block;
		width: 20px;
		height: 20px;
		color: var(--aurelle-exp-muted);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aurelle-experiences.is-compact .aurelle-exp-card,
	.aurelle-experiences.is-compact .aurelle-exp-media img { transition: none; }
}

/* ── Testimonials ──────────────────────────────────────────────── */

.aurelle-tst .aurelle-tst-mark {
	font-family: var(--aurelle-exp-display);
	font-size: 46px;
	line-height: 1;
	color: var(--aurelle-exp-rose);
	opacity: .55;
	margin: 0 0 4px;
	text-align: center;
}

.aurelle-tst .aurelle-tst-track { max-width: 640px; margin: 0 auto; position: relative; }

/*
 * Every quote is rendered; the inactive ones are hidden. Written the
 * other way round -- hidden until a script reveals one -- a scripting
 * error would leave the section empty, and an empty section looks like
 * a fault rather than like nothing to say.
 */
.aurelle-tst .aurelle-tst-slide { margin: 0; }
.aurelle-tst[data-columns="1"] .aurelle-tst-slide { display: none; }
.aurelle-tst[data-columns="1"] .aurelle-tst-slide.is-on { display: block; }

/*
 * Italic, in the display face.
 *
 * Set in body text it read as ordinary copy with a quote mark above
 * it. Italic says somebody is speaking, which is the job the slant
 * does here. It costs a little readability on a long one - the
 * letterforms are narrower - so the size goes up to pay for it.
 */
.aurelle-tst .aurelle-tst-quote {
	font-family: var(--aurelle-exp-display);
	font-style: italic;
	font-size: 19px;
	line-height: 1.7;
	color: var(--aurelle-exp-ink);
	margin: 0 0 22px;
	quotes: none;
}

.aurelle-tst figcaption { display: flex; flex-direction: column; align-items: center; gap: 3px; }

.aurelle-tst .aurelle-tst-photo {
	width: 64px; height: 64px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 7px;
	background: linear-gradient(135deg, #EFE3E6, #F7EFF1);
	display: flex; align-items: center; justify-content: center;
}
.aurelle-tst .aurelle-tst-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No photo shows the initial, which reads as deliberate where an empty
   circle would read as a picture that failed to load. */
.aurelle-tst .aurelle-tst-photo.is-initial {
	font-family: var(--aurelle-exp-display);
	font-size: 21px;
	color: #AC717D;
}

.aurelle-tst .aurelle-tst-name { font-family: var(--aurelle-exp-display); font-size: 16px; }
.aurelle-tst .aurelle-tst-where { font-size: 12.5px; color: var(--aurelle-exp-muted); }

.aurelle-tst .aurelle-tst-dots { display: flex; gap: 9px; justify-content: center; margin-top: 24px; }
.aurelle-tst .aurelle-tst-dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	border: 0; padding: 0;
	background: var(--aurelle-exp-line);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.aurelle-tst .aurelle-tst-dot.is-on { background: var(--aurelle-exp-rose); transform: scale(1.18); }

/* Two and three across: no rotation, so every quote shows at once. */
.aurelle-tst[data-columns="2"] .aurelle-tst-track,
.aurelle-tst[data-columns="3"] .aurelle-tst-track {
	max-width: 1180px;
	display: grid;
	gap: 34px;
	text-align: center;
}
.aurelle-tst[data-columns="2"] .aurelle-tst-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aurelle-tst[data-columns="3"] .aurelle-tst-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── The form page ─────────────────────────────────────────────── */

.aurelle-tst-page .aurelle-tst-form { max-width: 560px; margin: 0 auto; text-align: left; }
.aurelle-tst-field { display: block; margin-bottom: 18px; }
.aurelle-tst-field > span:first-child { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.aurelle-tst-field textarea,
.aurelle-tst-field select,
.aurelle-tst-field input[type="file"] {
	width: 100%;
	border: 1px solid var(--aurelle-exp-line-strong, rgba(196,129,142,.35));
	border-radius: var(--aurelle-exp-radius-sm, 8px);
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--aurelle-exp-ink);
	background: #fff;
}
.aurelle-tst-hint { display: block; font-size: 12px; color: var(--aurelle-exp-muted); margin-top: 5px; }
.aurelle-tst-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin: 0 0 22px; }
.aurelle-tst-consent input { margin-top: 4px; flex-shrink: 0; }
.aurelle-tst-page .aurelle-exp-btn-lg { display: block; width: 100%; }

@media (max-width: 900px) {
	.aurelle-tst[data-columns="3"] .aurelle-tst-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.aurelle-tst[data-columns="2"] .aurelle-tst-track,
	.aurelle-tst[data-columns="3"] .aurelle-tst-track { grid-template-columns: 1fr; }
}

/* ── A rating, where one was given ───────────────────────────────────
   Above the words and centred, so the slide still reads as a quote
   with a face under it rather than a review card. Never shown when
   nobody answered: an empty row of grey stars looks like a bad score. */
.aurelle-tst .aurelle-tst-score {
	margin: 0 0 12px;
	text-align: center;
	letter-spacing: .18em;
	font-size: 15px;
	line-height: 1;
	color: #E0D9DB;
}

.aurelle-tst .aurelle-tst-score .is-on { color: var(--aurelle-exp-rose, #C4818E); }

/* ── Choosing a rating on the form ───────────────────────────────────
   The radios are laid out 5 to 1 in the markup, so a plain sibling
   selector can fill the chosen star and every one before it - the
   usual trick, and it keeps this working with no script at all. */
.aurelle-tst-rate { border: 0; padding: 0; margin: 0 0 18px; }
.aurelle-tst-rate legend { padding: 0; }
.aurelle-tst-optional { text-transform: none; letter-spacing: 0; opacity: .6; }

.aurelle-tst-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 6px;
	margin-top: 6px;
}

.aurelle-tst-stars input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.aurelle-tst-stars label {
	font-size: 28px;
	line-height: 1;
	color: #E0D9DB;
	cursor: pointer;
	transition: color .12s ease;
}

.aurelle-tst-stars input:checked ~ label,
.aurelle-tst-stars label:hover,
.aurelle-tst-stars label:hover ~ label {
	color: var(--aurelle-exp-rose, #C4818E);
}

/* Visible focus, because these are the real controls being operated. */
.aurelle-tst-stars input:focus-visible + label {
	outline: 2px solid var(--aurelle-exp-rose, #C4818E);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ── Text messages, agreed by the guest themselves ───────────────────
   Set apart from the testimonial consent above it: these are two
   different agreements, and running them together would let somebody
   tick one thinking it was the other. */
.aurelle-tst-sms {
	border: 0;
	border-top: 1px solid var(--aurelle-exp-line);
	margin: 18px 0 0;
	padding: 16px 0 0;
}

.aurelle-tst-sms legend {
	padding: 0;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--aurelle-exp-rose);
}

.aurelle-tst-sms .aurelle-tst-optional {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--aurelle-exp-muted);
}

.aurelle-tst-sms .aurelle-tst-consent { margin-top: 12px; font-size: 12px; line-height: 1.55; }