/* CEC Guest Testimonials
 *
 * Scoped to .cect so nothing here can reach the rest of the page. The carousel
 * mechanics, arrows and pagination are styled by the UI Kit's own Splide CSS;
 * this file only dresses the quote itself.
 *
 * Brand: Planet Purple #2D1151 for attribution, #FFD200 as the accent, matching
 * the speech-bubble pattern already used for quotes on this site.
 */

.cect {
	margin: 2rem 0;
}

.cect__heading {
	text-align: center;
	margin: 0 0 1.25rem;
}

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

.cect__slide {
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 1rem;
}

.cect__figure {
	margin: 0;
	max-width: 46rem;
	background: #fff;
	border-radius: 1.25rem;
	padding: 1.75rem 1.5rem 1.25rem;
	box-shadow: 0 2px 10px rgba(45, 17, 81, 0.12);
	position: relative;
}

/* Opening quote mark as decoration only -- it must never be read aloud. */
.cect__figure::before {
	content: "\201C";
	position: absolute;
	top: -0.35em;
	left: 0.5rem;
	font-size: 4.5rem;
	line-height: 1;
	color: #ffd200;
	pointer-events: none;
}

.cect__quote {
	margin: 0;
	border: 0;
	padding: 0;
	quotes: none;
}

.cect__quote p {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: #23282d;
}

.cect__credit {
	margin-top: 0.9rem;
	font-weight: 700;
	color: #2d1151;
	font-size: 0.95rem;
}

.cect__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1rem;
}

.cect__toggle,
.cect__carousel .splide__arrow {
	background: transparent;
	border: 2px solid #2d1151;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	cursor: pointer;
	color: #2d1151;
	line-height: 1;
}

/* A visible focus ring is required; never remove the outline without a
   replacement that is at least as clear. */
.cect__toggle:focus-visible,
.cect__carousel .splide__arrow:focus-visible {
	outline: 3px solid #2d1151;
	outline-offset: 2px;
}

/* Splide toggles which of these two is shown via its Autoplay component. */
.cect__toggle .splide__toggle__play {
	display: none;
}

.cect__toggle.is-active .splide__toggle__play {
	display: inline;
}

.cect__toggle.is-active .splide__toggle__pause {
	display: none;
}

@media (max-width: 600px) {
	.cect__figure {
		padding: 1.5rem 1.15rem 1rem;
	}

	.cect__quote p {
		font-size: 1rem;
	}
}

/* ---------------------------------------------------------------------------
 * The review wall: every publishable quote for one store, in topic sections.
 * Static markup on purpose -- a review page is for reading and for being
 * crawled, so nothing here depends on JavaScript.
 * ------------------------------------------------------------------------- */

.cect-wall {
	margin: 2rem auto;
	/* One column width for the whole block. At 72rem the tinted section
	   bands ran far wider than the 48rem card column and left a large
	   empty tinted area down the right. Chips, bands and cards now share
	   an edge. */
	max-width: 54rem;
}

.cect-wall__heading {
	margin: 0 0 0.5rem;
}

.cect-wall__intro {
	margin: 0 0 0.5rem;
	color: #555;
}

/* Freshness. Quiet on the page, but it is the visible last-updated date that
   search and AI answer engines look for, so it must not be display:none. */
.cect-wall__updated {
	margin: 0 0 1.5rem;
	color: #6b6b6b;
	font-size: 0.875rem;
}

/* ---------------------------------------------------------------------------
 * Wall styling: playful, on-brand, and entirely CSS.
 *
 * Every accent is driven by two custom properties the renderer sets per topic,
 * --cect-accent and --cect-tint, so a topic keeps its colour across the jump
 * chip, the heading band, the card and the monogram without a single extra
 * class. No images, no webfonts, no JS -- this page is read and crawled, and a
 * decorative layer must not cost it a request.
 *
 * ⚠️ NO STAR RATINGS ANYWHERE, deliberately. We hold no per-quote rating: the
 * pool is gated to top-box and then curated to the top decile, so a uniform
 * five stars would assert a rating we never collected and that does not
 * represent the store. The page's own FAQ says in as many words that we do not
 * publish star ratings -- adding them would contradict copy already on it.
 * ------------------------------------------------------------------------- */

