/*
 * Post feature.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * Three surfaces are in play — the band, the badge and the button — and the ink
 * for each is computed in PHP against whatever an editor picked. They arrive as
 * `--btxc-feature-*`. Nothing here names a colour token for type.
 */

@layer bertex-components {

	.btxc-feature {
		--btxc-feature-bg: transparent;
		--btxc-feature-ink: var( --btx-color-primary-1, #1a2744 );
		--btxc-feature-quiet: var( --btx-color-primary-1-light-40, #2e4578 );
		--btxc-feature-cta-bg: var( --btx-color-secondary-1, #ffee01 );
		--btxc-feature-cta-ink: var( --btx-color-primary-1, #1a2744 );

		box-sizing: border-box;
		padding-block: var( --btx-spacing-xl, 3rem ) var( --btx-spacing-xxl, 4.75rem );
		padding-inline: var( --btx-spacing-m, 1.25rem );

		background: var( --btxc-feature-bg );
		color: var( --btxc-feature-ink );
	}

	.btxc-feature--width-wide {
		max-width: var( --btx-max-width, 1440px );
		margin-inline: auto;
	}

	.btxc-feature__inner {
		box-sizing: border-box;
		max-width: var( --btx-max-width, 1440px );
		margin-inline: auto;

		display: grid;
		grid-template-columns: 1.05fr 0.95fr;
		gap: var( --btx-spacing-xl, 3rem );
		align-items: center;
	}

	/*
	 * `media_side` is presentation only: the copy stays second in the document
	 * either way, so the reading order does not depend on which side the
	 * picture landed on.
	 */
	.btxc-feature--media-end .btxc-feature__inner {
		grid-template-columns: 0.95fr 1.05fr;
	}

	.btxc-feature--media-end .btxc-feature__media {
		order: 2;
	}

	/* With no image the article takes the width rather than leaving a hole. */
	.btxc-feature--no-media .btxc-feature__inner {
		grid-template-columns: minmax( 0, 1fr );
		max-width: 56rem;
	}

	.btxc-feature__media {
		overflow: hidden;
		border-radius: var( --btx-border-radius-lg, 0.875rem );

		/* Depth rather than a border: the image sits on a painted band, and a
		 * hairline on navy reads as a seam. */
		box-shadow: 0 22px 46px rgb( 0 0 0 / 0.4 );
	}

	/* `display: block` kills the inline-image baseline gap under the frame. */
	.btxc-feature__image {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.btxc-feature__copy {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var( --btx-spacing-m, 1.25rem );

		min-width: 0;
	}

	/* ── The badge row ─────────────────────────────────────────────────── */

	.btxc-feature__eyebrow {
		margin: 0;

		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var( --btx-spacing-xs, 0.75rem );
	}

	/*
	 * Bare `monospace`, the same deliberate exception the other components
	 * make: the design system publishes a heading family and a body family and
	 * no third. See the note in booking-panel/style.css.
	 */
	.btxc-feature__badge,
	.btxc-feature__line {
		font-family: monospace;
		font-size: var( --btx-font-body-xs, 0.8125rem );
		font-weight: 500;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.btxc-feature__line {
		color: var( --btxc-feature-quiet );
	}

	/*
	 * A filled badge is a graphic, judged against the 3:1 floor — which is what
	 * lets it be brand green. Its ink is measured against the fill in PHP.
	 */
	.btxc-feature__badge--filled {
		padding: 0.375rem 0.75rem;

		background: var( --btxc-feature-badge, transparent );
		color: var( --btxc-feature-badge-ink, var( --btxc-feature-ink ) );
		border-radius: var( --btx-border-radius-xs, 0.3125rem );
	}

	/* ── The article ───────────────────────────────────────────────────── */

	.btxc-feature__title {
		margin: 0;

		font-family: var( --btx-font-heading-family, inherit );
		font-size: var( --btx-font-heading-xxl, 2.875rem );
		font-weight: 700;
		line-height: var( --btx-line-height-heading, 1.08 );
		letter-spacing: -0.02em;
		text-wrap: pretty;
		color: var( --btxc-feature-ink );
	}

	/*
	 * The headline carries the link and the link stretches over the whole
	 * section, so the feature is one tab stop whose accessible name is the
	 * article title — the arrangement post-card, info-card and service-menu
	 * already use.
	 */
	/*
	 * `!important` because this is a link, and theme.json's unlayered
	 * `a:where(:not(.wp-element-button))` colour rule beats every cascade layer
	 * — without it the headline took the site's link colour, which on a dark
	 * ground is dark on dark. Same trade service-switcher makes.
	 */
	.btxc-feature__link {
		color: inherit !important;
		text-decoration: none;
	}

	.btxc-feature__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}

	.btxc-feature__inner {
		position: relative;
	}

	.btxc-feature__excerpt {
		margin: 0;

		max-width: 38rem;

		font-size: var( --btx-font-body-lg, 1.1875rem );
		line-height: var( --btx-line-height-body, 1.65 );
		color: var( --btxc-feature-quiet );
	}

	/* ── Byline ────────────────────────────────────────────────────────── */

	.btxc-feature__byline {
		display: flex;
		align-items: center;
		gap: var( --btx-spacing-xs, 0.875rem );
	}

	.btxc-feature__avatar {
		flex: none;
		inline-size: 2.875rem;
		block-size: 2.875rem;
		border-radius: 9999px;
		object-fit: cover;
		display: block;
	}

	.btxc-feature__who {
		display: flex;
		flex-direction: column;
		gap: 0.125rem;
	}

	.btxc-feature__author {
		font-size: var( --btx-font-body-s, 0.9375rem );
		font-weight: 600;
		color: var( --btxc-feature-ink );
	}

	.btxc-feature__date {
		font-size: var( --btx-font-body-xs, 0.875rem );
		color: var( --btxc-feature-quiet );
	}

	/* ── The button ────────────────────────────────────────────────────── */

	/*
	 * A <span>, not a second link: the headline is already the link and its
	 * ::after covers the whole section, so this is inside the hit area. A real
	 * anchor here would be a duplicate link to the same place with a worse
	 * name — what a screen-reader user hears as "read the article, link".
	 */
	.btxc-feature__cta {
		display: inline-flex;
		align-items: center;
		gap: var( --btx-spacing-xs, 0.625rem );

		padding: var( --btx-button-spacing, 1rem ) var( --btx-spacing-lg, 1.75rem );

		background: var( --btxc-feature-cta-bg );
		color: var( --btxc-feature-cta-ink );
		border-radius: var( --btx-border-radius-m, 0.5rem );

		font-size: var( --btx-font-body-s, 1.0625rem );
		font-weight: 700;
		line-height: var( --btx-line-height-heading, 1.3 );

		transition: filter 0.18s ease;
	}

	.btxc-feature__arrow {
		transition: transform 0.18s ease;
	}

	.btxc-feature__inner:hover .btxc-feature__cta {
		filter: brightness( 1.06 );
	}

	.btxc-feature__inner:hover .btxc-feature__arrow {
		transform: translateX( 3px );
	}

	.btxc-feature__inner:has( .btxc-feature__link:focus-visible ) .btxc-feature__cta {
		outline: 2px solid var( --btxc-feature-ink );
		outline-offset: 3px;
	}

	/* ── Narrow ────────────────────────────────────────────────────────── */

	@media ( width < 60rem ) {
		.btxc-feature__inner,
		.btxc-feature--media-end .btxc-feature__inner {
			grid-template-columns: minmax( 0, 1fr );
			gap: var( --btx-spacing-lg, 2rem );
		}

		/* The picture goes back above the words on a phone, whichever side it
		 * was asked to sit on. */
		.btxc-feature--media-end .btxc-feature__media {
			order: 0;
		}

		.btxc-feature__title {
			font-size: var( --btx-font-heading-lg, 2rem );
		}
	}
}

@media ( prefers-reduced-motion: reduce ) {
	@layer bertex-components {
		.btxc-feature__cta,
		.btxc-feature__arrow {
			transition: none;
		}

		.btxc-feature__inner:hover .btxc-feature__arrow {
			transform: none;
		}
	}
}