/* Shoutouts CPT — sub-nav, card, grid. Loaded on
   is_post_type_archive('shoutouts') || is_tax('shoutout-categories'). Slice 3. */

.hero-shoutouts,
.shoutouts-archive .cta-donate {
	background-color: var(--wp--preset--color--accent-2);
}

/* Shoutout archive page-title-bar uses red/orange accent instead of default teal */
.page-title-bar--shoutouts {
	--title-bar-accent: var(--wp--preset--color--accent-2);
}

/* ---------- shoutout sub-nav (pill tabs with FILTER BY label) ---------- */

.shoutout-sub-nav__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* QA-29/CSS-3: the 44px WCAG 2.5.5 touch-target minimum was previously met via
   min-height on the visible pill itself, reading as too tall/boxy. Shrink the
   visible pill to its natural content height (~32px) and expand the actual
   hit area to 44px with an invisible ::before overlay instead — same touch
   target, less boxy look. Resolved together with the utility-bar/footer
   social-icon hit areas (assets/css/blocks/navigation.css, footer.css).
   Vertical-only expansion (top/bottom, not left/right): the pill's text +
   16px horizontal padding already exceeds 44px wide for every label (Pets/
   Kudos/Celebrations), and the list's 8px gap is too narrow to expand
   horizontally without adjacent pills' hit areas overlapping. */
.shoutout-sub-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 18px;
	border: 1px solid var(--wp--preset--color--border-input);
	background-color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;

	/* primary-dark: ≥4.5:1 on white; #2a8289 only ~3.1:1 (fails WCAG AA normal text) */
	color: var(--wp--preset--color--primary-dark);
}

.shoutout-sub-nav__link::before {
	content: "";
	position: absolute;
	inset: -7px 0;
}

.shoutout-sub-nav__link[aria-current="page"] {
	/* active: primary-dark bg + white — primary teal fails small-text contrast */
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--primary-dark);
}

/* QA-27: no hover state existed — default + [aria-current] only. */
.shoutout-sub-nav__link:hover {
	background-color: var(--wp--preset--color--surface-warm);
	border-color: var(--wp--preset--color--primary);
}

.shoutout-sub-nav__link[aria-current="page"]:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

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

.shoutout-card {
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	overflow: hidden;
}

.shoutout-card__image {
	position: relative;
}

/* Ensure shoutout card featured images fill the card width */
.shoutout-card__image .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}

/* Category pill — overlays the featured image, top-left corner */
.shoutout-card__category-pill {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
}

/* QA-22: equal 6px/12px padding on a fully-rounded (999px) pill doesn't read
   as optically centered — `line-height: normal` reserves descender space the
   all-caps label never uses, so flex-centering still leaves the text sitting
   high with more empty room below than above; the rounded end-caps also eat
   into the horizontal padding faster than the flat edges, reading as
   cramped near the curve. Tightening line-height removes the phantom
   descender space (the actual fix for the vertical imbalance); a touch more
   horizontal padding compensates for the end-cap curve. */
.shoutout-card__category-pill a {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px 6px 16px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.88px;
	color: var(--wp--preset--color--primary-dark);
	line-height: 1;
	text-decoration: none;
}

/* QA-18: consistent sizing + em-based tracking, matching
   .obituary-card__dates (assets/css/context/obituary.css) — the two
   previously used different hardcoded values for the same date-label
   treatment. Kept as separate context-scoped rules (obituary.css and
   shoutouts.css load on different templates) rather than merged into one
   file, per the CSS architecture on-demand-loading rule.
   FU-12: QA-18 unified onto the --small token (14px), which fixed the
   inconsistency but locked in the wrong absolute size — Figma calls for
   11px here, smaller than any named theme.json font-size token, so it's
   hardcoded (matching the pre-QA-18 approach, but with the correct value). */
/* FU-13: the 8px gap before the title is set on wp:post-date's own block
   attribute (patterns/shoutout-card.php), not here — the parent group's
   blockGap doesn't apply since this block's own margin (rendered as an
   inline style) always takes precedence over it regardless of the parent's
   blockGap value. Code-review follow-up (Phase 8): originally fought this
   with `!important` in CSS; fixing the pattern's own attribute is cleaner
   since it's the pattern that owns the value anyway, and needs no
   !important at all. */
.shoutout-card__date,
.shoutout-card__date time {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--primary);
	line-height: normal;
}

/* ---------- shoutout 2-column card grid ---------- */

.shoutout-card-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* QA-24: WP's default blockGap adds margin-block-start to each grid item on
   top of the grid `gap` above, so the first row's two cards start at
   different heights (the gap between the grid's own rows is enough spacing
   on its own). Zero the per-item margin the query loop items inherit. */
.shoutout-card-grid .wp-block-post-template > * {
	margin-block-start: 0;
}

@media (max-width: 767px) {

	.shoutout-card-grid .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* ---------- shoutout CTA (submission) ---------- */
/* Button sizing handled natively via wp-block-button__width-50 */

/* QA-25: tighten the default 25px blockGap between heading/paragraph/buttons —
   excessive for this compact box. QA-26: the two 50%-width buttons stay
   side-by-side at any viewport (a percentage split always fits width-wise);
   stack them full-width on mobile instead per the reviewer's expectation. */
.cta-submission-shoutout {
	--wp--style--block-gap: 12px;
}

@media (max-width: 480px) {

	.cta-submission-shoutout .wp-block-buttons {
		flex-direction: column;
	}

	.cta-submission-shoutout .wp-block-button.has-custom-width {
		width: 100%;
	}
}