/*
 * Content components. Cards are not cards: a photograph plus a hairline-topped
 * caption, a rule and a title, a star row and a quote. No fills, no borders,
 * no shadows; separation comes from hairlines, photography and air.
 */

/* ---------- Product card (pm/product-card) and post cards ---------- */

/* A card fills its grid row, with its link at the foot, so the links line
   up along a row whatever text the cards above them carry. */
.pm-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.pm-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--surface-deep);
}

.pm-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 900ms var(--ease-out);
}

a.pm-card:hover .pm-card__media img,
.pm-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.06);
}

/* The photo catches a glint on hover. */
.pm-card__media::before,
.pm-post-card .wp-block-post-featured-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(189, 238, 255, 0.18) 48%, rgba(255, 255, 255, 0.28) 50%, rgba(189, 238, 255, 0.18) 52%, transparent 62%);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	background-position: -140% 0;
	opacity: 0;
}

a.pm-card:hover .pm-card__media::before,
.pm-post-card:hover .wp-block-post-featured-image::before {
	opacity: 1;
	animation: pm-glint 900ms var(--ease-out) both;
}

.pm-card__meta {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: 8px 12px;
	background: var(--surface-brand);
	color: var(--white);
	font-size: var(--fs-caption);
	font-weight: 600;
	transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}

a.pm-card:hover .pm-card__meta {
	background: var(--sky-200);
	color: var(--blue-800);
}

.pm-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	margin-top: var(--space-5);
	padding-top: var(--space-5);
	border-top: 2px solid var(--border-default);
	transition: border-color var(--dur-2) var(--ease-out);
}

a.pm-card:hover .pm-card__body {
	border-top-color: var(--sky-200);
}

.pm-card__title {
	margin: 0;
	color: var(--white);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pm-card__text {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--fs-small);
	line-height: 1.6;
	opacity: 0.78;
}

.pm-card__body > :has(+ .pm-card__cta) {
	margin-bottom: var(--space-5);
}

.pm-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	color: var(--sky-200);
	font-size: var(--fs-caption);
	font-weight: 600;
}

.pm-card__cta span {
	transition: transform var(--dur-2) var(--ease-out);
}

a.pm-card:hover .pm-card__cta span {
	transform: translateX(5px);
}

/* Posts in a query loop share the card's look. */
.pm-post-card {
	position: relative;
}

.pm-post-card .wp-block-post-featured-image {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--surface-deep);
}

.pm-post-card .wp-block-post-featured-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	transition: transform 900ms var(--ease-out);
}

.pm-post-card .wp-block-post-title {
	margin: var(--space-5) 0 0;
	padding-top: var(--space-5);
	border-top: 2px solid var(--border-default);
	font-size: var(--fs-h4);
	line-height: 1.2;
	transition: border-color var(--dur-2) var(--ease-out);
}

.pm-post-card:hover .wp-block-post-title {
	border-top-color: var(--sky-200);
}

.pm-post-card .wp-block-post-title a {
	color: var(--white);
	text-decoration: none;
}

/* The whole card is clickable through the title link. */
.pm-post-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.pm-post-card .wp-block-post-excerpt,
.pm-post-card .wp-block-post-date {
	margin-top: var(--space-3);
	font-size: var(--fs-small);
	opacity: 0.78;
}

.pm-post-card .wp-block-post-excerpt__more-text {
	margin-top: var(--space-4);
}

.pm-post-card .wp-block-read-more,
.pm-post-card .wp-block-post-excerpt__more-link {
	color: var(--sky-200);
	font-size: var(--fs-caption);
	font-weight: 600;
	text-decoration: none;
}

.pm-heading + .wp-block-query {
	margin-top: var(--space-12);
}

.wp-block-query-pagination {
	margin-top: var(--space-12);
	gap: var(--space-4);
	font-size: var(--fs-caption);
}

/* ---------- Feature column ---------- */

