/*
 * CCAC Tools — featured image crop
 *
 * ---------------------------------------------------------------------------
 * NEVER PREFIX A CLASS IN THIS FILE WITH "ccac-"
 * ---------------------------------------------------------------------------
 * The theme applies its CCACicons icon font with a rule matching
 * [class^="ccac-"]. That font contains icon glyphs and NO normal characters, so
 * any element whose class attribute starts with "ccac-" renders every letter in
 * the browser's fallback serif — and because font-family inherits, one such
 * class on a wrapper poisons its entire subtree.
 *
 * This file uses the "fi-" prefix (featured image). assets/ccac-classes.css
 * uses "cls-" and assets/ccac-weather.css uses "wx-", both for the same reason.
 * If plugin output ever renders in an unexpected serif, check the class prefix
 * BEFORE touching any font rule — diagnosing it as a font-inheritance problem
 * and adding `font-family: inherit` propagates the bad font further down and
 * fixes nothing. See CLAUDE.md.
 *
 * ---------------------------------------------------------------------------
 * WHAT THIS DOES
 * ---------------------------------------------------------------------------
 * Three declarations, the same three includes/card.php already uses inline for
 * the Classes page cards, applied to featured images that
 * includes/featured-crop.php has tagged:
 *
 *     aspect-ratio     forces the 12:7 box
 *     object-fit       decides whether the picture fills it or fits inside it
 *     object-position  centres the part that survives
 *
 * The ratio comes in as the --fi-ratio custom property, printed by
 * ccac_fi_inline_css() from the setting, so changing the shape in CCAC Tools ->
 * Images needs no edit to this file. The literal 12/7 here is only the fallback
 * for the impossible case of the property not arriving.
 */

/* ---------------------------------------------------------------------------
 * The crop
 * ---------------------------------------------------------------------------
 * height:auto is not decoration. WordPress prints width and height ATTRIBUTES
 * on the img, and a theme may set a height in CSS; either one pins the box and
 * makes aspect-ratio a no-op. Setting height:auto lets the ratio resolve the
 * height from the width.
 *
 * The !important flags are here because Avada sets image dimensions in its own
 * generated stylesheet, which loads after this one and wins on load order at
 * equal specificity. They are confined to the three properties that do the
 * crop — nothing else in this file uses them, and nothing here touches colour,
 * spacing, or typography, so the theme keeps control of everything else.
 * ------------------------------------------------------------------------- */

img.fi-12x7 {
	aspect-ratio: var(--fi-ratio, 12 / 7) !important;
	height: auto !important;
	object-fit: cover !important;
	object-position: center center;
	max-width: 100%;
	display: block;
}

/* ---------------------------------------------------------------------------
 * The "don't crop" opt-out
 * ---------------------------------------------------------------------------
 * Marked in the Media Library, for poster art and anything tall where trimming
 * the top and bottom would cut off the important part. The image keeps the same
 * 12:7 footprint — so rows still line up — but is fitted inside it rather than
 * cut, which leaves space at its left and right.
 *
 * Deliberately transparent rather than a painted letterbox: on this site the
 * cards, the search results and the MEC listings all sit on different
 * backgrounds, and a guessed fill colour would be wrong on at least one of
 * them. Transparent is right on all of them.
 * ------------------------------------------------------------------------- */

img.fi-12x7.fi-nocrop {
	object-fit: contain !important;
}

/* ---------------------------------------------------------------------------
 * Wrappers that would otherwise clip the new shape
 * ---------------------------------------------------------------------------
 * Avada's fixed-size image wrapper and MEC's single-event image div both give
 * their child an explicit box. Once the img inside is shorter than it used to
 * be, a wrapper still holding the old height leaves a strip of background
 * below the picture. Letting these two size to their content removes it.
 *
 * Scoped through .fi-12x7 so this can only ever affect a wrapper that actually
 * contains a cropped featured image — an Avada image element elsewhere on the
 * page is untouched.
 * ------------------------------------------------------------------------- */

.fusion-image-wrapper:has(> a > img.fi-12x7),
.fusion-image-wrapper:has(> img.fi-12x7),
.mec-events-event-image:has(> a > img.fi-12x7),
.mec-events-event-image:has(> img.fi-12x7) {
	height: auto;
}