/**
 * Strategic Plans.
 *
 * The same cover-led grid as /about-us/annual-reports/, on purpose: the client
 * asked for the two pages to match, and both do the same job — a shelf of PDF
 * documents you recognise by their cover, confirm by a date label, and open or
 * download. Every token, breakpoint and pill below is the annual reports
 * system; only the eyebrow differs (a planning cycle rather than a year).
 *
 * It also answers the reason the grid was changed: a third plan now joins the
 * row instead of dropping underneath, and the row grows to five across on a
 * wide screen as more are added.
 *
 * Replaces the WP File Download folder browser's presentation — a red PDF glyph
 * per file, the raw upload name as the label, and a search box plus Ordering
 * and Direction selects for a list of two documents.
 *
 * Scoped to the `wrc-strategic-plans` body class added in inc/strategic-plans.php.
 * Widths and gutters come from wrc-container.css.
 */

.wrc-strategic-plans .wrc-sp {
	--sp-blue:      #094E9C;
	--sp-cyan:      #00AEEF;
	--sp-ink:       #16202C;
	--sp-ink-soft:  #5A6673;
	--sp-line:      #E1E8EF;
	--sp-bg:        #F4F7FA;
	--sp-radius:    10px;
	--sp-gap:       clamp( 18px, 2vw, 34px );

	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var( --sp-ink );
}

/* -- grid ---------------------------------------------------------------- */

.wrc-strategic-plans .wrc-sp__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --sp-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( min-width: 640px )  { .wrc-strategic-plans .wrc-sp__grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } }
@media ( min-width: 960px )  { .wrc-strategic-plans .wrc-sp__grid { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } }
@media ( min-width: 1400px ) { .wrc-strategic-plans .wrc-sp__grid { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); } }

.wrc-strategic-plans .wrc-sp__item { min-width: 0; margin: 0; list-style: none; }

/* -- card ---------------------------------------------------------------- */

.wrc-strategic-plans .wrc-sp__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var( --sp-line );
	border-radius: var( --sp-radius );
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wrc-strategic-plans .wrc-sp__card:hover,
.wrc-strategic-plans .wrc-sp__card:focus-within {
	transform: translateY( -3px );
	border-color: #C9D8E8;
	box-shadow: 0 2px 4px rgba( 9, 78, 156, .05 ), 0 14px 30px rgba( 9, 78, 156, .12 );
}

/* -- cover --------------------------------------------------------------- */

/*
 * A fixed A4-ish box, so a plan whose cover renders a little squarer cannot
 * make its row taller than the others. `object-position: top` keeps the
 * masthead, which is what identifies the document.
 */
.wrc-strategic-plans .wrc-sp__cover {
	position: relative;
	display: block;
	text-decoration: none;
	aspect-ratio: 1 / 1.414;
	background: var( --sp-bg );
	border-bottom: 1px solid var( --sp-line );
	overflow: hidden;
}

.wrc-strategic-plans .wrc-sp__cover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Used only where a PDF has no first page that can be rendered. */
.wrc-strategic-plans .wrc-sp__cover-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 160deg, var( --sp-blue ), #0A3E7C );
	color: var( --sp-cyan );
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

/* -- card text ----------------------------------------------------------- */

.wrc-strategic-plans .wrc-sp__meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .3rem;
	padding: .95rem 1rem 1.05rem;
}

.wrc-strategic-plans .wrc-sp__cycle {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --sp-cyan );
}

/*
 * The heading element is only there for the document outline; the link inside
 * it carries the styling. !important because assets/css/wrc-responsive.css sets
 * `h3:not(footer *)` to clamp(1.1rem, 4.4vw, 1.4rem) with !important, which is
 * 32px on a desktop — three times the size this card wants.
 */
.wrc-strategic-plans .wrc-sp__heading {
	margin: 0;
	font-size: inherit !important;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.wrc-strategic-plans .wrc-sp__title {
	display: inline-block;
	margin-bottom: .55rem;
	font-size: .98rem;
	font-weight: 600;
	line-height: 1.3;
	color: var( --sp-blue ) !important;
	text-decoration: none;
}

.wrc-strategic-plans .wrc-sp__title:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -- the two actions -----------------------------------------------------
 *
 * View is the primary: it opens the plan in the browser's viewer. Download is
 * the deliberate choice beside it, not a fallback.
 * ------------------------------------------------------------------------ */

.wrc-strategic-plans .wrc-sp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .45rem;
	margin-top: auto;
}

.wrc-strategic-plans .wrc-sp__cta {
	display: inline-flex;
	align-items: baseline;
	gap: .5rem;
	align-self: flex-start;
	padding: .48rem .95rem;
	font-size: .82rem;
	font-weight: 600;
	color: var( --sp-blue ) !important;
	background: #fff;
	border: 1px solid #C3D3E6;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.wrc-strategic-plans .wrc-sp__cta--view {
	color: #fff !important;
	background: var( --sp-blue );
	border-color: var( --sp-blue );
}

.wrc-strategic-plans .wrc-sp__card:hover .wrc-sp__cta--view,
.wrc-strategic-plans .wrc-sp__cta--view:focus-visible {
	background: #0A3E7C;
	border-color: #0A3E7C;
}

/* The download pill must not also fill on card hover, or the two compete. */
.wrc-strategic-plans .wrc-sp__card:hover .wrc-sp__cta--download {
	color: var( --sp-blue ) !important;
	background: #fff;
	border-color: #C3D3E6;
}

.wrc-strategic-plans .wrc-sp__cta--download:hover,
.wrc-strategic-plans .wrc-sp__cta--download:focus-visible {
	color: #fff !important;
	background: var( --sp-blue );
	border-color: var( --sp-blue );
}

.wrc-strategic-plans .wrc-sp__size {
	font-size: .72rem;
	font-weight: 500;
	opacity: .72;
}

.wrc-strategic-plans .wrc-sp__ext {
	display: inline-flex;
	align-items: center;
	margin-left: -.15rem;
}

.wrc-strategic-plans .wrc-sp__ext svg {
	display: block;
}

/* -- focus ---------------------------------------------------------------
 *
 * Three links share a card — cover, title and the two pills — so each needs a
 * ring of its own; a ring on the card would not say which one is focused.
 * ------------------------------------------------------------------------ */

.wrc-strategic-plans .wrc-sp__cover:focus-visible,
.wrc-strategic-plans .wrc-sp__title:focus-visible,
.wrc-strategic-plans .wrc-sp__cta:focus-visible {
	outline: 2px solid var( --sp-cyan );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {

	.wrc-strategic-plans .wrc-sp__card { transition: none; }

	.wrc-strategic-plans .wrc-sp__card:hover,
	.wrc-strategic-plans .wrc-sp__card:focus-within { transform: none; }
}