.is-style-feature {
	display: grid;
	gap: var(--space-4);
	align-content: start;
	padding-top: var(--space-5);
	border-top: 2px solid var(--sky-200);
}

.is-style-feature > * {
	margin: 0 !important;
}

.is-style-feature > .wp-block-heading {
	color: var(--white);
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.3;
}

/* ---------- Proof row (pm/proof-row) ---------- */

.pm-proof {
	color: var(--text-on-tint);
}

.pm-proof__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
	margin: 0;
	padding: var(--space-4) 0;
	list-style: none;
}

.pm-proof__item {
	display: grid;
	gap: var(--space-3);
	margin: 0;
	padding: var(--space-10) var(--space-6) var(--space-10) 0;
	border-right: 1px solid var(--border-on-tint);
}

.pm-proof__item:last-child {
	border-right: 0;
}

.pm-proof__figure {
	font-size: var(--fs-numeral);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.pm-proof__label {
	font-size: var(--fs-caption);
	opacity: 0.72;
}

@media (max-width: 600px) {

	.pm-proof__list {
		grid-template-columns: 1fr 1fr;
	}

	.pm-proof__item {
		padding: var(--space-6) var(--space-4) var(--space-6) 0;
	}

	.pm-proof__item:nth-child(2n) {
		border-right: 0;
		padding-left: var(--space-4);
	}

	.pm-proof__item:nth-child(-n + 2) {
		border-bottom: 1px solid var(--border-on-tint);
	}
}

/* ---------- Reviews (pm/review-strip) ---------- */

.pm-reviews__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	margin: 0 0 var(--space-10);
	font-size: var(--fs-small);
}

.pm-stars {
	color: var(--star-gold);
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 1;
}

.pm-reviews__list {
	display: grid;
	gap: clamp(24px, 4vw, 64px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-reviews__list > li {
	margin: 0;
}

.pm-review {
	display: grid;
	gap: var(--space-5);
	align-content: start;
	margin: 0;
	padding: var(--space-5) 0 0;
	border: 0;
	border-top: 2px solid var(--sky-200);
}

.pm-review__text {
	margin: 0;
	font-size: var(--fs-lead);
	line-height: 1.5;
}

.pm-review__by {
	font-size: var(--fs-small);
	opacity: 0.72;
}

.pm-review__by cite {
	font-style: normal;
}

.pm-reviews__attribution {
	margin-top: var(--space-8);
	font-family: Roboto, Arial, sans-serif;
	font-size: 12px;
	opacity: 0.8;
}

/* ---------- Logo wall (gallery.is-style-logos) ---------- */

/* Six across, four on tablets, three on phones; a short last row sits
   centred. Cards stay near the logo files' own size (most are 150 to 350px
   wide), so logos are not blown up past their detail. */
.wp-block-gallery.is-style-logos {
	--logo-cols: 6;
	--logo-gap: clamp(10px, 1.2vw, 16px);
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--logo-gap) !important;
}

@media (max-width: 1100px) {

	.wp-block-gallery.is-style-logos {
		--logo-cols: 4;
	}
}

@media (max-width: 600px) {

	.wp-block-gallery.is-style-logos {
		--logo-cols: 3;
	}
}

.wp-block-gallery.is-style-logos > .wp-block-image {
	position: relative;
	flex: 0 0 calc((100% - (var(--logo-cols) - 1) * var(--logo-gap)) / var(--logo-cols)) !important;
	width: auto !important;
	margin: 0 !important;
	aspect-ratio: 16 / 10;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: clamp(10px, 1.6vw, 24px);
	overflow: hidden;
	background: #fff;
	outline: 2px solid transparent;
	outline-offset: 4px;
	transition: transform var(--dur-3) var(--ease-out), outline-color var(--dur-2) var(--ease-out);
}

.wp-block-gallery.is-style-logos > .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	transform: scale(var(--logo-scale, 1));
	transition: transform var(--dur-3) var(--ease-out);
}

.wp-block-gallery.is-style-logos > .wp-block-image:hover {
	transform: translateY(-4px);
	outline-color: var(--sky-200);
}

