/**
 * srta/card — shared card layout (front end + editor).
 *
 * Visual tokens (colours, spacing, font sizes) all come from the theme's
 * theme.json presets/custom properties, so this block inherits the SRTA design
 * system rather than redefining it. Reuses the theme block styles
 * .is-style-srta-card, .is-style-srta-icon-tile and .is-style-srta-arrow-link.
 */

.srta-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	align-items: stretch;
	text-align: left;
	/* .wp-block-srta-card's height:100% must include padding, or the card
	   renders taller than its grid cell and overlaps the row below it in a
	   multi-row Query Loop grid (3+ cards wrapping to a second row). */
	box-sizing: border-box;
}

/* Two-class selector so this fixed padding wins over the theme's fluid
   clamp() on .is-style-srta-card — keeps every srta/card (task + doc) identical. */
.is-style-srta-card.srta-card {
	padding: var(--wp--preset--spacing--35);
}

/* Icon + optional top-right label */
.srta-card__head {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Every card paragraph below is plain hand-authored HTML (not a wp:paragraph
   block) — but core/paragraph's block selector is the bare `p` tag, so the
   theme's default paragraph margin (theme.json core/paragraph) cascades to
   these too. Same specificity as a lone class, so it can win by source order
   alone; the `.srta-card` prefix bumps these to two classes so the card's own
   margin: 0 always wins regardless of load order. */
.srta-card .srta-card__eyebrow {
	margin: 0;
	color: var(--wp--custom--graphite--500);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Badge variant (the block's `topBadge` option): the top label is a chip rather
   than plain small caps, matching the neutral status pill on the meeting cards
   ("Concluded" — .srta-meeting-card__body .srta-status-pill.srta-status--past):
   graphite-50 fill, graphite-300 hairline, 12px medium, 6px radius, no small
   caps. Those values are restated rather than reused because that pill's colour
   rules are scoped to .srta-meeting-card__body, and the unscoped
   .srta-status--past is a different (teal) treatment. The base eyebrow rule
   above is two classes, so it would win on specificity alone — hence the
   explicit letter-spacing/text-transform resets. */
.srta-card .srta-card__eyebrow.is-style-srta-badge {
	padding: 0.2rem 0.7rem;
	border: 1px solid var(--wp--custom--graphite--300);
	border-radius: 0.375rem;
	background: var(--wp--custom--graphite--50);
	color: var(--wp--custom--graphite--900);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.srta-card .srta-card__title {
	margin: 0 0 var(--wp--preset--spacing--25) 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--custom--graphite--900);
	/* Many document titles are raw file names — one unbreakable "word" to the
	   browser ("FINAL_2025_Reg_Freight_Plan_RFP_7-1-2025",
	   "parcel_update_allocHH_2040_...") — which overflowed the card instead of
	   wrapping. `anywhere` breaks inside such a run only when the line can't fit
	   otherwise, so ordinary multi-word titles still wrap on spaces; min-width: 0
	   is what lets the title shrink at all inside the flex head row (a flex item
	   otherwise refuses to go below its min-content width). */
	min-width: 0;
	overflow-wrap: anywhere;
}

/* The icon tile is a fixed 2.75rem square, but it's also a flex item, so it
   shrinks as readily as anything else when the head row runs short of space —
   visible as a squashed, no-longer-square tile beside a long title. Pin it and
   let the title absorb the wrapping instead. */
.srta-card__head > .is-style-srta-icon-tile {
	flex: 0 0 auto;
}

/* Inline header: icon and title on one line, left-aligned, 12px apart. */
.srta-card--inline .srta-card__head {
	justify-content: flex-start;
	gap: 12px;
}

.srta-card--inline .srta-card__head .srta-card__title {
	margin: 0;
}

.srta-card__title a,
.srta-card__title a:hover {
	color: inherit;
	text-decoration: none;
}

.srta-card .srta-card__desc {
	margin: 0 0 var(--wp--preset--spacing--40) 0;
	font-size: var(--wp--preset--font-size--medium);
	/* Same guard as the title: an excerpt can carry a bare URL or file name. */
	overflow-wrap: anywhere;
}

/* Footer: optional grey meta label (left) + arrow link, above a hairline divider */
.srta-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--graphite--300);
}

.srta-card .srta-card__meta {
	margin: 0;
	color: var(--wp--custom--graphite--500);
	font-weight: 500;
	font-size: var(--wp--preset--font-size--x-small);
}

.srta-card .srta-card__link {
	margin: 0;
}

/* Editor: keep the card from stretching full-bleed in the canvas */
.wp-block-srta-card {
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Collapsed plain-language summary (documents only — see render.php).
 *
 * The revealed text sits above the footer's hairline; the toggle sits inside the
 * footer row beside "View document", styled to match it. A visually hidden
 * checkbox in the card body carries the open state (render.php explains why it
 * is not a <details>), so everything below is CSS-only — no JavaScript in a
 * Query Loop that can render dozens of these cards.
 * ------------------------------------------------------------------------ */

/* Collapsed by default; the checkbox is the only thing that opens it.
 *
 * It unfolds by animating the grid row from 0fr to 1fr rather than by toggling
 * display or a fixed max-height: the row resolves to the inner wrapper's real
 * height, so a two-line summary and a twenty-line one both animate correctly
 * and neither is ever clipped at rest. `visibility` is what actually hides the
 * text — display:none cannot transition, but a clipped-yet-visible summary
 * would still be read out by a screen reader and picked up by find-in-page. */
.srta-card .srta-card__summary-body {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition:
		grid-template-rows 0.28s ease,
		visibility 0.28s allow-discrete;
}

.srta-card .srta-card__summary-input:checked ~ .srta-card__summary-body {
	grid-template-rows: 1fr;
	visibility: visible;
}

/* min-height:0 keeps the grid item from refusing to shrink below its content.
   Its own padding would survive the collapse (padding is outside the clipped
   area, so a closed card would keep a stray gap above the footer) — the space
   between the summary and the hairline is the last paragraph's margin instead,
   which is inside the clip. */
.srta-card .srta-card__summary-inner {
	overflow: hidden;
	min-height: 0;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.srta-card .srta-card__summary-input:checked ~ .srta-card__summary-body .srta-card__summary-inner {
	opacity: 1;
}

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

	.srta-card .srta-card__summary-body,
	.srta-card .srta-card__summary-inner {
		transition: none;
	}
}

.srta-card .srta-card__summary-body p {
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--custom--graphite--700, #333b42);
}

.srta-card .srta-card__summary-body p:last-child {
	margin-bottom: var(--wp--preset--spacing--30);
}

.srta-card .srta-card__summary-note {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--custom--graphite--500);
	font-style: italic;
}

/* The toggle: same arrow-link treatment as the "View document" link it sits
   next to (see .is-style-srta-arrow-link in the theme). */
.srta-card .srta-card__summary-toggle {
	order: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	/* + the footer's 0.5rem gap — enough that the two links read as two. */
	margin-right: 0.25rem;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
}

.srta-card .srta-card__summary-toggle::after {
	content: "\2197";
	transition: transform 0.15s ease;
}

.srta-card .srta-card__summary-toggle:hover::after {
	transform: translate(2px, -2px);
}

/* The checkbox itself is clipped by .screen-reader-text, so the focus ring has
   to be drawn on the label it labels. */
.srta-card .srta-card__summary-input:focus-visible ~ .srta-card__footer .srta-card__summary-toggle {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Open: "Hide summary", with the arrow turned back towards the text above. */
.srta-card .srta-card__summary-label-hide {
	display: none;
}

.srta-card .srta-card__summary-input:checked ~ .srta-card__footer .srta-card__summary-label-show {
	display: none;
}

.srta-card .srta-card__summary-input:checked ~ .srta-card__footer .srta-card__summary-label-hide {
	display: inline;
}

.srta-card .srta-card__summary-input:checked ~ .srta-card__footer .srta-card__summary-toggle::after {
	transform: rotate(-90deg);
}

/* The footer row now holds two links, so it can no longer lean on
   space-between to place them — that would fling them to opposite ends of the
   card. They read as a pair instead: both left-aligned at the bottom of the
   card, after the meta label. */
.srta-card__footer:has(.srta-card__summary-toggle) {
	justify-content: flex-start;
}

/* + the footer's 0.5rem gap — keeps the quiet grey meta label from reading as
   part of the link pair beside it. */
.srta-card__footer:has(.srta-card__summary-toggle) .srta-card__meta {
	margin-right: 0.5rem;
}

.srta-card .srta-card__link {
	order: 3;
}