/**
 * Resources Frontend Styles
 *
 * Loaded on the Resources archive and single Resource views only, via
 * `tmw_resources_enqueue_frontend()` in `inc/enqueue.php`, which enqueues the
 * compiled `assets/css/frontend.min.css`.
 *
 * Build: this plugin has no `package.json` of its own. Compile with the root
 * PostCSS config from the project root:
 *
 *   npx postcss wp-content/plugins/3mw-resources/assets/css/src/frontend.css \
 *     -o wp-content/plugins/3mw-resources/assets/css/frontend.min.css \
 *     --config postcss.config.js
 *
 * Lint with `npm run lint:css:resources` (already wired up in the root
 * package.json and pointed at this `src/` directory).
 *
 * @package TMW\Resources
 * @since 1.1.0
 */

/* ==========================================
   CARDS - TAXONOMY EYEBROW
   ========================================== */

.card--resources .card-body > .card-badge-wrapper {
   margin-bottom: var(--space-sm);
}

/* Strip the pill styling off the card's taxonomy badge so it reads as plain
   eyebrow text, matching `blocks/featured-recent-posts/style.css:41`.

   Every part of this selector is load-bearing. It must clear 0,2,0 to beat
   `frontend-child.css:1116` (`.badge[data-badge-variant="primary"]`, which
   loads later), so the wrapper alone would only tie — `.card--resources` is
   what wins it. Don't "simplify" it to that attribute either: which attribute
   the badge carries isn't stable (`tmw_core_get_badge()` emits taxonomy OR
   variant, and these cards hit the variant branch only because
   `extract_badge_taxonomy()`'s `/badge-category-…/` pattern doesn't match the
   `card-badge--{slug}` class it's given), so an attribute selector would break
   silently if that's ever fixed upstream.

   `font-size` and `text-transform` undo the small/uppercase from that same
   child-theme rule, which still applies to any property this rule omits. */
.card--resources .card-badge-wrapper .badge {
	background: transparent;
	color: var(--color-tertiary);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-body);
	text-transform: none;
	border-radius: 0;
	padding: 0;
	margin-bottom: var(--space-2xs);
}

/* ==========================================
   ARCHIVE HERO - OVERLAY STYLE
   ========================================== */

/* Repaint the hero overlay as the flat "dark blue" wash.

   The markup says `has-overlay--gradient` but this paints dark-blue, so the
   class name isn't a reliable guide here. Commit `ffb10a3` dropped
   `hero_overlay_style: "dark-blue"` from the block in `archive-resources.html`,
   and `hero.php:68` falls back to `'gradient'`. Restoring that field (in the
   template AND wp_template ID 1712, which overrides it) is the canonical fix
   and would make this rule redundant — delete it if that happens.

   Value matches `blocks/hero/style.css:68` so the two can't drift. */
.post-type-archive-resources .hero.has-background-image.has-overlay--gradient .hero__overlay {
	background: var(--wp--preset--gradient--gradient-overlay-2);
}

/* ==========================================
   ARCHIVE FILTERS - SPACING
   ========================================== */

/* Own the filter section's vertical padding here in CSS.

   This spacing previously lived in editor template settings as an inline style
   on the `flexible-content-area` wrapper in `templates/archive-resources.html`
   (`padding-top/bottom: var(--wp--preset--spacing--xs)`). Those inline values
   have been removed from the template so the spacing is version-controlled and
   reviewable, rather than sitting in block markup — and, because a database
   copy of that template also exists, in two places that can silently disagree.

   Removing the inline style is what makes this rule necessary rather than
   merely tidier: with nothing inline, the section falls back to its
   `section-padding-3xl` class default of 64px top and bottom — section-sized
   spacing wrapped around a single row of controls. `--space-xs` restores the
   ~8px the inline style used to apply.

   Targeted via the `#resource-filters` anchor set on that same block in
   `archive-resources.html`, so this only affects the filter band and leaves
   every other flexible-content-area on the archive at its intended section
   padding. Keeping the rule in this plugin puts it beside the markup whose
   anchor it depends on, so the two can't drift apart. An ID also clears
   `.section-padding-3xl` on specificity with no `!important`.

   Bottom padding is deliberately one step larger than the top rather than
   equal. Measured, the two gaps were already identical (20px each at 390px),
   but the band still read bottom-tight: the top gap is bounded by the search
   field's white fill, which reads as substantial against the grey band, while
   below the last control there is only bare grey before the section ends.
   Matching the numbers therefore does not match the perceived spacing — the
   larger bottom value is what makes them look balanced. */