.wp-block-gallery.is-style-logos > .wp-block-image:hover img {
	transform: scale(calc(var(--logo-scale, 1) * 1.04));
}

.wp-block-gallery.is-style-logos > .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 38%, rgba(84, 189, 237, 0.22) 50%, transparent 62%);
	background-size: 260% 100%;
	background-repeat: no-repeat;
	background-position: -140% 0;
}

.wp-block-gallery.is-style-logos > .wp-block-image:hover::after {
	animation: pm-glint 800ms var(--ease-out) both;
}

/* Some supplied logo files carry wide margins; these trim them. */
.pm-logo-scale-17 {
	--logo-scale: 1.7;
}

.pm-logo-scale-135 {
	--logo-scale: 1.35;
}

.pm-logo-scale-22 {
	--logo-scale: 2.2;
}

/* ---------- Swatches (gallery.is-style-swatches) ---------- */

.wp-block-gallery.is-style-swatches {
	display: grid !important;
	gap: var(--space-6) !important;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.wp-block-gallery.is-style-swatches > .wp-block-image {
	display: grid !important;
	gap: var(--space-3);
	width: auto !important;
	margin: 0 !important;
	cursor: pointer;
}

.wp-block-gallery.is-style-swatches > .wp-block-image img {
	width: 100% !important;
	height: auto !important;
	flex: none !important;
	aspect-ratio: 1 / 1;
	object-fit: cover !important;
	outline: 1px solid var(--border-on-tint);
	outline-offset: 0;
	transition: transform var(--dur-2) var(--ease-curtain), outline-offset var(--dur-2) var(--ease-curtain);
}

.wp-block-gallery.is-style-swatches > .wp-block-image:hover img {
	transform: translateY(-4px);
}

.wp-block-gallery.is-style-swatches > .wp-block-image.is-selected img {
	outline: 2px solid var(--sky-200);
	outline-offset: 5px;
	transform: none;
}

/* Core blurs a band behind captions laid over the image, and the glint
   would cross the caption too; these captions sit below the swatch. */
.wp-block-gallery.is-style-swatches > .wp-block-image::before,
.wp-block-gallery.is-style-swatches > .wp-block-image::after {
	display: none !important;
}

.wp-block-gallery.is-style-swatches figcaption.wp-element-caption {
	position: static !important;
	justify-self: stretch;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;

	/* Core reserves a scrollbar gutter on both sides of gallery captions. */
	scrollbar-gutter: auto !important;
	text-shadow: none !important;
	background: none !important;
	color: currentcolor !important;
	font-size: var(--fs-caption) !important;
	text-align: left !important;
	opacity: 0.78;
	max-height: none !important;

	/* Core gives every gallery caption a GPU layer of its own, for the blur
	   band these captions don't use: one per swatch, all for nothing. */
	will-change: auto !important;
}

.wp-block-gallery.is-style-swatches > .wp-block-image.is-selected figcaption {
	opacity: 1;
}

/* ---------- Tabs (core/tabs) ---------- */

.wp-block-tabs .wp-block-tab-list,
.wp-block-tabs [role="tablist"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0 0 var(--space-8);
	padding: 0;
	border: 0;
}

.wp-block-tabs [role="tab"] {
	min-height: 42px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 0;
	background: transparent;
	color: var(--white);
	font-family: inherit;
	font-size: var(--fs-small);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.wp-block-tabs [role="tab"]:hover,
.wp-block-tabs [role="tab"][aria-selected="true"] {
	background: var(--sky-200);
	border-color: var(--sky-200);
	color: var(--black);
}

/* ---------- FAQ (core/accordion) ---------- */

.wp-block-accordion {
	border-top: 2px solid var(--sky-200);
}

.wp-block-accordion-item {
	margin: 0 !important;
	border-bottom: 1px solid var(--border-on-tint);
}

.wp-block-accordion-heading {
	margin: 0 !important;
	font-size: var(--fs-h4) !important;
}

.wp-block-accordion-heading__toggle {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-5);
	width: 100%;
	padding: var(--space-6) 0 !important;
	border: 0;
	background: none;
	color: var(--white);
	font-family: inherit;
	font-size: var(--fs-h4);
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: color var(--dur-1) var(--ease-out);
}

.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
	color: var(--sky-200);
}

