/**
 * PIPENET Videos.
 *
 * Card metrics replicate the previous hand-built Avada cards exactly
 * (1px border, 10px vertical padding, 20px gap, 18px/21.6px title).
 * New controls use the 8px scale.
 *
 * Every rule is scoped under `.pnv`, and the title also carries its element
 * name. That is not decoration: a single-class selector loses to Avada's own
 * heading and form rules, which are more specific. A measurement on the live
 * page showed an unscoped `.pnv-card__title` being overridden to Roboto 24px/500
 * instead of the 18px/700 body font it asks for.
 */

.pnv {
	/* Reference values — do not "tidy" these to the 8px grid. */
	--pnv-card-border: var(--awb-custom_color_9, #d8d8d8);
	--pnv-card-pad-y: 10px;
	--pnv-grid-gap: 20px;
	--pnv-title-size: 18px;
	--pnv-title-lh: 21.6px;

	/* New controls. */
	--pnv-space-1: 8px;
	--pnv-space-2: 16px;
	--pnv-space-3: 24px;
	--pnv-control-h: 48px;
	--pnv-muted: #6b6b6b;          /* 5.2:1 on white — WCAG AA body text */
	--pnv-accent: var(--awb-custom_color_1, #062b79);
}

/* Progressive enhancement: the interactive grid appears only once JS is running.
   Without JS the <noscript> block carries plain players instead. */
.pnv .pnv__interactive { display: none; }
.pnv--ready .pnv__interactive { display: block; }

/* --- Search ------------------------------------------------------------- */

.pnv .pnv__search {
	position: relative;
	max-width: 420px;
	margin: 0 0 var(--pnv-space-2);
}

.pnv input.pnv__search-input {
	box-sizing: border-box;
	width: 100%;
	height: var(--pnv-control-h);
	margin: 0;
	padding: 0 40px 0 var(--pnv-space-2);
	border: 1px solid var(--pnv-card-border);
	border-radius: 2px;
	background: #fff;
	color: inherit;
	font-family: inherit;
	font-size: 16px;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
}

/* WebKit draws its own clear button inside type="search", which showed up as a
   second cross next to ours. Ours stays: it is styled, keyboard-reachable and
   behaves the same in every browser. */
.pnv input.pnv__search-input::-webkit-search-cancel-button,
.pnv input.pnv__search-input::-webkit-search-decoration,
.pnv input.pnv__search-input::-webkit-search-results-button,
.pnv input.pnv__search-input::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.pnv input.pnv__search-input:focus-visible,
.pnv button.pnv__search-clear:focus-visible,
.pnv .pnv__pager a:focus-visible {
	outline: 2px solid var(--pnv-accent);
	outline-offset: 2px;
}

.pnv button.pnv__search-clear {
	position: absolute;
	top: 50%;
	right: var(--pnv-space-1);
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--pnv-muted);
	font-family: inherit;
	font-size: 24px;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
}

.pnv .pnv__count {
	margin: 0 0 var(--pnv-space-2);
	color: var(--pnv-muted);
	font-family: inherit;
	font-size: 14px;
}

/* --- Grid --------------------------------------------------------------- */

.pnv .pnv__grid {
	display: grid;
	gap: var(--pnv-grid-gap);
	align-items: stretch;
}

.pnv .pnv__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pnv .pnv__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.pnv .pnv__grid--3,
	.pnv .pnv__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.pnv .pnv__grid--3,
	.pnv .pnv__grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* --- Card --------------------------------------------------------------- */

.pnv .pnv-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--pnv-card-pad-y) 0;
	border: 1px solid var(--pnv-card-border);
}

/* The `hidden` attribute must win over the flex display above. */
.pnv .pnv-card[hidden] { display: none !important; }

.pnv .pnv-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	/* Shows only when Vimeo gave us no thumbnail AND the player has not mounted
	   yet. Neutral grey rather than black, so a missing thumbnail reads as
	   "loading", not "broken". */
	background: #e8e8e8;
}

.pnv .pnv-card__media > iframe,
.pnv .pnv-card__thumb {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
}

.pnv .pnv-card__thumb { object-fit: cover; }

/*
 * The old page set titles in a <p>, so they used the theme's BODY font at
 * 18px/21.6px bold. This is an <h3>, which Avada styles with its own heading
 * font at a larger size and lighter weight — hence the element name here, to
 * outrank that.
 */