.cect-wall__jump ul {
	list-style: none;
	margin: 0 0 2.25rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cect-wall__jump a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.45rem 0.95rem;
	border: 2px solid var(--cect-accent, #2d1151);
	border-radius: 2rem;
	background: #fff;
	color: var(--cect-accent, #2d1151);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cect-wall__jump a:hover,
.cect-wall__jump a:focus-visible {
	background: var(--cect-accent, #2d1151);
	color: #fff;
}

/* The count sits in its own pill so it reads as a quantity, not as part of the
   topic name. It inverts with the chip on hover. */
.cect-wall__n {
	display: inline-grid;
	place-items: center;
	min-width: 1.35rem;
	height: 1.35rem;
	padding: 0 0.3rem;
	border-radius: 1rem;
	background: var(--cect-tint, #f1f1f1);
	color: var(--cect-accent, #2d1151);
	font-size: 0.78rem;
	font-weight: 700;
	opacity: 1;
	margin-left: 0;
}

.cect-wall__jump a:hover .cect-wall__n,
.cect-wall__jump a:focus-visible .cect-wall__n {
	background: rgba(255, 255, 255, 0.9);
}

/* The summary passage and topic table.
   This is the part an answer engine is most likely to quote, so it is plain,
   high-contrast and NOT visually demoted -- and the table is a real <table>,
   because comparison data in styled divs is invisible to a crawler. */
.cect-wall__summary {
	margin: 0 0 2rem;
	padding: 1.25rem 1.4rem;
	border: 2px solid rgba(45, 17, 81, 0.1);
	border-radius: 1.25rem;
	background: #fff;
}

.cect-wall__lede {
	margin: 0 0 1.1rem;
	font-size: 1.05rem;
	line-height: 1.6;
}

.cect-wall__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.cect-wall__table caption {
	caption-side: top;
	text-align: left;
	margin-bottom: 0.5rem;
	font-weight: 700;
	color: #2d1151;
}

.cect-wall__table th,
.cect-wall__table td {
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid rgba(45, 17, 81, 0.1);
	text-align: left;
}

.cect-wall__table thead th {
	border-bottom-width: 2px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6b6b;
}

/* The row header carries the topic's own colour, so the table reads as the
   same system as the chips and the bands below it. */
.cect-wall__table tbody th {
	font-weight: 700;
}

.cect-wall__table tbody th a {
	color: var(--cect-accent, #2d1151);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.cect-wall__table tbody th a:hover,
.cect-wall__table tbody th a:focus-visible {
	border-bottom-color: currentColor;
}

.cect-wall__table td {
	width: 6rem;
	font-variant-numeric: tabular-nums;
}

/* Alternating tinted bands break a long page into readable chapters. The tint
   is the topic's own, at low strength, so the band and its cards agree. */
.cect-wall__section {
	margin: 0 0 1rem;
	padding: 1.75rem 1.25rem 2rem;
	border-radius: 1.5rem;
	/* Anchor targets must clear any sticky header when jumped to. */
	scroll-margin-top: 6rem;
}

.cect-wall__section.is-banded {
	background: var(--cect-tint, #faf7ff);
}

/* The topic heading as a highlighter swipe: a rounded band in the topic colour
   with the label knocked out of it. The band is the element's own background
   rather than a pseudo-element, so it wraps correctly on two lines at phone
   width instead of leaving a stripe behind the first line only. */
.cect-wall__topic {
	margin: 0 0 1.25rem;
	padding: 0;
	border-bottom: 0;
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
	line-height: 1.35;
}

.cect-wall__topic-in {
	display: inline;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0.3em 0.7em;
	border-radius: 0.9em;
	background: var(--cect-accent, #2d1151);
	color: #fff;
}

/* ONE COLUMN, at every width.
   This was an auto-fit grid, which at 1440px is four columns. Grid stretches
   every card in a row to the tallest one, so a single long testimonial
   inflated its row-mates to match -- measured at 1,210px of empty space on a
   21-quote store. Quote lengths here vary a lot, so no column count avoids it.
   Stacking sizes each quote to its own text.
   The measure is capped because a full-width 1240px line runs ~150 characters;
   the cap only binds above 768px. */
.cect-wall__list {
	list-style: none;
	margin: 0;              /* left-aligned, NOT centred: the topic heading and
	                           the jump chips above are full-width and
	                           left-aligned, and a centred column visibly fails
	                           to line up with either. */
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.9rem;
	/* The measure is set by .cect-wall plus the section padding now, so
	   the list must not also cap it -- two caps left the cards narrower
	   than the band that frames them. */
	max-width: none;
}

/* Card: monogram in a left rail, quote and credit stacked beside it.
   figcaption stays a DIRECT child of figure (grid areas place it) -- nesting
   it in a wrapper would be invalid HTML and costs the caption its semantics. */
.cect-wall__figure {
	box-sizing: border-box;
	max-width: none;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas:
		"avatar quote"
		"avatar credit";
	align-items: start;
	gap: 0.15rem 1.15rem;
	margin: 0;
	padding: 1.15rem 1.35rem 1.15rem 1.15rem;
	background: #fff;
	border: 1px solid rgba(45, 17, 81, 0.08);
	border-left: 6px solid var(--cect-accent, #2d1151);
	border-radius: 1.1rem;
	box-shadow: 0 2px 10px rgba(45, 17, 81, 0.06);
}

.cect-wall__section.is-banded .cect-wall__figure {
	box-shadow: 0 2px 10px rgba(45, 17, 81, 0.09);
}

/* A CEC character circle. The tinted background stays underneath on purpose:
   the art is already a filled circle, so if it ever fails to load the card
   shows a coloured disc rather than a broken-image icon. */
.cect-wall__avatar {
	grid-area: avatar;
	display: block;
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 50%;
	background: var(--cect-tint, #f3ebfb);
	overflow: hidden;
	flex: none;
}

.cect-wall__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* A large opening quote mark, set in the topic colour. It is decorative, so it
   is a pseudo-element and never lands in the accessibility tree or in the text
   a crawler extracts. */
.cect-wall__figure .cect__quote {
	grid-area: quote;
	position: relative;
	margin: 0;
	padding: 0 0 0 2.5rem;   /* clears the quote mark; 1.6rem collided */
	border: 0;
}

.cect-wall__figure .cect__quote::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -0.55rem;
	color: var(--cect-accent, #2d1151);
	opacity: 0.32;
	/* A serif face on purpose: the UI sans renders U+201C as a small
	   prime-like tick, which reads as a typo rather than as decoration. */
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
}

.cect-wall__figure .cect__quote p {
	margin: 0;
}

.cect-wall__figure .cect__credit {
	grid-area: credit;
	margin: 0.5rem 0 0;
	padding-left: 2.5rem;
	color: var(--cect-accent, #2d1151);
	font-weight: 700;
	font-size: 0.92rem;
}

/* The carousel's own decorative mark; the wall draws its own above. */
.cect-wall__figure::before {
	display: none;
}

@media (max-width: 600px) {
	.cect-wall__avatar {
		width: 3rem;
		height: 3rem;
	}

	.cect-wall__summary {
		padding: 1rem;
	}

	.cect-wall__section {
		padding: 1.25rem 0.9rem 1.5rem;
		border-radius: 1.1rem;
	}

	.cect-wall__figure {
		/* The monogram rail costs too much width on a phone; drop it to a row
		   above the quote rather than squeezing the text. */
		grid-template-columns: 1fr;
		grid-template-areas:
			"avatar"
			"quote"
			"credit";
		gap: 0.35rem;
		padding: 1rem;
	}

	.cect-wall__figure .cect__quote,
	.cect-wall__figure .cect__credit {
		padding-left: 0;
	}

	/* Stacked, the mark sat on its own line and cost ~44px a card -- real
	   money over 21 quotes on a phone. Pulled back onto the text. */
	.cect-wall__figure .cect__quote::before {
		position: static;
		display: block;
		font-size: 2.6rem;
		line-height: 0.7;
		margin-bottom: -1.25rem;
	}
}

/* The 600px single-column override that used to live here is gone: the list is
   one column at every width now, and leaving it would be a second place that
   sets the column count. */

/* Splide honors prefers-reduced-motion itself; this removes our own transitions
   as well, so nothing animates for a visitor who asked for stillness. */
@media (prefers-reduced-motion: reduce) {
	.cect *,
	.cect *::before,
	.cect *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Store decision facts: address, phone, what a party costs here.
 * Plain and high-contrast on purpose -- this is the block most likely to be
 * quoted, and the one that keeps CECT_Schema's address honest by putting it
 * somewhere a reader can actually see it.
 * ------------------------------------------------------------------------- */

.cect-facts {
	margin: 2rem auto;
	max-width: 54rem;
	padding: 1.4rem 1.5rem 1.5rem;
	border: 2px solid rgba(45, 17, 81, 0.1);
	border-radius: 1.25rem;
	background: #fff;
}

.cect-facts__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
}

.cect-facts__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.cect-facts__table caption {
	caption-side: top;
	text-align: left;
	margin-bottom: 0.5rem;
	font-weight: 700;
	color: #2d1151;
}

.cect-facts__table th,
.cect-facts__table td {
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid rgba(45, 17, 81, 0.1);
	text-align: left;
	vertical-align: top;
}

.cect-facts__table thead th {
	border-bottom-width: 2px;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #6b6b6b;
}

.cect-facts__table tbody th {
	font-weight: 700;
	color: #2d1151;
}

.cect-facts__table td {
	font-variant-numeric: tabular-nums;
}

.cect-facts__note,
.cect-facts__nap {
	margin: 0.9rem 0 0;
	font-size: 0.875rem;
	color: #6b6b6b;
}

.cect-facts__nap {
	color: #23282d;
	font-weight: 600;
}

.cect-facts__nap a {
	color: #2d1151;
}

@media (max-width: 600px) {
	.cect-facts {
		padding: 1rem;
		border-radius: 1.1rem;
	}

	/* Four columns will not fit a phone. Collapse to stacked rows, each cell
	   labelled by its column header, so nothing is lost and nothing overflows. */
	.cect-facts__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.cect-facts__table tbody tr {
		display: block;
		padding: 0.6rem 0;
		border-bottom: 1px solid rgba(45, 17, 81, 0.12);
	}

	.cect-facts__table tbody th,
	.cect-facts__table tbody td {
		display: block;
		border: 0;
		padding: 0.1rem 0;
	}

	.cect-facts__table tbody td::before {
		content: attr(data-label) ": ";
		color: #6b6b6b;
		font-weight: 600;
	}
}

/* ---------------------------------------------------------------------------
 * "About this location" -- the store's own personalization fields.
 * A definition list, not a table: these are labelled facts, not rows and
 * columns, and <dl> survives HTML-to-Markdown conversion with the label still
 * attached to its value.
 * ------------------------------------------------------------------------- */

.cect-about {
	margin: 2rem auto;
	max-width: 54rem;
	padding: 1.4rem 1.5rem 1.5rem;
	border: 2px solid rgba(45, 17, 81, 0.1);
	border-radius: 1.25rem;
	background: #fff;
}

.cect-about__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
}

.cect-about__list {
	margin: 0;
}

.cect-about__row {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 0.25rem 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(45, 17, 81, 0.1);
}

.cect-about__row:last-child {
	border-bottom: 0;
}

.cect-about__list dt {
	margin: 0;
	font-weight: 700;
	color: #2d1151;
}

.cect-about__list dd {
	margin: 0;
	color: #23282d;
}

@media (max-width: 600px) {
	.cect-about {
		padding: 1rem;
		border-radius: 1.1rem;
	}

	/* The label column costs too much width on a phone; stack instead. */
	.cect-about__row {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}
}