/*
 * core/group.
 *
 * Sections, panels, cards and the small layout shells. Colour and shape live
 * here; rhythm between sections is set per pattern with spacing presets.
 */

/* Dark and navy sections. */
.wp-block-group.is-style-section-dark {
	background: var(--wp--preset--color--navy-deep);
	color: #fff;
}

.wp-block-group.is-style-section-navy {
	background: var(--wp--preset--color--navy);
	color: #fff;
}

/* Navy panel with the radial glow in its top-right corner. */
.wp-block-group.is-style-section-navy-panel {
	position: relative;
	overflow: hidden;
	padding: 60px 56px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--navy-deep);
	color: #fff;
}

.wp-block-group.is-style-section-navy-panel::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -120px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, #2e4f86, transparent 70%);
	opacity: 0.55;
	pointer-events: none;
}

.wp-block-group.is-style-section-navy-panel > * {
	position: relative;
}

@media (max-width: 780px) {

	.wp-block-group.is-style-section-navy-panel {
		padding: 40px 26px;
	}
}

/* Paper panel. */
.wp-block-group.is-style-panel {
	padding: 54px 56px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--paper);
}

@media (max-width: 760px) {

	.wp-block-group.is-style-panel {
		padding: 40px 28px;
	}
}

/* Card. */
.wp-block-group.is-style-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card-sm);
	background: var(--wp--preset--color--paper);
	transition:
		transform 0.45s var(--wp--custom--ease),
		box-shadow 0.45s var(--wp--custom--ease),
		border-color 0.45s var(--wp--custom--ease);
}

.wp-block-group.is-style-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--custom--shadow--card);
	border-color: var(--wp--preset--color--steel-faint);
}

.is-style-card p:empty {
	display: none;
}

.is-style-card:has(.wp-block-post-featured-image img) .is-style-monogram {
	display: none;
}

.ckk-property-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 13px;
	padding: 24px 24px 22px;
}

.is-style-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--card);
	line-height: 1.08;
}

.is-style-card.ckk-team-card {
	gap: 10px;
	padding: 30px 28px;
	border-radius: var(--wp--custom--radius--card);
}

.is-style-card.ckk-bio-card {
	gap: 6px;
	padding: 38px 36px;
	border-radius: 14px;
}

.is-style-card.ckk-bio-card .wp-block-heading {
	font-size: 1.75rem;
}

.is-style-card.ckk-bio-card p {
	font-size: 0.9375rem;
	line-height: 1.7;
}

/*
 * The bio is what should absorb the leftover height, so the LinkedIn button
 * lines up across a row of cards. `:not([class])` keeps that off the monogram
 * and the role label, which carry their own classes — stretching the monogram
 * turned the 50% radius into an ellipse.
 */
.is-style-card .wp-block-post-content,
.is-style-card.ckk-team-card > p:not([class]),
.is-style-card.ckk-team-card > p.wp-block-paragraph:not([class*="is-style-"]) {
	flex: 1;
	font-size: 0.875rem;
	line-height: 1.6;
}

.ckk-bio-contact {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.ckk-bio-contact p {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

/* Card media: 16/9.4, gradient fallback when there is no photo. */
.wp-block-group.is-style-card-media {
	position: relative;
	aspect-ratio: 16 / 9.4;
	overflow: hidden;
	background: var(--wp--preset--gradient--fall);
}

/* Intent cards (the six "what we do" tiles overlapping the hero). */

/*
 * `both` rather than `forwards`, and no `opacity: 0` of its own.
 *
 * The resting state of these elements used to be invisible, with the animation
 * as the only thing that ever made them appear. That inverts the failure mode:
 * anything that stops the animation running — a tab that was in the background
 * while the page loaded, an extension, a browser that suppresses animations,
 * a stylesheet that arrives late — leaves the section blank for good, because
 * nothing else in the cascade ever sets opacity back to 1.
 *
 * `animation-fill-mode: both` applies the first keyframe during the delay
 * instead, so the entrance looks exactly the same, and the element that never
 * animates is simply visible with no entrance. It also removes a snap: with
 * `forwards` alone the element sat at its final position through the delay and
 * jumped back to translateY(22px) the instant the animation started.
 */
.is-layout-constrained > .wp-block-group.ckk-intent {
	position: relative;
	z-index: 5;
	margin-top: -118px;
	animation: ckk-rise 0.9s var(--wp--custom--ease) 0.62s both;
}

/*
 * theme.css disables every animation under reduced motion. The entrance above
 * no longer needs rescuing from that — it rests at full opacity — but the
 * declaration stays so the intent is readable at the point somebody edits it.
 */
@media (prefers-reduced-motion: reduce) {

	.is-layout-constrained > .wp-block-group.ckk-intent {
		opacity: 1;
		animation: none;
	}
}

.wp-block-group.is-style-intent-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.wp-block-group.is-style-intent-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 11px;
	min-height: 172px;
	padding: 24px 24px 22px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card-sm);
	background: var(--wp--preset--color--paper);
	box-shadow: var(--wp--custom--shadow--intent);
	transition:
		transform 0.4s var(--wp--custom--ease),
		box-shadow 0.4s var(--wp--custom--ease),
		border-color 0.4s var(--wp--custom--ease);
}