/* The caret is drawn with two 1px rules and turns into a cross. */
.wp-block-accordion-heading__toggle-icon {
	position: relative;
	flex: none;
	align-self: center;
	width: 12px;
	height: 12px;
	font-size: 0 !important;
	color: currentcolor;
	transition: transform var(--dur-2) var(--ease-out);
}

.wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion-heading__toggle-icon::after {
	content: "";
	position: absolute;
	background: currentcolor;
}

.wp-block-accordion-heading__toggle-icon::before {
	top: 5px;
	left: 0;
	width: 12px;
	height: 1px;
}

.wp-block-accordion-heading__toggle-icon::after {
	top: 0;
	left: 5px;
	width: 1px;
	height: 12px;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	transform: rotate(135deg);
}

.wp-block-accordion-panel {
	padding: 0 0 var(--space-6) !important;
}

.wp-block-accordion-panel > * {
	max-width: 46em;
}

.wp-block-accordion-panel > * + * {
	margin-top: var(--space-4);
}

/* ---------- Hairline rows (lists of links: areas, brochures) ---------- */

.wp-block-list.is-style-rows {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--border-on-tint);
}

.wp-block-list.is-style-rows > li {
	margin: 0;
	border-bottom: 1px solid var(--border-on-tint);
}

.wp-block-list.is-style-rows > li > a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	color: currentcolor;
	font-weight: 500;
	text-decoration: none;
	transition: color var(--dur-1) var(--ease-out);
}

.wp-block-list.is-style-rows > li > a::after {
	content: "→";
	opacity: 0.7;
	transition: transform var(--dur-2) var(--ease-out);
}

.wp-block-list.is-style-rows > li > a:hover {
	color: var(--sky-200);
}

.wp-block-list.is-style-rows > li > a:hover::after {
	transform: translateX(4px);
}

.wp-block-list.is-style-ticks {
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-ticks > li {
	position: relative;
	padding-left: 28px;
}

.wp-block-list.is-style-ticks > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--sky-200);
	border-bottom: 2px solid var(--sky-200);
	transform: rotate(-45deg);
}

/* ---------- Outlined panel (brochure download box) ---------- */

.is-style-panel {
	padding: var(--space-6);
	border: 1px solid var(--border-on-tint);
	background: rgba(0, 0, 0, 0.28);
}

.pm-brochure__title {
	margin: 0;
	color: var(--white);
	font-size: var(--fs-h4);
	font-weight: 600;
}

.pm-brochure__meta {
	margin: 4px 0 0 !important;
	font-size: var(--fs-caption);
	opacity: 0.8;
}

/* Brochure list rows on the brochures page. */
.pm-brochure-row {
	padding-block: var(--space-6);
	border-bottom: 1px solid var(--border-default);
	gap: var(--space-4) var(--space-6);
}

.pm-brochure-row:first-child {
	border-top: 1px solid var(--border-default);
}

.pm-brochure-row .wp-block-image {
	margin: 0;
	width: 96px;
	flex: none;
	background: #fff;
	padding: 8px;
}

.pm-brochure-row .wp-block-image img {
	aspect-ratio: 16 / 10;
	object-fit: contain;
}

.pm-brochure-row .pm-brochure__text {
	flex: 1 1 12em;
}

.pm-brochure-row .wp-block-buttons {
	margin-left: auto;
}

/* ---------- Contact details (pm/contact-details) ---------- */

.pm-details {
	margin: 0;
	border-top: 1px solid var(--border-default);
}

.pm-details__row {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: var(--space-6);
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--border-default);
}

.pm-details dt {
	font-size: var(--fs-caption);
	color: var(--text-muted);
}

