/* ==========================================================================
   amm/grid – layout container (editor + frontend)
   ========================================================================== */

@import url("../../public/css/amm-section-intro.css");

.wp-block-amm-grid {
	--amm-grid-gap-sm: 0.5rem;
	--amm-grid-gap-md: 1rem;
	--amm-grid-gap-lg: 1.5rem;
	--amm-grid-gap-none: 0;
	--amm-grid-inline-padding: 1rem;
	--amm-grid-carousel-arrow-size: 56px;
	box-sizing: border-box;
}

.wp-block-amm-grid .amm-grid__content {
	width: 100%;
	background: var(--amm-grid-content-bg, transparent);
}

.wp-block-amm-grid .amm-grid__intro {
	margin-bottom: 1.5rem;
}

.wp-block-amm-grid .amm-grid__viewport {
	width: 100%;
}

.wp-block-amm-grid .amm-grid__inner {
	display: grid;
	gap: var(--amm-grid-gap-md);
	grid-template-columns: repeat(var(--amm-grid-cols-mobile, 1), minmax(0, 1fr));
	width: 100%;
	align-items: stretch;
}

/* Gap */
.wp-block-amm-grid.has-gap-none .amm-grid__inner { gap: var(--amm-grid-gap-none); }
.wp-block-amm-grid.has-gap-sm .amm-grid__inner { gap: var(--amm-grid-gap-sm); }
.wp-block-amm-grid.has-gap-md .amm-grid__inner { gap: var(--amm-grid-gap-md); }
.wp-block-amm-grid.has-gap-lg .amm-grid__inner { gap: var(--amm-grid-gap-lg); }

/* Width */
/* Fill the parent up to wide-size (without width:100%, flex/grid parents can shrink-wrap the block). */
.wp-block-amm-grid.is-width-contained {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	--amm-grid-inline-padding: clamp(20px, 5vw, 100px);
	padding-left: var(--amm-grid-inline-padding);
	padding-right: var(--amm-grid-inline-padding);
}

.wp-block-amm-grid.is-width-full {
	width: 100%;
	padding-left: var(--amm-grid-inline-padding);
	padding-right: var(--amm-grid-inline-padding);
}

.wp-block-amm-grid.is-width-banner {
	width: calc(100vw - (100vw - 100%));
	max-width: calc(100vw - (100vw - 100%));
	margin-left: calc(50% - 50vw + (100vw - 100%) / 2);
	margin-right: calc(50% - 50vw + (100vw - 100%) / 2);
	--amm-grid-inline-padding: 0px;
	padding-left: var(--amm-grid-inline-padding);
	padding-right: var(--amm-grid-inline-padding);
}

/* Banner: full-bleed track, but intro aligns with theme content (same as contained). */
.wp-block-amm-grid.is-width-banner .amm-grid__intro {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 5vw, 100px);
	padding-right: clamp(20px, 5vw, 100px);
	box-sizing: border-box;
	width: 100%;
}

.wp-block-amm-grid .amm-grid__footnote {
	margin: 2rem 0 0;
	text-align: center;
}

@media (min-width: 1024px) {
	.wp-block-amm-grid .amm-grid__footnote {
		font-size: calc(18px * var(--amm-type-scale-desktop, 1));
	}
}

.wp-block-amm-grid.is-width-banner .amm-grid__footnote {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 5vw, 100px);
	padding-right: clamp(20px, 5vw, 100px);
	box-sizing: border-box;
	width: 100%;
}