.wp-block-group.is-style-intent-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--wp--preset--color--steel);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--wp--custom--ease);
}

.wp-block-group.is-style-intent-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--custom--shadow--intent-hover);
	border-color: var(--wp--preset--color--steel-faint);
}

.wp-block-group.is-style-intent-card:hover::before {
	transform: scaleX(1);
}

.is-style-intent-card .wp-block-heading {
	font-size: 1.375rem;
	line-height: 1.05;
}

.is-style-intent-card p {
	flex: 1;
	font-size: 0.875rem;
	line-height: 1.5;
}

.is-style-intent-card:hover .is-style-icon-box {
	background: var(--wp--preset--color--navy);
}

.is-style-intent-card:hover .is-style-icon-box img {
	filter: brightness(0) invert(1);
}

@media (max-width: 980px) {

	.is-layout-constrained > .wp-block-group.ckk-intent {
		margin-top: -70px;
	}

	.wp-block-group.is-style-intent-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.wp-block-group.is-style-intent-card {
		min-height: 0;
		padding: 24px 22px 20px;
	}
}

@media (max-width: 680px) {

	.is-layout-constrained > .wp-block-group.ckk-intent {
		margin-top: -60px;
	}
}

/* Info card: translucent tile on a navy panel. */
.wp-block-group.is-style-info-card {
	padding: 30px 30px 28px;
	border: 1px solid var(--wp--custom--on-dark--border);
	border-radius: 10px;
	background: var(--wp--custom--on-dark--surface);
	transition:
		background 0.4s var(--wp--custom--ease),
		border-color 0.4s var(--wp--custom--ease);
}

.wp-block-group.is-style-info-card:hover {
	background: var(--wp--custom--on-dark--surface-hover);
	border-color: rgba(157, 177, 212, 0.5);
}

.is-style-info-card .wp-block-heading {
	margin: 10px 0;
	font-size: 1.625rem;
}

.is-style-info-card p {
	margin-bottom: 22px;
	font-size: 0.90625rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
}

.is-style-info-card .is-style-eyebrow {
	margin-bottom: 0;
}

/* Sticky action bar under the property hero. */
.wp-block-group.is-style-action-bar {
	position: sticky;
	top: var(--wp--custom--header--height-scrolled);
	z-index: 90;
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--paper);
}

.wp-block-group.is-style-action-bar > .wp-block-group {
	padding-top: 16px;
	padding-bottom: 16px;
}

.is-style-action-bar .wp-block-button .wp-block-button__link {
	padding: 12px 20px;
	font-size: 0.84375rem;
}

@media (max-width: 680px) {

	.wp-block-group.is-style-action-bar {
		position: static;
	}
}

/* Sticky filter bar above a listing grid. */
.wp-site-blocks .wp-block-group.is-style-filter-bar {
	position: sticky;
	top: 60px;
	z-index: 50;
	margin-top: 40px;
	padding-top: 18px;
	padding-bottom: 18px;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--bg);
}

.is-style-filter-bar .ckk-result-count {
	font-size: 0.8125rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--wp--preset--color--gray);
}

/*
 * On a phone the bar wrapped onto three rows and then stayed stuck there, so a
 * third of a 390x844 viewport was permanently chrome. It scrolls with the page
 * at that size instead: the chips are at the top of the list, which is where
 * somebody who wants to change the filter looks anyway.
 */
@media (max-width: 680px) {

	.wp-site-blocks .wp-block-group.is-style-filter-bar {
		position: static;
		top: auto;
		margin-top: 24px;
		padding-top: 14px;
		padding-bottom: 14px;
	}
}