.pnv h3.pnv-card__title {
	margin: var(--pnv-space-1) var(--pnv-space-1) 0;
	padding: 0;
	font-family: inherit;
	font-size: var(--pnv-title-size);
	line-height: var(--pnv-title-lh);
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	text-align: center;
	/* Survives a title of double the length — wraps, never clips. */
	overflow-wrap: break-word;
}

/* --- Empty states and pagination ---------------------------------------- */

.pnv .pnv__empty,
.pnv .pnv__none {
	margin: var(--pnv-space-3) 0;
	color: var(--pnv-muted);
	font-family: inherit;
	text-align: center;
}

/*
 * The pager carries the theme's own `.pagination` markup and class names, so the
 * theme styles it and the look matches the blog pagination elsewhere on the site.
 * Deliberately almost no rules here — anything we added would fight the theme and
 * would have to be re-tuned whenever the site is restyled.
 */
.pnv .pnv__pager {
	margin-top: var(--pnv-space-3);
}

.pnv .pnv__pager-gap {
	color: var(--pnv-muted);
}

/* --- Webinar block ------------------------------------------------------ */

/*
 * Same scoping rule as the grid above: root class plus the element name, because
 * a single-class selector loses to Avada's own heading, paragraph and form rules.
 */
.pnv-wb {
	/* Borrowed from the cards on the video list page, so the two read as one
	   family rather than two unrelated things that both hold a Vimeo player. */
	--pnv-wb-border: var(--awb-custom_color_9, #d8d8d8);
	--pnv-wb-accent: var(--awb-custom_color_1, #062b79);

	--pnv-wb-space-2: 16px;
	--pnv-wb-space-3: 24px;
	--pnv-wb-space-4: 32px;

	/*
	 * Without this the block reads as one more paragraph in the column: a player
	 * appears under the prose with nothing marking where the article stops and
	 * the thing you came for starts. The hairline and the air around it are what
	 * make it a block rather than a trailing sentence.
	 */
	margin: var(--pnv-wb-space-4) 0;
	padding: var(--pnv-wb-space-3);
	border: 1px solid var(--pnv-wb-border);
}

.pnv-wb .pnv-wb__media {
	position: relative;
	aspect-ratio: 16 / 9;
	/* Neutral grey, so a player still loading reads as "loading", not "broken". */
	background: #e8e8e8;
}

/* Only when something follows it — a lone player needs no trailing gap. */
.pnv-wb .pnv-wb__media:not(:last-child) {
	margin-bottom: var(--pnv-wb-space-2);
}

.pnv-wb .pnv-wb__media > iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border: 0;
}

/* The copy this replaces was bold, set in the theme's body font. */
.pnv-wb p.pnv-wb__text {
	margin: 0 0 var(--pnv-wb-space-2);
	font-family: inherit;
	font-weight: 700;
	overflow-wrap: break-word;
}

.pnv-wb p.pnv-wb__text:last-child {
	margin-bottom: 0;
}

/*
 * <summary> carries the theme's button classes. That works because all 421
 * fusion-button selectors in the compiled theme CSS are class-based and none is
 * bound to a tag — measured, not assumed. Only the disclosure triangle has to go.
 */
.pnv-wb summary.pnv-wb__action {
	display: inline-block;
	cursor: pointer;
	list-style: none;
}

.pnv-wb summary.pnv-wb__action::-webkit-details-marker { display: none; }
.pnv-wb summary.pnv-wb__action::marker { content: ''; }

.pnv-wb summary.pnv-wb__action:focus-visible,
.pnv-wb a.pnv-wb__action:focus-visible {
	outline: 2px solid var(--pnv-wb-accent);
	outline-offset: 2px;
}

.pnv-wb .pnv-wb__form {
	margin-top: var(--pnv-wb-space-3);
}

/*
 * WP-Members labels its login form "Existing Users Log In". Inside this block
 * that heading explains nothing and actively misleads — a reader without an
 * account concludes the form is not for them.
 *
 * Hidden here rather than filtered: 3.3.8 hands wpmem_login_form_args 27 keys
 * and the heading is not one of them (research/task-02/spike.md). display:none
 * takes the element out of the accessibility tree as well, so nothing is left
 * for a screen reader to read out. Scoped to this block, so every other login
 * form on the site — the blocked-page screens especially — keeps its heading.
 */
.pnv-wb .pnv-wb__form legend {
	display: none;
}