/* Responsive columns */
@media (min-width: 600px) {
	.wp-block-amm-grid .amm-grid__inner {
		grid-template-columns: repeat(var(--amm-grid-cols-tablet, 2), minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.wp-block-amm-grid .amm-grid__inner {
		grid-template-columns: repeat(var(--amm-grid-cols-desktop, 3), minmax(0, 1fr));
	}
}

/* Equal-height rows: stretch cards. Use a descendant combinator so the block editor (extra wrappers
   between .amm-grid__inner and .wp-block-amm-card) still gets height: 100% like the frontend. */
.wp-block-amm-grid .amm-grid__inner > .wp-block-amm-icon,
.wp-block-amm-grid .amm-grid__inner > .wp-block-amm-text {
	height: 100%;
	min-width: 0;
}

/* Standard / image: allow shrinking below min-content so text can clip; icon needs auto min-width so tracks stay column-wide. */
.wp-block-amm-grid .amm-grid__inner .wp-block-amm-card:not(.amm-card--layout-icon) {
	min-width: 0;
}

.wp-block-amm-grid .amm-grid__inner .wp-block-amm-card:not(.amm-card--layout-image):not(.amm-card--layout-video) {
	height: 100%;
}

/*
 * Image cards: content-sized height so the hero can establish row height (avoids 0-height collapse).
 */
.wp-block-amm-grid .amm-grid__inner .wp-block-amm-card.amm-card--layout-image,
.wp-block-amm-carousel .amm-grid__inner .wp-block-amm-card.amm-card--layout-image,
.wp-block-amm-grid .amm-grid__inner .wp-block-amm-card.amm-card--layout-video,
.wp-block-amm-carousel .amm-grid__inner .wp-block-amm-card.amm-card--layout-video {
	height: auto;
	align-self: stretch;
}

/* ==========================================================================
   Carousel mode
   ========================================================================== */

.wp-block-amm-grid.is-carousel-enabled {
	position: relative;
	overflow: hidden;
}

.wp-block-amm-grid.is-carousel-enabled .amm-grid__viewport {
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

.wp-block-amm-grid.is-carousel-enabled .amm-grid__inner {
	display: flex;
	gap: var(--amm-grid-gap-md);
	overflow: visible;
	will-change: transform;
	scrollbar-width: none;
	-ms-overflow-style: none;
	touch-action: pan-y;
}

.wp-block-amm-grid.is-carousel-enabled .amm-grid__inner::-webkit-scrollbar {
	display: none;
}

.wp-block-amm-grid.is-carousel-enabled .amm-grid__inner > * {
	flex: 0 0 auto;
	width: 100%;
	transition: transform 220ms ease, opacity 220ms ease;
}

/* Slides print their own block spacing inline (amm/blog-card defaults to 60px
   top and bottom); inside a track that is dead space above and below the card,
   so drop it. !important because the spacing is an inline style. Carousel only:
   between stacked cells of a static grid that spacing is the intended rhythm. */
.wp-block-amm-grid.is-carousel-enabled .amm-grid__inner > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* amm/blog-card is a full-width row whose two columns only stack at a viewport
   of 1024px or less: in any multi-column grid at a desktop width its 320px media
   minimum eats the cell and the content column computes to 0, wrapping the copy
   one character per line. Making the cell a size container lets the card stack
   on the cell's own width instead of the window's. Scoped to the cells that hold
   a blog card, carousel or not, because containing every grid child would change
   layout for the icon, card and text blocks that have always been in these grids. */
.wp-block-amm-grid .amm-grid__inner > .wp-block-amm-blog-card {
	container-type: inline-size;
}

/* The row layout needs the 320px media minimum, the 32px gap and a readable
   content column, so it stops being viable somewhere below 700px. */
@container (max-width: 699px) {
	.wp-block-amm-grid .amm-blog-card,
	.wp-block-amm-grid .amm-blog-card--reverse {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-amm-grid .amm-blog-card--reverse .amm-blog-card__media,
	.wp-block-amm-grid .amm-blog-card--reverse .amm-blog-card__callout {
		order: -1;
	}
}

/* view.js wraps the viewport in this so the arrows centre on the slide track;
   centred on the block itself they ride up over the intro heading and label bar. */
.wp-block-amm-grid .amm-grid-carousel__stage {
	position: relative;
}

.wp-block-amm-grid .amm-grid-carousel__nav {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	/* The stage already sits inside the block's inline padding. */
	padding: 0;
	z-index: 2;
}

.wp-block-amm-grid .amm-grid-carousel__arrow {
	width: var(--amm-grid-carousel-arrow-size);
	height: var(--amm-grid-carousel-arrow-size);
	border: 1px solid #f3f4f6;
	border-radius: 50%;
	background: #fff;
	color: var(--amm-palette-primary-1-90, #1a6872);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	pointer-events: auto;
	font-size: 1.75rem;
	line-height: 1;
	padding: 0;
}

@media (max-width: 767px) {
	.wp-block-amm-grid .amm-grid-carousel__nav {
		display: none;
	}
}

.wp-block-amm-grid .amm-grid-carousel__indicators {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 60px;
}

.wp-block-amm-grid .amm-grid-carousel__indicator {
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 999px;
	background: var(--amm-palette-primary-1-30, #b2cdd0);
	cursor: pointer;
	padding: 0;
	transition: width 220ms ease, background-color 220ms ease;
}

.wp-block-amm-grid .amm-grid-carousel__indicator.is-active {
	width: 87px;
	background: var(--amm-palette-primary-1-90, #1a6872);
}

.wp-block-amm-grid .amm-grid-carousel__arrow:focus-visible,
.wp-block-amm-grid .amm-grid-carousel__indicator:focus-visible,
.wp-block-amm-grid .amm-grid-carousel__label:focus-visible {
	outline: 2px solid var(--amm-palette-primary-1, #005762);
	outline-offset: 3px;
}

.wp-block-amm-grid.has-carousel-feature-focus .amm-grid__inner > *.is-feature-focus-single {
	transform: scale(1.08);
	transform-origin: center center;
	z-index: 1;
}

.wp-block-amm-grid.has-carousel-feature-focus .amm-grid__inner > *.is-feature-focus-left {
	transform: scale(1.06);
	transform-origin: right center;
	z-index: 1;
}

.wp-block-amm-grid.has-carousel-feature-focus .amm-grid__inner > *.is-feature-focus-right {
	transform: scale(1.06);
	transform-origin: left center;
	z-index: 1;
}

/* ==========================================================================
   Background image (full bleed) – cards sit on top via --amm-card-bg opacity
   ========================================================================== */

.wp-block-amm-grid.has-background-image,
.wp-block-amm-grid.has-background-color {
	position: relative;
	isolation: isolate;
}

/* The full-bleed layer extends past the wrapper; the carousel's overflow clip lives on the viewport. */
.wp-block-amm-grid.has-background-image.is-carousel-enabled,
.wp-block-amm-grid.has-background-color.is-carousel-enabled {
	overflow: visible;
}

.wp-block-amm-grid .amm-grid__bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	overflow: hidden;
	z-index: -1;
	pointer-events: none;
}

.wp-block-amm-grid .amm-grid__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: none;
}

/* Optional colour overlay on the background image (multiply, same as the stats band). */
.wp-block-amm-grid .amm-grid__bg-overlay {
	position: absolute;
	inset: 0;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* The 100vw layer includes the scrollbar gutter; clip so it never causes sideways scrolling. */
body:has(.wp-block-amm-grid.has-background-image),
body:has(.wp-block-amm-grid.has-background-color) {
	overflow-x: clip;
}

/* Intro text sits on the photo, so use the light colours. */
.wp-block-amm-grid.has-background-image .amm-grid__intro .amm-section-intro {
	--amm-section-intro-heading-color: #fff;
	--amm-section-intro-accent-color: #fff;
	--amm-section-intro-eyebrow-color: #fff;
	--amm-section-intro-description-color: #fff;
}

/* The block's own spacing is an inline style (often 0), so the room under the content comes from the inner wrapper instead. */
.wp-block-amm-grid.has-background-image .amm-grid__content,
.wp-block-amm-grid.has-background-color .amm-grid__content {
	padding-bottom: 60px;
}

@media (max-width: 599px) {
	.wp-block-amm-grid.has-background-image .amm-grid__content,
	.wp-block-amm-grid.has-background-color .amm-grid__content {
		padding-bottom: 40px;
	}
}

/* Intro alignment (heading + description). Left is the default and needs no rule. */
.wp-block-amm-grid.has-intro-align-center .amm-grid__intro,
.wp-block-amm-grid.has-intro-align-center .amm-grid__intro .amm-section-intro {
	text-align: center;
}

.wp-block-amm-grid.has-intro-align-right .amm-grid__intro,
.wp-block-amm-grid.has-intro-align-right .amm-grid__intro .amm-section-intro {
	text-align: right;
}

.wp-block-amm-grid.has-intro-align-center .amm-grid__intro .amm-section-intro__description,
.wp-block-amm-grid.has-intro-align-center .amm-grid__intro .amm-section-intro__description * {
	margin-left: auto;
	margin-right: auto;
}

.wp-block-amm-grid.has-intro-align-right .amm-grid__intro .amm-section-intro__description,
.wp-block-amm-grid.has-intro-align-right .amm-grid__intro .amm-section-intro__description * {
	margin-left: auto;
}

/* Set on the heading and description themselves so theme heading rules can't win. */
.wp-block-amm-grid.has-intro-align-center .amm-grid__intro .amm-section-intro__heading,
.wp-block-amm-grid.has-intro-align-center .amm-grid__intro .amm-section-intro__description {
	text-align: center;
}

.wp-block-amm-grid.has-intro-align-right .amm-grid__intro .amm-section-intro__heading,
.wp-block-amm-grid.has-intro-align-right .amm-grid__intro .amm-section-intro__description {
	text-align: right;
}

.wp-block-amm-grid.has-links-inline .amm-card__ctas {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--amm-grid-link-align, flex-end);
}

.wp-block-amm-grid.has-links-inline .amm-card__ctas .amm-card__cta {
  align-self: auto;
}

.wp-block-amm-grid.has-link-width .amm-card__ctas .amm-card__cta {
  box-sizing: border-box;
  width: calc(var(--amm-grid-link-pct) * 1%);
  max-width: 100%;
  justify-content: center;
  text-align: center;
}

.wp-block-amm-grid.has-links-inline.has-link-width .amm-card__ctas {
  flex-wrap: nowrap;
  width: calc(var(--amm-grid-link-pct) * 1%);
  max-width: 100%;
  align-self: var(--amm-grid-link-align, flex-end);
}

.wp-block-amm-grid.has-links-inline.has-link-width .amm-card__ctas .amm-card__cta {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.wp-block-amm-grid.has-background-image .amm-grid__footnote {
	--amm-body-text-color: #fff;
}

/* Colour background set to light text (set automatically for dark colours): same light intro and footnote as on a photo. */
.wp-block-amm-grid.has-background-color.has-background-light-text .amm-grid__intro .amm-section-intro {
	--amm-section-intro-heading-color: #fff;
	--amm-section-intro-accent-color: #fff;
	--amm-section-intro-eyebrow-color: #fff;
	--amm-section-intro-description-color: #fff;
}

.wp-block-amm-grid.has-background-color.has-background-light-text .amm-grid__footnote {
	--amm-body-text-color: #fff;
}

/* Image background set to dark text (for a light photo): restore the normal intro and footnote colours. */
.wp-block-amm-grid.has-background-image.has-background-dark-text .amm-grid__intro .amm-section-intro {
	--amm-section-intro-heading-color: var(--amm-palette-primary-2, var(--amm-text-primary-color, #1e1e1e));
	--amm-section-intro-accent-color: var(--amm-palette-primary-1, #005762);
	--amm-section-intro-eyebrow-color: var(--amm-palette-primary-1, #005762);
	--amm-section-intro-description-color: var(--amm-text-secondary-color, #757575);
}

.wp-block-amm-grid.has-background-image.has-background-dark-text .amm-grid__footnote {
	--amm-body-text-color: initial;
}
/* Carousel label selectors (carouselSelectorStyle: labels | both). */
.wp-block-amm-grid .amm-grid-carousel__labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(32px, 4vw, 60px);
	margin: 0 0 48px;
}

.wp-block-amm-grid.has-carousel-labels-below .amm-grid-carousel__labels {
	margin: 48px 0 0;
}

.wp-block-amm-grid.has-carousel-labels-left .amm-grid-carousel__labels {
	justify-content: flex-start;
}

.wp-block-amm-grid.has-carousel-labels-right .amm-grid-carousel__labels {
	justify-content: flex-end;
}

.wp-block-amm-grid .amm-grid-carousel__label {
	position: relative;
	padding: 0 0 12px;
	border: 0;
	background: transparent;
	color: var(--amm-palette-primary-1, #005762);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	/* 0.65 computes to 3.4:1 on the panel tint; 0.78 clears AA at 4.6:1. */
	opacity: 0.78;
	cursor: pointer;
	transition: opacity 220ms ease;
}

.wp-block-amm-grid .amm-grid-carousel__label.is-active {
	opacity: 1;
}

.wp-block-amm-grid .amm-grid-carousel__label::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--amm-palette-primary-1, #005762);
	transform: scaleX(0);
	transition: transform 300ms ease;
}

.wp-block-amm-grid .amm-grid-carousel__label.is-active::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-amm-grid.is-carousel-enabled .amm-grid__inner > *,
	.wp-block-amm-grid .amm-grid-carousel__indicator,
	.wp-block-amm-grid .amm-grid-carousel__label,
	.wp-block-amm-grid .amm-grid-carousel__label::after {
		transition: none;
	}
}

@media (max-width: 767px) {
	.wp-block-amm-grid .amm-grid-carousel__labels {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 24px;
		margin-bottom: 32px;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* The scrollbar is hidden, so fade the right edge to show there is more. */
		mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
	}

	.wp-block-amm-grid .amm-grid-carousel__labels::-webkit-scrollbar {
		display: none;
	}

	.wp-block-amm-grid.has-carousel-labels-below .amm-grid-carousel__labels {
		margin: 32px 0 0;
	}

	.wp-block-amm-grid .amm-grid-carousel__label {
		flex: 0 0 auto;
		font-size: 16px;
	}
}

/* A carousel whose slides are blog cards is presented as a panel: the cards on a
   tinted background with the chevrons in the side gutter instead of over a card.
   There is no setting for it — the slides decide, so the same markup presents the
   same way wherever it is used. Other carousels (amm/card and friends) are
   untouched and keep their arrows over the slides. */
.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card) {
	--amm-grid-panel-arrow-size: var(--amm-grid-carousel-arrow-size);
	--amm-grid-panel-gutter: clamp(96px, 9vw, 136px);
	/* Clear space between a chevron and the card; the chevrons never overlap it. */
	--amm-grid-panel-arrow-gap: 20px;
	background: var(--amm-palette-background, #f7f9fc);
}

/* The panel's own breathing room goes on the content, which carries no inline
   spacing style — on the block it would have to out-shout the block's Padding
   control with !important and leave that control dead. The smaller bottom value
   is what puts the dot row 24px clear of the panel's bottom edge. */
.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card) .amm-grid__content {
	padding-block: 30px 24px;
	padding-inline: var(--amm-grid-panel-gutter);
}

/* The card fills the track's height, so every card in the carousel is the same
   height and the chevrons — centred on the track — are centred on the card. */
.wp-block-amm-grid.is-carousel-enabled .amm-grid__inner > .wp-block-amm-blog-card {
	display: flex;
}

.wp-block-amm-grid.is-carousel-enabled .amm-grid__inner > .wp-block-amm-blog-card > .amm-blog-card {
	flex: 1 1 auto;
}

/* On the panel a blog card reads as a card: its own 12px radius, room inside it,
   and a shadow to lift it off the tint. A featured card already carries its own
   responsive padding, so only the plain one needs room added — matching the
   featured card's 32px, and its 20px on phones. */
.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card) .amm-blog-card {
	box-shadow: var(--amm-card-shadow, 0 0 15px 0 rgba(0, 0, 0, 0.1));
}

.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card) .amm-blog-card:not(.amm-blog-card--featured) {
	padding: 32px;
}

@media (max-width: 767px) {
	.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card) .amm-blog-card:not(.amm-blog-card--featured) {
		padding: 20px;
	}
}

/* A card defaults to transparent, or to var(--amm-palette-background) when
   featured — the panel's own colour either way, which would leave it invisible
   under its shadow. Default to the white the grid's other cards use; a colour the
   editor picked carries amm-blog-card--has-background and is left alone. */
.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card) .amm-blog-card:not(.amm-blog-card--has-background) {
	background: var(--amm-palette-primary-3, #fff);
}

/* Pull the chevrons out into the gutter: the stage edge is the card edge, so a
   negative inset of one arrow plus the gap leaves exactly the gap clear of it. */
.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card) .amm-grid-carousel__nav {
	left: calc(-1 * (var(--amm-grid-panel-arrow-size) + var(--amm-grid-panel-arrow-gap)));
	right: calc(-1 * (var(--amm-grid-panel-arrow-size) + var(--amm-grid-panel-arrow-gap)));
}

.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card) .amm-grid-carousel__indicators {
	margin-top: 24px;
}

/* Below 1200px there is no room for a gutter, so the panel runs full width and the
   chevrons go rather than sit over a card. !important because view.js writes
   display inline; :not() so a block that opts into mobile arrows still gets them. */
@media (max-width: 1199px) {
	.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card):not([data-carousel-arrows-mobile="true"]) .amm-grid-carousel__nav {
		display: none !important;
	}

	.wp-block-amm-grid.is-carousel-enabled:has(.amm-grid__inner > .wp-block-amm-blog-card) .amm-grid__content {
		padding-inline: 0;
	}
}