/*
 * patterns/media-suites.css — "Media Suites"
 * Markup: wp-content/themes/fcs/patterns/media-suites.php
 * Root:   .fcs-media-suites
 *
 * No Figma: structure after ocpower.org/media/, styling this site's. The title
 * band above the root is the Interior Hero Banner's and is styled by
 * patterns/interior-hero-banner.css, not here.
 *
 * STRUCTURE
 * ---------
 *   .fcs-media-suites               alignfull section
 *     .fcs-media-suites__inner      alignwide, 1240px; the sidebar/content grid
 *       .fcs-media-suites__nav      the suites, filled by fcs-core
 *         .fcs-media-suites__link   <a>, or <span.is-current> for this suite
 *       .fcs-media-suites__content  the suite's own blocks, or the prompt
 *
 * ALL OF IT IS DERIVED. The choices:
 *
 *   - Small: the sidebar sits above the content as a short list, 32px apart —
 *     the one-suite list is too small to hide behind a disclosure
 *   - Medium+: sidebar | content, a 1fr : 3fr grid with a 200px floor on the
 *     sidebar and a 40px gutter; the sidebar sticks under the site header so it
 *     stays to hand beside a long suite
 *   - the links take the H5 look (18px body bold); the current suite is not a
 *     link but bold foreground text, so it reads as "you are here" the way the
 *     Interior Hero Banner's current item does
 *   - every other link keeps the site's link colour and animation
 *     (components/links.css) — nothing here restyles it
 *
 * SECTION PADDING is not declared here at any size — Medium and Large belong to
 * the editor's Dimensions panel, Small is pinned in layout/spacing.css. The side
 * gutter is on the inner (layout/spacing.css, "The inner gutter").
 */

/* Grid ----------------------------------------------------------------- */

.fcs-media-suites .fcs-media-suites__inner {
	display: grid;
	gap: 32px;
}

@media ( min-width: 768px ) {
	.fcs-media-suites .fcs-media-suites__inner {
		grid-template-columns: minmax( 200px, 1fr ) 3fr;
		gap: 40px;
		align-items: start;
	}

	.fcs-media-suites .fcs-media-suites__nav {
		position: sticky;
		top: var( --fcs-header-offset, 6rem );
	}
}

/* core's blockGap and block margins would otherwise space the grid cells. */
.fcs-media-suites.fcs-media-suites .fcs-media-suites__inner > * {
	margin-block: 0;
}

/* Sidebar -------------------------------------------------------------- */

.fcs-media-suites .fcs-media-suites__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fcs-media-suites .fcs-media-suites__link {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--h-5 );
	font-weight: 700;
	line-height: 1.333;
}

.fcs-media-suites .fcs-media-suites__link.is-current {
	color: var( --wp--preset--color--foreground );
}

/* Content -------------------------------------------------------------- */

.fcs-media-suites .fcs-media-suites__content > :first-child {
	margin-block-start: 0;
}

.fcs-media-suites .fcs-media-suites__content > :last-child {
	margin-block-end: 0;
}