/* Stats grid: three centred stats with hairlines between. */
.wp-block-group.is-style-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wp-block-group.is-style-stats-grid > * {
	padding: 66px 16px 60px;
	border-right: 1px solid var(--wp--custom--on-dark--border);
	text-align: center;
}

.wp-block-group.is-style-stats-grid > :last-child {
	border-right: 0;
}

@media (max-width: 680px) {

	.wp-block-group.is-style-stats-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-group.is-style-stats-grid > * {
		padding: 40px 16px;
		border-right: 0;
		border-bottom: 1px solid var(--wp--custom--on-dark--border);
	}

	.wp-block-group.is-style-stats-grid > :last-child {
		border-bottom: 0;
	}
}

/* Why grid: two columns of numbered reasons with hairlines. */
.wp-block-group.is-style-why-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 54px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.wp-block-group.is-style-why-grid > * {
	padding: 34px 36px 34px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.wp-block-group.is-style-why-grid > :nth-child(odd) {
	padding-right: 48px;
	border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.wp-block-group.is-style-why-grid > :nth-child(even) {
	padding-left: 48px;
}

.is-style-why-grid .wp-block-heading {
	margin: 11px 0;
	font-size: clamp(1.3125rem, 2.3vw, 1.75rem);
}

.is-style-why-grid p {
	font-size: 0.9375rem;
	line-height: 1.6;
}

@media (max-width: 760px) {

	.wp-block-group.is-style-why-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-group.is-style-why-grid > *,
	.wp-block-group.is-style-why-grid > :nth-child(odd),
	.wp-block-group.is-style-why-grid > :nth-child(even) {
		padding: 28px 0;
		border-right: 0;
	}
}

/* Map embed shell. */
.wp-block-group.is-style-map-embed {
	height: 520px;
	margin-top: 40px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--bg-2);
}

.wp-block-group.is-style-map-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.is-style-section-dark .wp-block-group.is-style-map-embed {
	margin-top: 22px;
	border-color: var(--wp--custom--on-dark--border);
	height: 480px;
}

.ckk-contact-grid .wp-block-group.is-style-map-embed {
	height: 100%;
	min-height: 420px;
	margin-top: 0;
}

@media (max-width: 680px) {

	.wp-block-group.is-style-map-embed,
	.is-style-section-dark .wp-block-group.is-style-map-embed {
		height: 380px;
		margin-top: 28px;
	}
}

/* Stamp: the "Established 1987" badge over the about photo. */
.wp-block-group.is-style-stamp {
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 4;
	padding: 10px 14px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 5px;
	background: rgba(6, 18, 42, 0.35);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	color: #fff;
}

.is-style-stamp p:first-child {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.is-style-stamp p:last-child {
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.625rem;
	font-weight: 600;
	line-height: 1.1;
	color: #fff;
}

/* Page header: fixed-header offset plus the faint 12-column line grid. */
.wp-block-group.is-style-page-header {
	position: relative;
	overflow: hidden;
	padding-top: var(--wp--preset--spacing--header-offset);
}

.wp-block-group.is-style-page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.85;
	background-image: linear-gradient(to right, var(--wp--preset--color--line-soft) 1px, transparent 1px);
	background-size: calc(100% / 12) 100%;
	-webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 100%);
	mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 100%);
}

.wp-block-group.is-style-page-header > * {
	position: relative;
	z-index: 1;
}

.is-style-page-header h1.wp-block-post-title,
.is-style-page-header h1.wp-block-heading {
	margin-top: 16px;
}

.is-style-page-header .is-style-lede,
.is-style-page-header .wp-block-post-excerpt.is-style-lede {
	margin-top: 18px;
}

/* Breadcrumb: children separated by slashes, last one navy. */
.wp-block-group.is-style-crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 0.78125rem;
	font-weight: 500;
	color: var(--wp--preset--color--gray);
}

.is-style-crumb > * {
	margin: 0;
}

.is-style-crumb > * + *::before {
	content: "/";
	margin-right: 8px;
	opacity: 0.5;
}

.is-style-crumb > :last-child {
	color: var(--wp--preset--color--navy);
}

.is-style-crumb a {
	transition: color 0.3s var(--wp--custom--ease);
}

.is-style-crumb a:hover {
	color: var(--wp--preset--color--navy);
}