.pm-details dd {
	margin: 0;
	line-height: 1.5;
}

@media (max-width: 480px) {

	.pm-details__row {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}
}

/* ---------- Call to action band (cover.is-style-cta-band) ---------- */

.wp-block-cover.is-style-cta-band {
	position: relative;
	min-height: 0;
	padding: var(--space-section) var(--gutter);
	background: var(--surface-brand-deep);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pm-fade));
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pm-fade));
}

.wp-block-cover.is-style-cta-band .wp-block-cover__image-background {
	opacity: 0.32;
}

.wp-block-cover.is-style-cta-band .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(90deg, var(--blue-800) 10%, rgba(4, 54, 84, 0.6) 100%) !important;
}

.wp-block-cover.is-style-cta-band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--pm-fade);
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, var(--surface-page), transparent);
}

/* On the page backdrop (motion.js), the band's deep blue comes from the
   backdrop: the band paints no ground of its own, and its photograph and
   blue overlay rise out of the backdrop at the top and sink back into it at
   the bottom, so there is no edge where the band starts or ends. */
:is(.pm-flow, .is-root-container):has(> .pm-flow__light) .wp-block-cover.is-style-cta-band {
	background: transparent;
	-webkit-mask-image: none;
	mask-image: none;
}

:is(.pm-flow, .is-root-container):has(> .pm-flow__light) .wp-block-cover.is-style-cta-band::after {
	display: none;
}

:is(.pm-flow, .is-root-container):has(> .pm-flow__light) .wp-block-cover.is-style-cta-band :is(.wp-block-cover__image-background, .wp-block-cover__background) {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%, #000 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 55%, #000 70%, transparent 100%);
}

.wp-block-cover.is-style-cta-band .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: calc(var(--container-max) - var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: 0;
}

.pm-cta-band__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--space-10);
	align-items: end;
}

.pm-cta-band__grid h2 {
	margin: 0;
	max-width: 20em;
	color: var(--white);
}

.pm-cta-band__grid p {
	margin-top: var(--space-6);
	max-width: 30em;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.pm-cta-band__grid .wp-block-buttons {
	display: grid;
	gap: var(--space-3);
	justify-items: stretch;
}

.pm-cta-band__grid .wp-block-button,
.pm-cta-band__grid .wp-block-button__link {
	width: 100%;
}

.pm-cta-band__fanlight {
	display: none;
}

/* ---------- Article (single post, legal) ---------- */

.pm-article > .wp-block-heading,
.pm-article .wp-block-post-content > h2 {
	margin: var(--space-12) 0 var(--space-5);
	font-size: var(--fs-h3);
	line-height: 1.3;
}

.pm-article .wp-block-post-content > h3 {
	margin: var(--space-8) 0 var(--space-3);
	color: var(--sky-200);
	font-size: var(--fs-h4);
	line-height: 1.35;
}

.pm-article .wp-block-post-content > p,
.pm-article .wp-block-post-content > ul,
.pm-article .wp-block-post-content > ol {
	max-width: 38em;
}

.pm-article .wp-block-post-content > p:first-child {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--white);
}

.pm-article .wp-block-post-content > .wp-block-image {
	margin-block: var(--space-12);
}

.pm-article .wp-block-post-content > .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ---------- Gallery (product photos) ---------- */

.wp-block-gallery.pm-photos {
	gap: clamp(12px, 2vw, 24px) !important;
}

.wp-block-gallery.pm-photos > .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------- Editor-only notes for invisible blocks ---------- */

.pm-editor-note {
	padding: var(--space-4);
	border: 1px dashed var(--line-2);
	font-size: var(--fs-caption);
	color: var(--text-muted);
}

/* ---------- Brand (single pm_brand) ---------- */

.pm-brand-logo {
	width: min(320px, 100%);
	padding: clamp(16px, 2.2vw, 30px);
	background: #fff;
}

.pm-brand-logo img {
	display: block;
	width: 100% !important;
	height: auto;
}