/**
 * PropOffice Designs — Property Marketing (mandate + on show).
 *
 * ONE stylesheet for every surface: the native PropOffice screen, the
 * [propoffice_property_marketing] shortcode, and the Elementor widget.
 * Hand-authored, no build step, enqueued with filemtime cache-busting.
 *
 * PALETTE. Every colour reads a PropOffice design token. No brand colour is
 * hard-coded anywhere in this file.
 *
 * ISOLATION. Every selector is namespaced under `.po-marketing`, and the
 * schedule resets the margins and indentation themes impose on `dl`, `dt` and
 * `dd` — `dd` in particular carries a 40px inherited indent that would push
 * every set of hours out of line with its day.
 *
 * LAYOUT. Intrinsic and container-relative, never viewport-keyed. This section
 * sits in a two-thirds reading column on one page and full width on another, so
 * there is no viewport width at which the right answer is knowable and there is
 * not one media query in this file.
 */

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

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	color: var(--po-marketing-ink);
}

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

/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, TO SURVIVE A GLOBAL HEADING RULE.
 *
 * Both Elementor's global font kit and most themes style headings by TAG:
 * `.elementor-kit-10 h2` is (0,1,1) and outranks a lone `.po-marketing__heading`
 * at (0,1,0). Every other Design in this plugin carries the same extra class
 * for the same measured reason — see the note in
 * `propoffice-property-costs.css`, where the kit had taken over 8 of the 11
 * headings on a live property page.
 */
.po-marketing .po-marketing__heading {
	margin: 0 0 20px;
	font-family: var(--po-type-display);
	font-size: 22px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--po-marketing-ink);
}

/*
 * THE MANDATE BADGE.
 *
 * A quiet outlined chip, not a filled status pill. 🚨 There is deliberately no
 * per-mandate colour: "Exclusive" is not better than "Open", it is different,
 * and colour-coding them would be PropOffice grading somebody's listing
 * agreement on their own page. One treatment, whatever the word.
 */
.po-marketing__mandate {
	margin: 0;
}

/* The space between the mandate, the schedule and the brochures. One number
   read by both sibling rules, so the Elementor Style tab (Layout › Space
   Between Blocks) writes it once on the root; 24px when it is not set. */
.po-marketing__mandate + .po-marketing__onshow {
	margin-top: var(--po-marketing-section-gap, 24px);
}

.po-marketing .po-marketing__badge {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--po-marketing-rule);
	border-radius: 999px;
	font-family: var(--po-type-text);
	font-size: 11px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--po-marketing-ink);
	/* `white-space: nowrap` because "Exclusive Mandate" broken across two lines
	   inside a pill reads as two badges. */
	white-space: nowrap;
}

/*
 * SECONDARY METADATA — the same small, quiet treatment every other section
 * gives a label. It names the block rather than competing with the heading.
 */
.po-marketing .po-marketing__subheading {
	margin: 0 0 12px;
	font-family: var(--po-type-text);
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--po-type-muted);
}

/*
 * THE SCHEDULE.
 *
 * A column of days rather than a row, because these are read in sequence — a
 * visitor scans down for the next one they can make — where the costs row is
 * scanned across for comparison.
 */
.po-marketing__showings {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	/* Themes give `dl` a top and bottom margin; the section's spacing belongs
	   to whatever places it, not to the list. */
	margin: 0;
	padding: 0;
}

/*
 * ONE occasion: the day, with its hours beneath.
 *
 * Stacked rather than inline for the reason the costs are: the hours are the
 * detail and the day is what a reader is looking for, so the day leads and
 * nothing pushes it out of the left edge.
 *
 * `dt` and `dd` both reset their inherited indent — `dd` carries 40px by
 * default, which would set every set of hours in from its own day.
 */
.po-marketing__showing {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.po-marketing .po-marketing__day {
	margin: 0;
	padding: 0;
	font-family: var(--po-type-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	color: var(--po-marketing-ink);
}

.po-marketing .po-marketing__hours {
	margin: 0;
	padding: 0;
	font-family: var(--po-type-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: var(--po-marketing-muted);
}

/*
 * An occasion with no hours renders an EMPTY `dd`, because the pairing is what
 * makes the list a description list. It must not reserve a line of its own —
 * otherwise a schedule of days without times draws a ragged gap under each one.
 */
.po-marketing .po-marketing__hours:empty {
	display: none;
}

/*
 * BROCHURES.
 *
 * Drawn here because the shipped Property Page composes Property Gallery, whose
 * chrome offers Gallery and Video and nothing else — so this is the only place
 * on that page a visitor can reach a brochure.
 */
.po-marketing__onshow + .po-marketing__documents,
.po-marketing__mandate + .po-marketing__documents {
	margin-top: var(--po-marketing-section-gap, 24px);
}

.po-marketing__doclist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	/* Themes give `ul` a top margin and a bullet indent; the list owns
	   neither — the section's spacing belongs to whatever places it. */
	margin: 0;
	padding: 0;
	list-style: none;
}

.po-marketing__docitem {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/*
 * 🚨 SCOPED UNDER THE COMPONENT ROOT, like every other rule here. A theme's
 * `a` colour is (0,0,1) and would lose anyway, but Elementor's global kit
 * styles links as `.elementor-kit-NN a` at (0,1,1) — which outranks a lone
 * `.po-marketing__doc`.
 */
.po-marketing .po-marketing__doc {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--po-type-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
	color: var(--po-marketing-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	/* The label may be long; the row must wrap rather than push the badge
	   out of the container. */
	max-width: 100%;
	min-width: 0;
}

.po-marketing .po-marketing__doc:hover,
.po-marketing .po-marketing__doc:focus-visible {
	color: var(--po-ds-color-accent, var(--po-marketing-ink));
}

.po-marketing__doc-label {
	min-width: 0;
	overflow-wrap: anywhere;
}

/*
 * The format badge. Small, quiet and NOT a link decoration — it names the file
 * type, so it must not look clickable in its own right.
 */
.po-marketing .po-marketing__doc-format {
	flex: 0 0 auto;
	padding: 2px 6px;
	border: 1px solid var(--po-marketing-rule);
	border-radius: 4px;
	font-family: var(--po-type-text);
	font-size: 10px;
	font-weight: 600;
	line-height: 14px;
	letter-spacing: 0.04em;
	color: var(--po-marketing-muted);
	text-decoration: none;
	white-space: nowrap;
}