/**
 * Arthian Blocks
 *
 * Plain CSS, no build step — the theme compiles its own SCSS to
 * dist/css/style.css, which a plugin cannot add to.
 *
 * Values here are taken directly from the theme so the output is visually
 * identical to the existing blocks:
 *   breakpoint md .......... 1024px      (assets/scss/abstracts/_variables.scss)
 *   split gradient ......... 135deg, #f3f1f1 50%, #0e1433 50%
 *   curved radius .......... 125px 0 125px 0
 *   image ratio ............ 596 / 471
 *   column gap ............. 3rem, 7rem at md
 *   side padding ........... clamp(1.5rem, 1rem + 1vw, 2rem)  (.wrap)
 *
 * The theme exposes its palette as CSS custom properties on :root, so colours
 * below track the theme automatically. Hex values are fallbacks only.
 */

.arth-block {
	position: relative;
	overflow: hidden;
}

.arth-block *,
.arth-block *::before,
.arth-block *::after {
	box-sizing: border-box;
}

/* Bottom padding "None" is missing from the theme's _padding.scss, which
   defines .pad-top-none twice and omits this one. Supplied here so the
   control actually works on these blocks. */
.arth-block.pad-btm-none {
	padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Shared inner wrapper — matches the theme's .wrap
 * ------------------------------------------------------------------------ */

.arth-media-content__inner,
.arth-rich-text__inner,
.arth-cta-banner__inner,
.arth-feature-grid__inner,
.arth-quote__inner {
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1.5rem, 1rem + 1vw, 2rem);
	padding-right: clamp(1.5rem, 1rem + 1vw, 2rem);
}

/* ---------------------------------------------------------------------------
 * Body copy
 *
 * The theme's .wysiwyg-content class has no CSS rules anywhere in the
 * codebase, which is why editors have been adding inline
 * `margin-bottom: 20px` to every paragraph by hand. These rules replace that.
 * ------------------------------------------------------------------------ */

.arth-wysiwyg > * + * {
	margin-top: 1.25rem;
}

.arth-wysiwyg p,
.arth-wysiwyg ul,
.arth-wysiwyg ol {
	margin: 0 0 1.25rem;
}

.arth-wysiwyg > *:last-child {
	margin-bottom: 0;
}

.arth-wysiwyg ul,
.arth-wysiwyg ol {
	padding-left: 1.25rem;
}

.arth-wysiwyg li + li {
	margin-top: 0.5rem;
}

