/**
 * PropOffice Designs — Property Features.
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_features] shortcode, and the Elementor widget.
 * Hand-authored, no build step, enqueued with filemtime cache-busting.
 *
 * PALETTE. Every colour reads a PropOffice design token with the token's own
 * value as the fallback. No brand colour is hard-coded anywhere in this file.
 *
 * ISOLATION. Every selector is namespaced under `.po-features`, and the lists
 * reset the bullets, margins and padding themes impose on `ul` and `li`.
 *
 * LAYOUT. Intrinsic and container-relative, never viewport-keyed. The category
 * columns come from `auto-fit` with a floor, so the section forms as many
 * columns as genuinely fit its own container and NEVER an empty one — a plain
 * `repeat(3, 1fr)` would leave two blank columns on a property with one
 * category, which is the classic way this section goes wrong.
 */

.po-features {
	font-family: var(--po-type-text);
	--po-features-ink: var(--po-ds-color-text);
	--po-features-muted: var(--po-ds-color-muted);
	--po-features-rule: var(--po-ds-color-border);

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	color: var(--po-features-ink);
	font-size: 15px;
	line-height: 1.6;
}

.po-features *,
.po-features *::before,
.po-features *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------- heading ---- */

/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, TO SURVIVE A GLOBAL HEADING RULE.
 *
 * This is drawn on a real heading element, and both Elementor's global font kit
 * and most themes style headings by TAG: `.elementor-kit-10 h3` is (0,1,1) and
 * outranks a lone `.po-features__heading` at (0,1,0).
 *
 * MEASURED on the live Kava install at 1440x720, that kit rule had taken over
 * 8 of the 11 PropOffice headings on a property page. The Features category
 * label is the clearest case: declared 12px/600 uppercase with 0.06em tracking,
 * it drew at 24px/400 with tracking `normal` — LARGER than the 22px section
 * heading it sits under, so the hierarchy read backwards and the label had
 * stopped looking like a label at all.
 *
 * One extra class is the whole fix, and it is not a guess: on that same page
 * `.po-finance .po-finance__heading` and `.po-overview .po-overview__title`
 * already carried it and rendered exactly what they declare. Both at (0,2,0),
 * both winning. That is why Finance looked right and this did not — never a
 * difference of design, only of specificity.
 */
.po-features .po-features__heading {
	margin: 0 0 20px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--po-features-ink);
}

/* -------------------------------------------------------------- groups ---- */

/*
 * 🚨 The CATEGORIES stack. One per row, always, at every width.
 *
 * They used to sit side by side in an `auto-fit` grid, which put Interior,
 * Exterior and Sustainability in three columns and made each category a narrow
 * strip of single-file items. That reads as three lists competing for the eye
 * rather than as one section a visitor works down.
 *
 * The wrapping grid did not go away — it moved DOWN a level, onto the item list
 * inside each category. That is the whole change: the columns now belong to the
 * items, which is where the reference puts them.
 *
 * Responsiveness may change how many ITEM columns there are. It must never turn
 * the categories back into columns, which is why this is a fixed single track
 * rather than anything `auto-fit` could reopen.
 */
.po-features__groups {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

.po-features__group {
	min-width: 0;
}

/* The category heading: small, quiet, set apart by a hairline rather than by
   weight. It labels the list beneath it and should not compete with the
   section heading above. */
/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, TO SURVIVE A GLOBAL HEADING RULE.
 *
 * This is drawn on a real heading element, and both Elementor's global font kit
 * and most themes style headings by TAG: `.elementor-kit-10 h3` is (0,1,1) and
 * outranks a lone `.po-features__group-heading` at (0,1,0).
 *
 * MEASURED on the live Kava install at 1440x720, that kit rule had taken over
 * 8 of the 11 PropOffice headings on a property page. The Features category
 * label is the clearest case: declared 12px/600 uppercase with 0.06em tracking,
 * it drew at 24px/400 with tracking `normal` — LARGER than the 22px section
 * heading it sits under, so the hierarchy read backwards and the label had
 * stopped looking like a label at all.
 *
 * One extra class is the whole fix, and it is not a guess: on that same page
 * `.po-finance .po-finance__heading` and `.po-overview .po-overview__title`
 * already carried it and rendered exactly what they declare. Both at (0,2,0),
 * both winning. That is why Finance looked right and this did not — never a
 * difference of design, only of specificity.
 */
.po-features .po-features__group-heading {
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--po-features-rule);
	font-size: 12px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--po-features-muted);
}

/* --------------------------------------------------------------- items ---- */

/*
 * The ITEMS wrap, in about three columns on a desktop content column.
 *
 * `auto-fit` with a floor rather than `repeat(3, 1fr)`: a category holding one
 * feature draws ONE column, not one item and two blank tracks. The count falls
 * out of the container — roughly three across the 752px content column, two on
 * a tablet, one on a phone — so there is not a media query in this file and
 * nothing has to be told how wide the page is.
 *
 * 🚨 The 200px floor is arithmetic, not taste, and the arithmetic is done
 * against the width the LIST actually gets — not the width of the page column
 * it sits in. `auto-fit` opens `(container + gap) / (floor + gap)` tracks, and
 * the list measures ~701px inside the 752px content column once the section's
 * own padding is taken out. At that real width a 220px floor opens only TWO
 * tracks; 200px opens three, and still opens three at the full 752px.
 *
 * Measured on the rig rather than assumed, because the 51px difference between
 * "the content column" and "the list" is the whole margin between three columns
 * and two.
 *
 * `min(200px, 100%)` so the floor yields to a container narrower than itself
 * instead of overflowing it.
 */
.po-features__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.po-features__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	padding: 3px 0;
	min-width: 0;
	/* An agency-authored feature label can be long and unbroken. It wraps
	   rather than widening its column. */
	overflow-wrap: anywhere;
}

/*
 * The concept's pictogram.
 *
 * `currentColor` throughout the artwork, so the icon takes whatever the list
 * is written in and the design system's text role reaches it without this
 * component naming a colour. `flex: none` because a pictogram must not be
 * squeezed by a long label, and the small negative offset sits its optical
 * centre on the text baseline the row is aligned to.
 *
 * Not every concept has artwork, so a row without one simply starts at its
 * label — which is why nothing here reserves a fixed slot for the icon.
 */
.po-features__icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--po-ds-color-muted);
	transform: translateY(4px);
}

/* A feature that carries a value shows both halves; the label goes quiet so
   the value is what the eye lands on. A present-only feature has no value
   element at all — its label is the whole statement. */
.po-features__label {
	color: var(--po-features-muted);
}

.po-features__value {
	font-weight: 600;
	color: var(--po-features-ink);
}

/* --------------------------------------------------------------- focus ---- */

/* Never `outline: none`. Nothing here is interactive today, but a theme may
   linkify a label and the ring must be there when it does. */
.po-features a:focus-visible {
	outline: 2px solid var(--po-ds-color-primary);
	outline-offset: 2px;
}