#resource-filters.flexible-content-area-block {
	padding-top: var(--space-xs);
	padding-bottom: var(--space-xs);
}

/* Trim the filter block's own padding to sit tight inside that section, and
   drop its horizontal padding so the block's inner edges line up with the
   cards grid below (both then span the container's full width).
   Two classes are needed to beat the 3mw-base block stylesheet's
   `padding-top: var(--space-lg)` / `padding-bottom: var(--space-xl)`. */
.dynamic-archive-filters.display-style-dropdowns {
	padding-top: var(--space-2xs);
	padding-bottom: var(--space-2xs);
	padding-left: 0;
	padding-right: 0;
}

/* Reclaim the dropdown's oversized right inset so the label isn't clipped.

   3mw-base reserves `--space-2xl` (88px) to clear the arrow, but the arrow only
   spans 27.2-39.2px from the right edge — leaving 142.8px for a label needing
   147.3px at 1920px. `--space-lg` (40px) would leave under 1px of clearance,
   so `--space-xl` is the smallest safe step. */
.dynamic-archive-filters .archive-filters__select {
	padding-right: var(--space-xl);
}

/* Increase the breathing room around the filters on small screens.
   On mobile the controls stack (search, then dropdowns, each full-width), so
   the filter band grows tall and sits much closer to the heading above and the
   first card below than it does on desktop, where the same controls share one
   row. Both the section and the block step up together, giving roughly
   12px + 8px per side instead of the desktop 8px + 4px.
   Scoped to <=768px to match the 3mw-base block's own stacking breakpoint, so
   the padding changes over on the same width the layout does. */
@media (width <=768px) {
	#resource-filters.flexible-content-area-block {
		padding-top: var(--space-md);
		padding-bottom: var(--space-md);
	}

	.dynamic-archive-filters.display-style-dropdowns {
		padding-top: var(--space-sm);
		padding-bottom: var(--space-sm);
	}
}

/* Cap the single-view featured image height.

   Resource featured images are authored at whatever aspect ratio the source
   photo happens to be — the patient stories run 818x676 (1.21:1), 900x675
   (1.33:1) and 1000x667 (1.50:1) — and core constrains only width, so the
   posts render at three visibly different heights despite reading as a set.
   The narrowest image is also upscaled past its native width in the content
   column.

   `object-fit: contain` deliberately overrides the `object-fit: cover` that
   the featured-image block emits *inline* on the `<img>`. `cover` would crop
   editor-chosen photography to fill the box, risking clipped faces in the
   patient stories; `contain` letterboxes instead, so a tall image sits
   narrower than the content column rather than being cut — the accepted
   trade-off for never cropping. An inline style loses to a stylesheet rule on
   the same property, so no `!important` is needed.

   Scoped to `.single-resources` rather than the bare block class: this
   stylesheet also loads on the archive, where the cards use the same block
   and should keep core's sizing.

   The Video Link path is unaffected by construction — the child theme's
   `inc/video-resource-presentation.php` replaces the featured-image block
   wholesale with a `.tmw-resource-video` embed figure, so
   `.wp-block-post-featured-image` matches nothing on those resources. */
.single-resources .wp-block-post-featured-image img {
	max-height: 30rem;
	object-fit: contain;
}