.arth-wysiwyg a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.arth-wysiwyg strong {
	font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Eyebrow
 * ------------------------------------------------------------------------ */

.arth-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ---------------------------------------------------------------------------
 * Alignment
 * ------------------------------------------------------------------------ */

.arth-align-left {
	text-align: left;
}

.arth-align-center {
	text-align: center;
}

.arth-align-right {
	text-align: right;
}

/* ---------------------------------------------------------------------------
 * Custom colour scheme
 *
 * Values come from the two colour pickers as inline custom properties on the
 * section, so nothing is hard-coded here.
 * ------------------------------------------------------------------------ */

.arth-custom-colours {
	background-color: var(--arth-bg, #ffffff);
	color: var(--arth-text, #0e1433);
}

.arth-custom-colours h2,
.arth-custom-colours h3,
.arth-custom-colours h4,
.arth-custom-colours p,
.arth-custom-colours li,
.arth-custom-colours blockquote,
.arth-custom-colours .arth-wysiwyg,
.arth-custom-colours .arth-eyebrow {
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Buttons
 *
 * Primary buttons reuse the theme's own markup and styling:
 *   .cta-wrapper          -> white button, navy on hover  (dark sections)
 *   .cta-wrapper.white-bg -> navy button, blue on hover   (light sections)
 * See assets/scss/abstracts/_buttons.scss in the theme.
 *
 * Only the secondary and text variants are defined here.
 * ------------------------------------------------------------------------ */

.arth-cta-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}

.arth-cta-group.arth-align-center {
	justify-content: center;
}

.arth-cta-group.arth-align-right {
	justify-content: flex-end;
}

/* Secondary: an outline button using the theme's exact geometry. The theme's
   own .cta-button-simple is avoided because a stray global rule forces it to
   150px wide and 4rem tall, which breaks longer button text. */
.arth-cta--secondary .cta-button {
	background-color: transparent;
	border: 1px solid currentColor;
	color: inherit;
}

.arth-cta--secondary .cta-button span {
	color: inherit;
}

.arth-cta--secondary .cta-button:hover {
	border-radius: 3px;
	background-color: var(--black, #0e1433);
	border-color: var(--black, #0e1433);
}

.arth-cta--secondary .cta-button:hover span {
	color: #ffffff;
}

/* On a dark section the outline button inverts on hover instead. */
.arth-is-dark .arth-cta--secondary .cta-button:hover {
	background-color: #ffffff;
	border-color: #ffffff;
}

.arth-is-dark .arth-cta--secondary .cta-button:hover span {
	color: var(--black, #0e1433);
}

/* Text link with arrow */
.arth-cta--text {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: inherit;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	transition: opacity 0.3s ease;
}

.arth-cta--text::after {
	content: "\2192";
	transition: transform 0.3s ease;
}

.arth-cta--text:hover::after {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
 * Block: Media & Content
 * ------------------------------------------------------------------------ */

.arth-media-content__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
}

.arth-media-content__media {
	position: relative;
	z-index: 1;
	width: 100%;
}

.arth-media-content__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arth-media-content__content {
	position: relative;
	z-index: 1;
	width: 100%;
}

/* Image shape — "curved" reproduces the theme's existing corner treatment. */
.arth-media-content--shape-curved .arth-media-content__media img {
	border-radius: 0 0 125px 0;
}

.arth-media-content--shape-rounded .arth-media-content__media img {
	border-radius: 16px;
}

.arth-media-content--shape-square .arth-media-content__media img {
	border-radius: 0;
}

/* Image ratio */
.arth-media-content--ratio-landscape .arth-media-content__media img {
	aspect-ratio: 596 / 471;
}

.arth-media-content--ratio-square .arth-media-content__media img {
	aspect-ratio: 1 / 1;
}

.arth-media-content--ratio-portrait .arth-media-content__media img {
	aspect-ratio: 3 / 4;
}

.arth-media-content--ratio-original .arth-media-content__media img {
	aspect-ratio: auto;
	height: auto;
}

/* Video embeds */
.arth-media-content__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.arth-media-content__video iframe,
.arth-media-content__video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Split gradient — offered only on the side-by-side layouts. */
.arth-media-content.arth-has-gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		135deg,
		var(--off-white, #f3f1f1) 0%,
		var(--off-white, #f3f1f1) 50%,
		var(--black, #0e1433) 50%,
		var(--black, #0e1433) 100%
	);
}

/* Centred layouts */
.arth-media-content--image-top .arth-media-content__inner {
	align-items: center;
}

.arth-media-content--image-top .arth-media-content__content.arth-align-center {
	margin-left: auto;
	margin-right: auto;
	max-width: 48rem;
}

.arth-media-content--text-only .arth-media-content__content.arth-align-center {
	margin-left: auto;
	margin-right: auto;
	max-width: 48rem;
}

@media (min-width: 1024px) {
	.arth-media-content__inner {
		gap: 7rem;
	}

	.arth-media-content--image-left .arth-media-content__inner,
	.arth-media-content--image-right .arth-media-content__inner {
		flex-direction: row;
	}

	/* Image right simply reverses the same row — identical design, mirrored. */
	.arth-media-content--image-right .arth-media-content__inner {
		flex-direction: row-reverse;
	}

	.arth-media-content--image-left .arth-media-content__media,
	.arth-media-content--image-right .arth-media-content__media {
		width: 40%;
	}

	.arth-media-content--image-left .arth-media-content__content,
	.arth-media-content--image-right .arth-media-content__content {
		width: 50%;
	}

	.arth-media-content--shape-curved .arth-media-content__media img {
		border-radius: 125px 0 125px 0;
	}

	.arth-media-content--image-top .arth-media-content__media {
		max-width: 60rem;
	}
}

/* ---------------------------------------------------------------------------
 * Block: Rich Text Section
 * ------------------------------------------------------------------------ */

.arth-rich-text--centred .arth-rich-text__inner {
	max-width: 52rem;
}

.arth-rich-text__columns {
	display: grid;
	gap: 2rem;
	margin-top: 1.5rem;
}

@media (min-width: 1024px) {
	.arth-rich-text__columns {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

/* ---------------------------------------------------------------------------
 * Block: CTA Banner
 * ------------------------------------------------------------------------ */

.arth-cta-banner__inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* The boxed variant moves the page gutter onto the section, so the coloured
   box sits inside it rather than replacing it. Without this, the box's own
   padding shorthand would override the shared gutter and run edge to edge. */
.arth-cta-banner--boxed {
	padding-left: clamp(1.5rem, 1rem + 1vw, 2rem);
	padding-right: clamp(1.5rem, 1rem + 1vw, 2rem);
}

.arth-cta-banner--boxed .arth-cta-banner__inner {
	padding: clamp(2rem, 4vw, 4rem);
	border-radius: 0 0 125px 0;
	background: var(--black, #0e1433);
	color: var(--white, #fff);
}

.arth-cta-banner--full .arth-cta-banner__inner,
.arth-cta-banner--boxed .arth-cta-banner__inner {
	align-items: center;
	text-align: center;
}

.arth-cta-banner--full .arth-cta-banner__text,
.arth-cta-banner--boxed .arth-cta-banner__text {
	max-width: 46rem;
}

.arth-cta-banner .arth-cta-group {
	margin-top: 0;
}

@media (min-width: 1024px) {
	.arth-cta-banner--split .arth-cta-banner__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 4rem;
	}

	.arth-cta-banner--split .arth-cta-banner__text {
		flex: 1 1 auto;
	}

	.arth-cta-banner--split .arth-cta-banner__actions {
		flex: 0 0 auto;
	}

	.arth-cta-banner--boxed .arth-cta-banner__inner {
		border-radius: 125px 0 125px 0;
	}
}

/* ---------------------------------------------------------------------------
 * Block: Feature Grid
 * ------------------------------------------------------------------------ */

.arth-feature-grid__intro {
	max-width: 46rem;
	margin-bottom: 3rem;
}

.arth-feature-grid__items {
	display: grid;
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

.arth-feature-grid__item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.arth-feature-grid__icon img {
	width: auto;
	max-width: 64px;
	height: auto;
}

.arth-feature-grid__number {
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1;
	font-weight: 500;
	opacity: 0.35;
}

.arth-feature-grid__title {
	margin: 0;
}

.arth-feature-grid__item .arth-cta {
	margin-top: auto;
	align-self: flex-start;
}

@media (min-width: 768px) {
	.arth-feature-grid--cols-2 .arth-feature-grid__items,
	.arth-feature-grid--cols-3 .arth-feature-grid__items,
	.arth-feature-grid--cols-4 .arth-feature-grid__items {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.arth-feature-grid__items {
		gap: 3rem;
	}

	.arth-feature-grid--cols-3 .arth-feature-grid__items {
		grid-template-columns: repeat(3, 1fr);
	}

	.arth-feature-grid--cols-4 .arth-feature-grid__items {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Block: Quote
 * ------------------------------------------------------------------------ */

.arth-quote__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	margin: 0;
	max-width: 56rem;
	text-align: center;
}

.arth-quote__text {
	margin: 0;
	font-size: clamp(1.25rem, 2.5vw, 1.875rem);
	line-height: 1.4;
}

.arth-quote__text::before {
	content: "\201C";
}

.arth-quote__text::after {
	content: "\201D";
}

.arth-quote__photo img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.arth-quote__attribution {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 1.5rem;
}

.arth-quote__name {
	font-weight: 500;
}

.arth-quote__role {
	opacity: 0.75;
	font-size: 0.9375rem;
}

@media (min-width: 1024px) {
	.arth-quote--photo .arth-quote__inner {
		flex-direction: row;
		align-items: center;
		text-align: left;
		max-width: 64rem;
		gap: 3rem;
	}

	.arth-quote--photo .arth-quote__photo {
		flex: 0 0 auto;
	}

	.arth-quote--photo .arth-quote__photo img {
		width: 160px;
		height: 160px;
	}

	.arth-quote--photo .arth-quote__attribution {
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------------
 * Editor
 *
 * Blocks render in 'edit' mode, so ACF shows the fields form in the canvas.
 * Give it room to breathe rather than sitting flush against the block edge.
 * ------------------------------------------------------------------------ */

.acf-block-fields {
	padding: 1rem 0;
}