/**
 * Single-entry layout — the article page.
 *
 * Attached to core/post-content (inc/assets.php, MIRAIGO_CORE_BLOCK_STYLES),
 * which is the one block guaranteed to render on every view this file is
 * for. It styles six core post blocks plus the two paragraph block styles
 * registered beside it; wp_enqueue_block_style maps one block to one file,
 * so anchoring all of it on one block beats inlining the same rules six
 * times.
 *
 * Everything here is composition on core blocks. The only two custom blocks
 * on the page — share-bar and post-nav — carry their own stylesheets, as
 * every miraigo/ block does.
 *
 * WIDTH, AND WHY IT KEEPS NEEDING AN ELEMENT SELECTOR. Core's
 * `.is-layout-constrained > :where(...)` caps every child at contentSize
 * (1470px) at specificity (0,1,0), because `:where()` contributes nothing,
 * and it loads after this file. A single class ties and loses the tie on
 * load order. Anything below that must be narrower than contentSize is
 * therefore qualified with its element — the same tie
 * assets/css/blocks/core-group.css documents at length.
 */

/* ---------------------------------------------------------------- hero -- */

/**
 * A 1180px dark panel, narrower than the 1616px every
 * section-panel elsewhere caps at, holding the title, the standfirst and the
 * meta row.
 *
 * Four classes, matching `plans-tiers__panel` and `integrations-missing-tool`
 * in core-group.css, so the general panel rule keeps its own width for the
 * seven panels measured against it.
 */
.alignfull.is-surface-dark.wp-block-group.article-hero {
	max-inline-size: var(--wp--custom--width--article-hero);
}

/* 64px Bold, white, centred, held to 1082px. */
h1.article-hero__title {
	max-inline-size: var(--wp--custom--hero--title-max-width);
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	color: var(--wp--preset--color--text-inverse);
}

/* 22px Medium, 808px, line-height 1.7 — the hero lead the
   INTEGRACIONES hero uses at identical coordinates. */
p.article-hero__lead {
	max-inline-size: var(--wp--custom--width--article-lead);
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--body-xl);
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
	color: var(--wp--preset--color--text-inverse);
}

.wp-block-group.article-hero__meta {
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--35);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--text-inverse);
}

/*
 * The category as a red pill. core/post-terms renders its
 * links inside the block wrapper, so the pill is painted on the link
 * itself: one term, one pill, however many terms the entry carries.
 *
 * 15px, on `brand-hover` instead of the brand red: white on brand red is
 * 4.19:1, below AA for 15px text; brand-hover is 5.2:1. Medium rather than
 * Light, which reads too thin white on red. The background cannot darken on
 * hover, so hover underlines instead.
 */
.article-hero__category {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.article-hero__category a {
	display: inline-block;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--custom--color--brand-hover);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--35);
	font-size: var(--wp--preset--font-size--button-md);
	font-weight: 500;
	color: var(--wp--preset--color--text-inverse);
	text-decoration: none;
}

.article-hero__category a:hover {
	text-decoration: underline;
}

/* Calendar glyph, then the date. */
.article-hero__date {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.article-hero__date::before {
	content: "";
	inline-size: 16px;
	block-size: 15px;
	background-color: currentcolor;
	-webkit-mask: url(../../icons/calendar.svg) no-repeat center / contain;
	mask: url(../../icons/calendar.svg) no-repeat center / contain;
}

/* A 24px rule between the date and the author. */
.article-hero__author {
	border-inline-start: var(--wp--custom--border--hairline) solid currentcolor;
	padding-inline-start: var(--wp--preset--spacing--35);
}

/* ---------------------------------------------------------------- body -- */

/*
 * The body rules below match two containers: `.article-body`, the class
 * templates/single.html gives core/post-content, and the post editor's root
 * when it hides the template ("post-only" mode), which carries
 * `wp-block-post-content` but not the template's className. The editor iframe
 * copies the admin's `post-type-post` body class, which keeps pages out; the
 * `:where()` holds the editor branch to the same (0,1,0) as `.article-body`.
 */

/*
 * The body column is 992px, narrower than contentSize — hence the element qualifier, per the
 * header note.
 */
div:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) {
	max-inline-size: var(--wp--custom--width--article);
	margin-inline: auto;

	/*
	 * Body copy is 16px Light, against the root's 18px
	 * Regular. Set on the container and inherited rather than on
	 * `.article-body p, .article-body li`: those would be (0,1,1) and would
	 * then out-specify the (0,1,0) block-style classes below, so the
	 * standfirst and the kicker would need selectors of their own just to win
	 * back their own size. Inheritance costs nothing and leaves every
	 * override a fair fight.
	 */
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 300;

	/* "normal" for Montserrat. */
	line-height: 1.22;
}

:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) > * {
	margin-block: var(--wp--preset--spacing--35);
}

/*
 * 65px, not the 45px theme.json gives h2 globally: 65px
 * with a 1.06 line-height is its own step above `display-sm` and has
 * its own token (`article-heading`). Element-qualified so it beats
 * theme.json's `:root :where(h2)`.
 *
 * The 32px below it is the heading-to-body distance (the shared 24px
 * rhythm is 8px short).
 */
:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) > h2 {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--45);
	font-size: var(--wp--preset--font-size--article-heading);
	font-weight: 600;
	line-height: 1.06;
}

:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) > :first-child {
	margin-block-start: 0;
}

:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) > :last-child {
	margin-block-end: 0;
}

/*
 * 30px Regular in brand red, the standfirst under the hero.
 * Its own token: `subtitle-lg` is 32px. The line-height is "normal", which
 * for Montserrat is 1.22.
 */
.is-style-article-standfirst {
	font-size: var(--wp--preset--font-size--article-standfirst);
	font-weight: 400;
	line-height: 1.22;
	color: var(--wp--preset--color--text-brand);
}

/*
 * 20px Medium, sentence case, no tracking. Deliberately NOT
 * the theme's `overline` treatment, which theme.json gives h6: that one is
 * uppercase with 3px of tracking, and these are neither.
 *
 * It labels the heading below it, so the gap between the two collapses to
 * spacing--25 (12px) while the space above stays the full
 * body rhythm.
 */
.is-style-article-kicker {
	font-size: var(--wp--preset--font-size--subtitle-sm);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--text-primary);
}

:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) > .is-style-article-kicker {
	margin-block-end: var(--wp--preset--spacing--25);
}

:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) > .is-style-article-kicker + h2 {
	margin-block-start: 0;
}

/*
 * Bullets: a plain disc list at the body's own size, indented
 * 24px. core/list ships flush by default inside a constrained layout.
 */
:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) ul {
	margin-block: var(--wp--preset--spacing--35);
	padding-inline-start: var(--wp--preset--spacing--35);
}

:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) li {
	margin-block: var(--wp--preset--spacing--25);
}

/*
 * Body images break out of the 992px text column: both the banner
 * and the collage are 1345px wide, against text at 992.
 * `alignwide` is how an editor expresses that, and core only
 * honours it inside a constrained layout — which post-content is, so this
 * only has to replace the 992px cap above with the media width.
 */
:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) > .alignwide {
	max-inline-size: var(--wp--custom--width--article-media);
	margin-block: var(--wp--preset--spacing--55);
	margin-inline: auto;
}

/*
 * The wide banner is a 1345×605 crop (2.22:1), not the
 * photo's own 3:2, framed on its lower part (object-position 86%). Below
 * 782px the crop eases to 3:2 so the photo is not a thin strip.
 */
:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) > figure.wp-block-image.alignwide img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 86%;
	border-radius: var(--wp--custom--radius--panel-wide);
}

@media (min-width: 782px) {

	:is(.article-body, :where(.post-type-post .is-root-container).wp-block-post-content) > figure.wp-block-image.alignwide img {
		aspect-ratio: 1345 / 605;
	}
}

/*
 * The `article-collage` block style on core/columns (inc/block-library.php):
 * three near-square photos, tilted, staggered and overlapping
 * instead of an even row.
 *
 * Every column sits in the same single grid cell and is placed with
 * percentages of the collage width — inline margins and widths, and the
 * vertical stagger as margin-block-start, which CSS also resolves against
 * the width — so the composition scales as one piece instead of being
 * reproduced in absolute pixels. Measured on the unrotated boxes inside
 * the 1345px collage: left 472px at 0.9% / +49px / −3.05°, centre 448px at
 * 32.8% / 0 / +4°, right 472px at 64% / +131px / −3.05°. The two side
 * photos are drawn over the centre one.
 *
 * Grid, not core's flex row: the overlap would otherwise fight the
 * columns' own gap and flex-basis rules. Below 782px (core's own stacking
 * point) the photos simply stack.
 */
div.wp-block-columns.is-style-article-collage {
	display: grid;
	gap: var(--wp--preset--spacing--35);
}

div.wp-block-columns.is-style-article-collage > .wp-block-column {
	align-self: start;
	min-inline-size: 0;
}

.is-style-article-collage .wp-block-image {
	margin: 0;
}