/*
 * A breadcrumb link is two or three short words at 12.5px, which is roughly a
 * 33x17 target. Padding it out on touch pointers keeps the trail looking the
 * same and makes it usable; the negative margin stops the extra height pushing
 * the hero copy down.
 */
@media (pointer: coarse) {

	.is-style-crumb a {
		display: inline-block;
		min-height: 24px;
		margin-block: -4px;
		padding-block: 4px;
	}
}

.is-style-crumb .wp-block-post-title,
.is-style-crumb .wp-block-post-terms {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	color: inherit;
}

.is-style-crumb > :last-child.wp-block-post-title {
	color: var(--wp--preset--color--navy);
}

.wp-block-cover .is-style-crumb {
	color: rgba(255, 255, 255, 0.7);
}

.wp-block-cover .is-style-crumb > :last-child,
.wp-block-cover .is-style-crumb > :last-child.wp-block-post-title,
.wp-block-cover .is-style-crumb a:hover {
	color: #fff;
}

/* News row: thumbnail beside the summary, hairline underneath. */

/*
 * `position: relative` is the containing block for the read-more link that
 * stretches over the whole row. It used to live in read-more.css, which meant
 * the row only became a positioning context when it happened to contain a
 * core/read-more block.
 */
.wp-block-group.is-style-news-row {
	position: relative;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	align-items: center;
	gap: 30px;
	padding: 30px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/*
 * core/post-featured-image renders nothing at all when a post has no thumbnail,
 * so the two-column grid would drop the whole story into the 300px thumbnail
 * column. Half the imported newsroom has no image yet (see the client
 * checklist), so the single-column fallback is the common case, not the edge.
 */
.wp-block-group.is-style-news-row:not(:has(.wp-block-post-featured-image)) {
	grid-template-columns: minmax(0, 1fr);
}

.is-style-news-row .wp-block-post-title {
	margin-bottom: 10px;
	font-size: 1.625rem;
	line-height: 1.12;
}

.ckk-news-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 13px;
	margin-bottom: 12px;
}

@media (max-width: 720px) {

	.wp-block-group.is-style-news-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* Contact row: label over value, hairline above all but the first. */
.wp-block-group.is-style-contact-row {
	display: flex;
	flex-direction: column;
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--line-soft);
}

.wp-block-group.is-style-contact-row:first-of-type {
	border-top: 0;
}

.is-style-contact-row .is-style-label {
	margin-bottom: 5px;
}

.is-style-contact-row p:not(.is-style-label) {
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	color: var(--wp--preset--color--navy);
}

/*
 * The phone number on the contact page is a tap-to-call link about 97x21. That
 * is the one link on the site most likely to be used from a phone, so it gets
 * a full-height target there.
 */
.is-style-contact-row a {
	display: inline-block;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--wp--preset--color--steel-faint);
}

@media (pointer: coarse) {

	.is-style-contact-row a {
		min-height: 44px;
		padding-block: 11px;
	}
}

/* The contact card and the invest panel's contact strip. */
.ckk-contact-card .wp-block-heading {
	margin-bottom: 18px;
	font-size: 1.5rem;
}

.ckk-contact-card .wp-block-buttons {
	margin-top: 20px;
}

.ckk-contact-strip {
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--wp--custom--on-dark--border);
}

.ckk-contact-strip .is-style-label {
	font-size: 0.65625rem;
	letter-spacing: 0.2em;
	color: var(--wp--custom--on-dark--faint);
}

.ckk-contact-strip p:not(.is-style-label) {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.1875rem;
	font-weight: 500;
	color: #fff;
}

.ckk-contact-strip a:hover {
	color: var(--wp--preset--color--steel-light);
}

.ckk-contact-strip .ckk-spread {
	margin-left: auto;
}

/* The footer bottom row. */
.wp-block-group.ckk-footer-bottom,
.ckk-footer-bottom {
	margin-top: 26px;
}

.ckk-footer-bottom p {
	font-size: 0.8125rem;
	color: var(--wp--custom--on-dark--faint);
}

/*
 * The privacy policy link. Underlined rather than left to colour alone: the
 * footer bottom row is already low-contrast text on navy, and a link there has
 * to be findable by someone looking for it.
 */