.is-style-article-collage .wp-block-image img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 471.8 / 463.5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--panel-desktop);
}

/*
 * Only the left third of the back-office capture shows, not its centre.
 */
.is-style-article-collage > .wp-block-column:first-child img {
	object-position: 6.5% 2%;
}

@media (min-width: 782px) {

	div.wp-block-columns.is-style-article-collage {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	div.wp-block-columns.is-style-article-collage > .wp-block-column {
		grid-area: 1 / 1;
		position: relative;
		z-index: 1;
		inline-size: 35.08%;
		margin-inline-start: 0.89%;
		margin-block-start: 3.67%;
		rotate: -3.05deg;
	}

	div.wp-block-columns.is-style-article-collage > .wp-block-column:nth-child(2) {
		z-index: 0;
		inline-size: 33.28%;
		margin-inline-start: 32.8%;
		margin-block-start: 0;
		rotate: 4deg;
	}

	div.wp-block-columns.is-style-article-collage > .wp-block-column:nth-child(3) {
		margin-inline-start: 64.02%;
		margin-block-start: 9.73%;
	}

	.is-style-article-collage > .wp-block-column:nth-child(2) img {
		aspect-ratio: 447.6 / 441.2;
	}
}

/*
 * Collage hover: the photo under the pointer lifts a little and picks up the
 * card hover shadow — the same lift and timing as the plan cards.
 * `translate`, so each column's own `rotate` is untouched.
 *
 * Nothing changes stacking order. The centre photo sits under both side
 * photos, and raising it with z-index popped it over them in one frame
 * (z-index cannot be animated smoothly). Instead, hovering the centre photo
 * slides the side photos outward just past their overlap (3.2% and 2.1% of
 * the collage, plus the corners the tilt adds), so it rises in clear space.
 * `cqi` are percentages of the collage width, which `translate` cannot
 * express on its own (its % is the column's own width).
 *
 * Desktop only (the collage is only composed from 782px) and never with
 * reduced motion.
 */
@media (min-width: 782px) and (hover: hover) and (prefers-reduced-motion: no-preference) {

	div.wp-block-columns.is-style-article-collage {
		container-type: inline-size;
	}

	div.wp-block-columns.is-style-article-collage > .wp-block-column {
		transition: translate var(--wp--custom--transition--hover);
	}

	.is-style-article-collage .wp-block-image img {
		transition: box-shadow var(--wp--custom--transition--hover);
	}

	div.wp-block-columns.is-style-article-collage > .wp-block-column:hover {
		translate: 0 var(--wp--custom--hover--lift-strong);
	}

	.is-style-article-collage > .wp-block-column:hover img {
		box-shadow: var(--wp--preset--shadow--card-hover);
	}

	div.wp-block-columns.is-style-article-collage:has(> .wp-block-column:nth-child(2):hover) > .wp-block-column:first-child {
		translate: -5cqi 0;
	}

	div.wp-block-columns.is-style-article-collage:has(> .wp-block-column:nth-child(2):hover) > .wp-block-column:nth-child(3) {
		translate: 4cqi 0;
	}
}

/* ------------------------------------------------------------ closing -- */

/*
 * The share row and the prev/next cards close the entry; both already hold
 * themselves to the article measure in their own stylesheets. This only sets
 * the distance between them, 44px.
 */
.wp-block-miraigo-share-bar + .wp-block-miraigo-post-nav {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------- legal -- */

/*
 * templates/page-legal.html. These pages reuse the article measure and type
 * scale.
 */
.legal-page {
	padding-block-end: var(--wp--preset--spacing--60);
}

h1.legal-page__title,
div.legal-page__body {
	max-inline-size: var(--wp--custom--width--article);
	margin-inline: auto;
}

div.legal-page__body {
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--body-md);
	line-height: 1.6;
}

div.legal-page__body > * {
	margin-block: var(--wp--preset--spacing--30);
}

/* stylelint-disable-next-line no-descending-specificity -- Legal and article bodies never share a page. */
div.legal-page__body > h2 {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--heading-5);
	line-height: 1.3;
}

div.legal-page__body > :first-child {
	margin-block-start: 0;
}

.legal-page__body ul {
	padding-inline-start: var(--wp--preset--spacing--35);
}

.legal-page__body li + li {
	margin-block-start: var(--wp--preset--spacing--25);
}

/* Links inside running text need more than colour to stand out (WCAG 1.4.1). */
/* stylelint-disable-next-line no-descending-specificity -- Legal and article bodies never share a page. */
.legal-page__body a {
	text-decoration: underline;
	overflow-wrap: anywhere;
}