.ckk-footer-bottom .ckk-legal-links a {
	color: var(--wp--custom--on-dark--text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ckk-footer-bottom .ckk-legal-links a:hover {
	color: #fff;
}

.ckk-footer-bottom .ckk-established {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
}

.ckk-footer p {
	color: var(--wp--custom--on-dark--text);
}

.ckk-footer .ckk-footer-blurb {
	max-width: 32ch;
	margin-top: 18px;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

.ckk-footer .wp-block-heading {
	margin-bottom: 15px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel-light);
}

.ckk-footer .ckk-footer-office p {
	padding: 5px 0;
	font-size: 0.90625rem;
	color: rgba(255, 255, 255, 0.72);
}

.ckk-footer .ckk-footer-office a:hover {
	color: #fff;
}

.ckk-footer .ckk-footer-logo img {
	width: auto;
	height: 48px;
}

/*
 * A card for a property with no page of its own. It carries the same chrome as
 * its neighbours, so without this it offers a hover lift and a pointer for a
 * click that never goes anywhere. The card still has its enquiry button; what
 * goes away is the promise that the card itself is a link.
 */
.wp-block-group.ckk-property-card.is-unlinked {
	cursor: default;
}

.wp-block-group.ckk-property-card.is-unlinked:hover {
	transform: none;
	box-shadow: var(--wp--custom--shadow--card);
}

/*
 * The prose that opens a listing page. It sits between the tabs and the grid
 * and is the only body copy on these pages, so it gets a reading measure rather
 * than the full content width.
 *
 * The measures are on the children of the inner flow group, never on children
 * of the constrained one: core gives every constrained child
 * `margin-inline: auto !important`, so a narrower box there centres itself.
 */
.wp-block-group.ckk-listing-intro__body > p {
	max-width: var(--wp--custom--measure--prose);
	color: var(--wp--preset--color--gray-text);
}

/*
 * Wider than the section-title measure the display headings use. These are
 * questions rather than labels — "What space is available right now?" — and at
 * 16ch that one broke over three lines.
 */
.wp-block-group.ckk-listing-intro__body > h2 {
	max-width: 24ch;
	margin-bottom: 16px;
}

.wp-block-group.ckk-listing-intro__body > p + p {
	margin-top: 16px;
}

/*
 * Moved here from ckk-property.css, where it could only ever work by
 * accident: `section-tinted` is registered for core/group, but that
 * stylesheet is attached to the nine ckk/property-* blocks, so the style
 * only rendered on a group that happened to contain one of them.
 */
.wp-block-group.is-style-section-tinted {
	background: var(--wp--preset--color--bg-2);
}

/*
 * The city filter, now a block of its own rather than a pattern of navigation
 * links. The chips keep the pill look they had as `core/navigation` items; what
 * changed is that the markup is a plain list, so the active chip is marked with
 * `aria-current` and a class rather than by a render filter guessing from URLs.
 */

/*
 * The bar itself. This was a `core/group` with the `filter-bar` style and a
 * constrained layout inside it; as a block it gets neither for free, so both
 * are here. Without the first it lost its background and its hairlines, and
 * without the second the chips ran to the edges of the window while the cards
 * below them stayed in the column.
 */
.wp-site-blocks .wp-block-ckk-city-filter {
	position: sticky;
	top: 60px;
	z-index: 50;
	margin-top: 40px;
	padding:
		18px var(--wp--style--root--padding-right)
		18px var(--wp--style--root--padding-left);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--bg);
}

.wp-block-ckk-city-filter .ckk-city-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-ckk-city-filter .ckk-result-count {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--wp--preset--color--gray);
}

/*
 * On a phone the bar wraps onto more than one row, and staying stuck there took
 * a third of the viewport permanently. It scrolls with the page at that size.
 */
@media (max-width: 680px) {

	.wp-site-blocks .wp-block-ckk-city-filter {
		position: static;
		top: auto;
		margin-top: 24px;
		padding-top: 14px;
		padding-bottom: 14px;
	}
}

.ckk-city-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ckk-city-filter__chip {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--gray-text);
	transition:
		background 0.3s var(--wp--custom--ease),
		border-color 0.3s var(--wp--custom--ease),
		color 0.3s var(--wp--custom--ease);
}

.ckk-city-filter__chip:hover {
	border-color: var(--wp--preset--color--steel);
	color: var(--wp--preset--color--navy);
}

.ckk-city-filter__chip.is-current {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: #fff;
}

@media (pointer: coarse) {

	.ckk-city-filter__chip {
		min-height: 44px;
		padding-block: 11px;
	}
}