/****** FILE: themes/gamry/css/pages/VideoGalleryPage.css *****/
/* The Weekly Friday Focus panel ships the designer's own sheet verbatim —
   css/friday-focus-form.css. It is registered in PageController alongside this

/* ===================================================================
   VIDEO LIBRARY (design_handoff_video_library, 2026-08)
   Tokens are the site's, plus the handoff's dark-panel set.
   =================================================================== */
.rd-vl {
	--vl-panel:  #0b1a24;   /* spotlight + player */
	--vl-deep:   #0b2b45;   /* thumbnail gradient start */
	--vl-sky:    #a0ceeb;
	--vl-sky-2:  #dceaf3;
	--vl-sky-3:  #c3d3de;
	--vl-line:   #e6eaec;
	--vl-row:    #eef1f2;
	--vl-ctl:    #d5dcdf;
	font-family: 'IBM Plex Sans', sans-serif;
	color: var(--gm-ink, #17242b);
	background: var(--gm-bg, #fbfbfa);
}
.rd-vl, .rd-vl * { box-sizing: border-box; }

/* Page.ss wraps $Layout in #main_wrap.wrap > #page_type.internal.typography.
   That caps the width, adds 4% vertical padding, and applies legacy typography
   rules to everything inside — none of which suits a page whose spotlight and
   toolbar are full-bleed. Scoped to this page's body class so no other template
   is affected. */
body.VideoGalleryPage #main_wrap { max-width: none; width: auto; padding: 0; margin: 0; background: var(--gm-bg, #fbfbfa); }
body.VideoGalleryPage #page_type { padding: 0; max-width: none; width: auto; float: none; }
body.VideoGalleryPage #page_type::after { content: none; }
/* This page carries a sidebar widget (the Friday Focus subscribe form), so Page.ss
   splits $Layout into #page_left / #page_right floats. The library needs the full
   width, so the two stack instead: the form keeps working and simply sits below.
   Re-placing it into the handoff's full-width navy panel is follow-on work. */
body.VideoGalleryPage #page_left,
body.VideoGalleryPage #page_right { float: none; width: 100%; max-width: none; padding: 0; }
body.VideoGalleryPage #page_right { margin-top: 32px; }
body.VideoGalleryPage #page_right .inside { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

/* The legacy .typography sheet styles bare headings, p, ul and li inside
   #page_type — it was overriding the spotlight's own type (oversized mono
   headings, wrong colours on the dark band). The library sets type on every
   element it renders; these win it back. */
.rd-vl ul, .rd-vl li { list-style: none; margin: 0; padding: 0; background: none; }
.rd-vl li::before, .rd-vl li::after { content: none; }
.rd-vl h1, .rd-vl h2, .rd-vl h3, .rd-vl p, .rd-vl button, .rd-vl input, .rd-vl select {
	text-transform: none; letter-spacing: normal; text-shadow: none; float: none;
}
.rd-vl button { font-family: inherit; }
#page_type .rd-vl h1, #page_type .rd-vl h2, #page_type .rd-vl h3 { margin: 0; padding: 0; border: 0; background: none; }
#page_type .rd-vl .rd-vl-h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(32px,3.4vw,46px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.06; color: var(--gm-ink,#17242b); margin-bottom: 14px; }
#page_type .rd-vl .rd-vl-spot-h { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: var(--vl-sky); }
#page_type .rd-vl .rd-vl-spot-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(24px,2.3vw,32px); font-weight: 700; letter-spacing: -0.024em; line-height: 1.14; color: #fff; margin: 6px 0 10px; }
#page_type .rd-vl .rd-vl-dialog-title { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; color: #fff; margin: 6px 0 10px; }
#page_type .rd-vl .rd-vl-upnext h3 { font-family: 'Space Grotesk', sans-serif; font-size: 17px; color: #fff; margin-bottom: 12px; }
#page_type .rd-vl p { color: inherit; }
#page_type .rd-vl .rd-vl-intro { font-size: 18.5px; line-height: 1.65; color: var(--gm-body,#47535b); max-width: 32em; }
#page_type .rd-vl .rd-vl-blurb { font-size: 14.5px; line-height: 1.55; color: var(--gm-muted,#5f6b72); }
#page_type .rd-vl .rd-vl-spot-blurb { font-size: 16px; line-height: 1.6; color: var(--vl-sky-3); }
/* Never remove: handoff calls this out explicitly. */
.rd-vl :focus-visible { outline: 3px solid var(--gm-navy, #003e69); outline-offset: 3px; }
.rd-vl-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- 1. header ---- */
.rd-vl-head { background: #fff; border-bottom: 1px solid var(--vl-line); padding: 26px 40px 32px; }
.rd-vl-head > * { max-width: 1360px; margin-left: auto; margin-right: auto; }
.rd-vl .rd-breadcrumb { margin-bottom: 28px; }
.rd-vl-eyebrow {
	font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 12px;
}
.rd-vl-h1 {
	margin: 0 0 14px; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
	font-size: clamp(32px, 3.4vw, 46px); letter-spacing: -0.026em; line-height: 1.06;
}
.rd-vl-intro { margin: 0; font-size: 18.5px; line-height: 1.65; color: var(--gm-body, #47535b); max-width: 32em; }

/* ---- 2. rotation spotlight ---- */
.rd-vl-spot { background: var(--vl-panel); padding: 28px 40px 24px; }
.rd-vl-spot-inner { max-width: 1440px; margin: 0 auto; }
.rd-vl-spot-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.rd-vl-spot-h {
	margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 400;
	letter-spacing: 0.13em; text-transform: uppercase; color: var(--vl-sky);
}
.rd-vl-spot-nav { display: flex; align-items: center; gap: 10px; }
.rd-vl-spot-pos { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #b7c7d2; }
.rd-vl-round {
	width: 44px; height: 44px; border-radius: 50%; background: none;
	border: 1px solid rgba(255,255,255,.3); color: var(--vl-sky-2); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.rd-vl-round:hover { border-color: var(--vl-sky); }

.rd-vl-spot-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 32px; align-items: center; }
@media (max-width: 899px) { .rd-vl-spot-grid { grid-template-columns: 1fr; } }
.rd-vl-spot-thumb {
	position: relative; display: block; width: 100%; aspect-ratio: 16/9;
	border: 0; padding: 0; border-radius: 15px; overflow: hidden; cursor: pointer;
}
.rd-vl-spot-title { margin: 6px 0 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(24px,2.3vw,32px); letter-spacing: -0.024em; line-height: 1.14; color: #fff; }
.rd-vl-spot-blurb { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--vl-sky-3); max-width: 40em; }
.rd-vl-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--vl-sky); }
.rd-vl-spot-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-vl-btn-white {
	min-height: 48px; padding: 13px 24px; border-radius: 999px; border: 0;
	background: #fff; color: var(--gm-navy, #003e69); font: 600 15px 'IBM Plex Sans', sans-serif; cursor: pointer;
}
.rd-vl-btn-white:hover { background: #e8f1f7; }
.rd-vl-btn-ghost {
	min-height: 48px; padding: 13px 22px; border-radius: 999px;
	background: none; border: 1px solid rgba(255,255,255,.35); color: var(--vl-sky-2);
	font: 500 15px 'IBM Plex Sans', sans-serif; cursor: pointer;
}
.rd-vl-btn-ghost:hover { border-color: var(--vl-sky); }

/* WCAG 2.5.8 Target Size (Minimum). With the full library in the rotation the
   ticks divided down to 12px wide with a 3px gap — 15px centre-to-centre, so
   both the 24px size rule AND the spacing exception failed. Fixed at 24x24 and
   allowed to wrap: every tick keeps its function (jump the spotlight to that
   video) and becomes an actual aimable target. `flex: 0 0 24px` rather than
   `1 1 24px` so a short last row stays 24px instead of stretching. */
.rd-vl-ticks { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 22px; }
.rd-vl-tick {
	flex: 0 0 24px; width: 24px; height: 24px; padding: 9px 0; background: none; border: 0; cursor: pointer;
}
.rd-vl-tick::before { content: ''; display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); }
.rd-vl-tick.is-seen::before { background: rgba(160,206,235,.4); }
.rd-vl-tick.is-now::before  { background: var(--vl-sky); }
/* Below 768px, 88 targets at 24px wrap to 7-10 rows (240px at 320px wide) and
   push the whole page sideways. The strip is a position indicator plus a
   shortcut, and BOTH of its functions survive without it on small screens: the
   prev/next arrows step the rotation, and every video has a full-size card in
   the list below. So it is hidden rather than shrunk — shrinking is what broke
   2.5.8 in the first place. */
@media (max-width: 767px) {
	.rd-vl-ticks { display: none; }
}

/* ---- placeholder data-plot thumbnails ----
   The embeds are Wistia/Vimeo, so no frame URL can be derived. The handoff
   allows this as a permanent fallback. Curve shape is chosen per subject. */
.rd-vl-plot {
	position: absolute; inset: 0; display: block;
	background:
		repeating-linear-gradient(0deg, rgba(255,255,255,.1) 0 1px, transparent 1px 25%),
		repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px 20%),
		linear-gradient(150deg, var(--vl-deep), #003e69 62%, #00567f);
}
.rd-vl-plot::after {
	content: ''; position: absolute; left: 8%; right: 8%; top: 22%; bottom: 22%;
	border: 2.2px solid rgba(160,206,235,.95); border-color: rgba(160,206,235,.95) transparent transparent transparent;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.rd-vl-plot--cv::after    { border-radius: 46% 54% 42% 58% / 60% 40% 60% 40%; border-color: rgba(160,206,235,.95) transparent rgba(160,206,235,.95) transparent; }
.rd-vl-plot--tafel::after { border-radius: 0; border-color: transparent transparent rgba(160,206,235,.95) transparent; transform: skewY(-14deg); }
.rd-vl-plot--bode::after  { border-radius: 0 0 60% 60% / 0 0 100% 100%; border-color: transparent transparent rgba(160,206,235,.95) transparent; }
.rd-vl-plot--ramp::after  { border-radius: 0; border-color: transparent transparent rgba(160,206,235,.95) transparent; transform: skewY(-22deg); }
.rd-vl-plot--ui::after    { border-radius: 4px; border-color: rgba(160,206,235,.6); }
.rd-vl-plot--pulse::after { border-radius: 0; border-color: rgba(160,206,235,.95) transparent rgba(160,206,235,.95) transparent; }

/* play discs */
.rd-vl-play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(251,251,250,.96); box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.rd-vl-play::after {
	content: ''; position: absolute; left: 55%; top: 50%; transform: translate(-50%,-50%);
	border-left: 11px solid var(--gm-navy, #003e69);
	border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.rd-vl-play--lg { width: 64px; height: 64px; }
.rd-vl-play--lg::after { border-left-width: 19px; border-top-width: 12px; border-bottom-width: 12px; }

/* ---- 3. sticky toolbar ---- */
.rd-vl-toolbar {
	position: sticky; top: 0; z-index: 30;
	background: rgba(251,251,250,.96); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--vl-line);
}
.rd-vl-toolbar-inner {
	max-width: 1440px; margin: 0 auto; padding: 12px 40px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.rd-vl-search { position: relative; display: flex; align-items: center; flex: 1 1 290px; max-width: 380px; }
.rd-vl-search svg { position: absolute; left: 14px; color: var(--gm-muted, #5f6b72); pointer-events: none; }
.rd-vl-search input {
	width: 100%; min-height: 46px; padding: 10px 16px 10px 42px;
	border: 1px solid var(--vl-ctl); border-radius: 999px; background: #fff;
	font: 400 15px 'IBM Plex Sans', sans-serif; color: var(--gm-ink, #17242b);
}
.rd-vl-sortwrap { display: flex; align-items: center; gap: 9px; }
.rd-vl-sortlabel { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gm-muted, #5f6b72); }
.rd-vl-sortwrap select {
	min-height: 46px; border-radius: 10px; border: 1px solid var(--vl-ctl);
	background: #fff; padding: 0 12px; font: 400 14.5px 'IBM Plex Sans', sans-serif; color: var(--gm-ink, #17242b);
}
.rd-vl-chips { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.rd-vl-chip {
	display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px;
	border-radius: 999px; border: 1px solid var(--vl-ctl); background: #fff;
	color: var(--gm-body, #47535b); font: 400 13.5px 'IBM Plex Sans', sans-serif; cursor: pointer;
}
.rd-vl-chip-n { color: var(--gm-muted, #5f6b72); font-size: 12.5px; }
.rd-vl-chip.is-on { background: var(--gm-navy, #003e69); border-color: var(--gm-navy, #003e69); color: #fff; font-weight: 600; }
.rd-vl-chip.is-on .rd-vl-chip-n { color: #cfe5f2; }
.rd-vl-viewtoggle { display: inline-flex; gap: 3px; padding: 3px; background: #fff; border: 1px solid var(--vl-ctl); border-radius: 999px; }
.rd-vl-viewtoggle button {
	min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none;
	color: var(--gm-body, #47535b); font: 500 14px 'IBM Plex Sans', sans-serif; cursor: pointer;
}
.rd-vl-viewtoggle button.is-on { background: var(--gm-navy, #003e69); color: #fff; }
.rd-vl-count { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--gm-muted, #5f6b72); }
.rd-vl-clearwrap { max-width: 1440px; margin: 0 auto; padding: 0 40px 10px; }
.rd-vl-clear {
	min-height: 40px; padding: 8px 16px; border-radius: 999px;
	border: 1px solid var(--vl-ctl); background: #fff; color: var(--gm-navy, #003e69);
	font: 600 13.5px 'IBM Plex Sans', sans-serif; cursor: pointer;
}

/* ---- 4. list view ---- */
.rd-vl-items { list-style: none; margin: 0; max-width: 1440px; }
/* MUST outrank the display rules below. `[hidden]` is only `display:none` from
   the UA sheet, so `.rd-vl-items.is-list .rd-vl-item { display:grid }` beat it and
   every filtered-out row stayed on screen — the filters looked broken even though
   the JS state was correct. */
.rd-vl-items .rd-vl-item[hidden] { display: none !important; }
.rd-vl-items.is-list { padding: 14px 40px 20px; }
.rd-vl-items.is-list .rd-vl-item {
	display: grid; align-items: center; gap: 20px; padding: 14px 0;
	border-bottom: 1px solid var(--vl-row);
	grid-template-columns: 150px minmax(0,1fr) 130px 150px auto;
}
/* No length column and no views column: that data does not exist. */
@media (max-width: 1179px) { .rd-vl-items.is-list .rd-vl-item { grid-template-columns: 130px minmax(0,1fr) 120px auto; } .rd-vl-items.is-list .rd-vl-coldate { display: none; } }
@media (max-width: 819px)  { .rd-vl-items.is-list .rd-vl-item { grid-template-columns: 110px minmax(0,1fr); } .rd-vl-items.is-list .rd-vl-colcat, .rd-vl-items.is-list .rd-vl-actions { display: none; } }

.rd-vl-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; }
.rd-vl-cat-tag { display: none; }
.rd-vl-title {
	display: inline; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
	font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 18px;
	letter-spacing: -0.016em; line-height: 1.3; color: var(--gm-ink, #17242b);
	/* A button is inline-block per the UA stylesheet, so it shrink-wraps its text and
	   ignores the 150px .rd-vl-body around it. One title -- "FTIR Spectroelectrochemistry
	   from Bruker & Gamry" -- carries a 23-character unbreakable token, which at 320px
	   made the button 206px inside a 150px column and pushed the page to 356px wide
	   (WCAG 2.1 SC 1.4.10). max-width alone cannot fix it: the word has to be allowed to
	   break. Same failure as the QCM "Potentiostat/Galvanostat/ZRA" heading. */
	max-width: 100%; overflow-wrap: anywhere;
}
.rd-vl-title:hover { color: var(--gm-navy, #003e69); }
.rd-vl-blurb { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--gm-muted, #5f6b72); max-width: 54em; }
.rd-vl-colcat  { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--gm-muted, #5f6b72); }
.rd-vl-coldate { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--gm-muted, #5f6b72); text-align: right; }
.rd-vl-actions { display: flex; gap: 8px; }
.rd-vl-icon {
	width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--vl-ctl);
	background: #fff; color: var(--gm-navy, #003e69); cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.rd-vl-icon:hover { border-color: var(--gm-navy, #003e69); background: #f4f8fa; }

/* ---- 5. grid view ---- */
.rd-vl-items.is-grid { display: grid; gap: 32px 24px; padding: 20px 40px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1399px) { .rd-vl-items.is-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 1039px) { .rd-vl-items.is-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 699px)  { .rd-vl-items.is-grid { grid-template-columns: 1fr; } }
.rd-vl-items.is-grid .rd-vl-item { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; }
.rd-vl-items.is-grid .rd-vl-thumb { border-radius: 13px; box-shadow: 0 12px 28px rgba(23,36,43,.12); }
.rd-vl-items.is-grid .rd-vl-cat-tag {
	display: block; position: absolute; left: 12px; top: 10px;
	font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--vl-sky-2);
}
.rd-vl-items.is-grid .rd-vl-play { width: 52px; height: 52px; }
.rd-vl-items.is-grid .rd-vl-play::after { border-left-width: 15px; border-top-width: 10px; border-bottom-width: 10px; }
.rd-vl-items.is-grid .rd-vl-title { font-size: 17.5px; }
.rd-vl-items.is-grid .rd-vl-blurb { font-size: 14px; }
.rd-vl-items.is-grid .rd-vl-colcat { display: none; }
.rd-vl-items.is-grid .rd-vl-coldate { text-align: left; font-size: 11.5px; }

.rd-vl-empty { max-width: 1440px; margin: 0 auto; padding: 40px; color: var(--gm-body, #47535b); }
.rd-vl-linkbtn { border: 0; background: none; padding: 0; color: var(--gm-navy, #003e69); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---- 6. player overlay ---- */
.rd-vl-overlay {
	position: fixed; inset: 0; z-index: 9800; overflow: auto; padding: 40px 24px;
	background: rgba(9,20,27,.84); backdrop-filter: blur(6px);
}
.rd-vl-dialog {
	position: relative; max-width: 1120px; margin: 0 auto;
	background: var(--vl-panel); border-radius: 18px; box-shadow: 0 40px 90px rgba(0,0,0,.5);
	overflow: hidden;
}
.rd-vl-stage { background: #05121a; aspect-ratio: 16/9; }
.rd-vl-stage iframe, .rd-vl-stage .wistia_responsive_padding { width: 100%; height: 100%; }
.rd-vl-close {
	position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 10px;
	background: rgba(9,26,38,.85); border: 1px solid rgba(255,255,255,.3); color: #fff; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.rd-vl-dialog-body { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 34px; padding: 28px 30px 34px; }
@media (max-width: 899px) { .rd-vl-dialog-body { grid-template-columns: 1fr; } }
.rd-vl-dialog-title { margin: 6px 0 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 26px; color: #fff; }
.rd-vl-dialog-blurb { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: var(--vl-sky-3); }
.rd-vl-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-vl-transcript {
	margin-top: 18px; max-height: 320px; overflow: auto; padding: 16px;
	background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
	font-size: 14.5px; line-height: 1.6; color: var(--vl-sky-2);
}
.rd-vl-upnext h3 { margin: 0 0 12px; font-family: 'Space Grotesk', sans-serif; font-size: 17px; color: #fff; }
.rd-vl-up {
	display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 12px; align-items: center;
	width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none;
	text-align: left; cursor: pointer; margin-bottom: 4px;
}
.rd-vl-up:hover { background: rgba(255,255,255,.08); }
.rd-vl-up-thumb { position: relative; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; }
.rd-vl-up-title { font-size: 14px; color: #eaf1f5; line-height: 1.35; }
.rd-vl-up-cat { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #a8b9c4; }

@media (max-width: 700px) {
	.rd-vl-head, .rd-vl-spot, .rd-vl-toolbar-inner, .rd-vl-clearwrap,
	.rd-vl-items.is-list, .rd-vl-items.is-grid { padding-left: 20px; padding-right: 20px; }
	.rd-vl-count { margin-left: 0; }
}

/* ---- real poster frames (VideoPosterTask) ----
   Sits over the data-plot placeholder, which stays as the fallback for the few
   videos whose provider returned no frame. */
.rd-vl-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-vl-poster[hidden] { display: none; }
/* Keep the play disc and duration/category labels legible over a real frame. */
.rd-vl-thumb::after, .rd-vl-spot-thumb::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(9,26,38,.35) 0%, rgba(9,26,38,0) 38%, rgba(9,26,38,.35) 100%);
}
.rd-vl-thumb .rd-vl-play, .rd-vl-thumb .rd-vl-cat-tag,
.rd-vl-spot-thumb .rd-vl-play { z-index: 2; }
.rd-vl-up-thumb .rd-vl-poster { border-radius: 6px; }


/* The panel copy must be exempt from the blanket `#page_type .rd-vl p { color:
   inherit }` above. That rule exists to stop legacy typography.css colouring the
   library, but its id-level specificity also beat the designer's `.ff-copy p`,
   so the blurb and eyebrow inherited typography.css's `.typography * { color:
   #444 }` — dark grey on the navy panel at 1.14:1, effectively unreadable.
   Restate the sheet's own colours at matching specificity. */
#page_type .rd-vl .ff-copy p { color: #c3d3de; }
#page_type .rd-vl .ff-copy .ff-eyebrow { color: #a0ceeb; }
#page_type .rd-vl .ff-copy li { color: #dceaf3; }
#page_type .rd-vl .ff-copy h2 { color: #fff; }

/****** FILE: themes/gamry/css/friday-focus-form.css *****/
/* ============================================================
   Weekly Friday Focus — restyle sheet for the EXISTING site form
   Target look: the signup panel in "Gamry Video Library.dc.html"
   ------------------------------------------------------------
   Strategy: the marketing platform keeps ownership of fields,
   validation, consent and list logic. This sheet only paints it.

   Wrap the platform embed in:
     <div class="ff-panel">
       <div class="ff-copy"> …headline, blurb, bullets… </div>
       <div class="ff-form"> [PLATFORM EMBED HERE] </div>
     </div>

   Gravity Forms (most likely engine on the live site): turn OFF Gravity's
     own CSS output so this sheet is not fighting gforms_reset.css.
   HubSpot: embed in RAW HTML mode (not the iframe/"Embed" default),
     otherwise none of this reaches the fields.
   Mailchimp: use the "Form embed → Unstyled" option and delete their
     inline <style> block.
   Marketo: load the form, then call form.getFormElem().show() after
     removing Marketo's own style attributes (they are inline and win
     over classes — see the [style] resets at the bottom).
   ============================================================ */

:root {
  --ff-navy: #003e69;
  --ff-navy-hover: #00567f;
  --ff-ink: #17242b;
  --ff-body: #47535b;
  --ff-muted: #5f6b72;
  --ff-line: #d5dcdf;
  --ff-paper: #fbfbfa;
  --ff-sky: #a0ceeb;
  --ff-error: #8c1d18;
  --ff-error-line: #a4231f;
  --ff-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --ff-display: 'Space Grotesk', var(--ff-sans);
  --ff-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- panel ---------- */

.ff-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
  gap: 40px;
  align-items: start;
  background: var(--ff-navy);
  border-radius: 18px;
  padding: 38px 40px;
  font-family: var(--ff-sans);
}
@media (max-width: 999px) {
  .ff-panel { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px; }
}

.ff-copy .ff-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ff-sky);
  margin: 0 0 12px;
}
.ff-copy h2 {
  font-family: var(--ff-display);
  font-size: clamp(24px, 2.2vw, 30px); font-weight: 700;
  letter-spacing: -0.022em; line-height: 1.16;
  color: #fff; margin: 0 0 12px; text-wrap: pretty;
}
.ff-copy p { font-size: 16px; line-height: 1.62; color: #c3d3de; margin: 0 0 16px; max-width: 38em; }
.ff-copy ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ff-copy li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; color: #dceaf3; }
.ff-copy li::before {
  content: ""; flex: 0 0 16px; height: 16px; margin-top: 3px;
  background: var(--ff-sky);
  clip-path: polygon(20% 52%, 42% 74%, 82% 26%, 92% 36%, 42% 90%, 10% 60%);
}

/* ---------- form shell ---------- */

.ff-form {
  background: var(--ff-paper);
  border-radius: 14px;
  padding: 26px;
}

/* Platform wrappers that need flattening. Add your own if the embed
   nests deeper — the goal is: no extra background, no float layout. */
.ff-form form,
.ff-form .gform_wrapper,
.ff-form .gform_body,
.ff-form .hs-form,
.ff-form .hs_cos_wrapper,
.ff-form #mc_embed_signup,
.ff-form #mc_embed_signup_scroll,
.ff-form .mktoForm {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  font-family: var(--ff-sans) !important;
  font-size: 15px !important;
  display: block;
}

/* One field per row, consistent rhythm. */
.ff-form .gfield,
.ff-form .hs-form-field,
.ff-form .mc-field-group,
.ff-form .mktoFormRow,
.ff-form .ff-field {
  display: flex !important;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 16px !important;
  width: 100% !important;
  float: none !important;
  clear: both;
}

/* ---------- labels ---------- */

.ff-form label,
.ff-form .gfield_label,
.ff-form .mktoLabel {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ff-ink) !important;
  width: auto !important;
  float: none !important;
  line-height: 1.4;
}
/* platform "(optional)" / helper spans inside labels */
.ff-form label .hs-form-required { color: var(--ff-error-line); }
.ff-form .mktoAsterix { color: var(--ff-error-line); float: none; padding: 0 0 0 2px; }

/* Help text under a field */
.ff-form .hs-field-desc,
.ff-form .gfield_description,
.ff-form .mktoInstruction,
.ff-form .ff-help {
  font-size: 13px !important;
  line-height: 1.5;
  color: var(--ff-muted) !important;
  margin: 0 !important;
}

/* ---------- inputs ---------- */

.ff-form input[type="text"],
.ff-form input[type="email"],
.ff-form input[type="tel"],
.ff-form select,
.ff-form .ginput_container input,
.ff-form .ginput_container select,
.ff-form .mktoField {
  min-height: 48px !important;
  width: 100% !important;
  box-sizing: border-box;
  border: 1px solid var(--ff-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  padding: 0 14px !important;
  font-family: var(--ff-sans) !important;
  font-size: 15px !important;
  color: var(--ff-ink) !important;
}
.ff-form select { padding: 0 12px !important; }
.ff-form textarea { min-height: 110px; padding: 12px 14px !important; border-radius: 10px !important; }

.ff-form input:hover,
.ff-form select:hover { border-color: #b9c4c9 !important; }

/* 2.4.7 / 1.4.11 — visible focus, 3:1 against both #fbfbfa and #fff */
.ff-form input:focus-visible,
.ff-form select:focus-visible,
.ff-form button:focus-visible,
.ff-form a:focus-visible,
.ff-form input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ff-navy) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ---------- consent checkbox ---------- */

.ff-form .hs-form-booleancheckbox,
.ff-form .hs-form-booleancheckbox-display,
.ff-form .mktoCheckboxList,
.ff-form .ff-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 20px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  color: var(--ff-body) !important;
  cursor: pointer;
}
.ff-form input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 1px 0 0 !important;
  flex: 0 0 20px;
  accent-color: var(--ff-navy);
}
/* the consent sentence itself must stay readable, not label-bold */
.ff-form .hs-form-booleancheckbox-display span,
.ff-form .mktoCheckboxList label { font-weight: 400 !important; font-size: 13.5px !important; }

/* ---------- submit ---------- */

.ff-form input[type="submit"],
.ff-form button[type="submit"],
.ff-form .hs-button,
.ff-form .gform_footer input[type="submit"],
.ff-form .gform_button,
.ff-form .mktoButton,
.ff-form #mc-embedded-subscribe {
  display: block;
  width: 100% !important;
  min-height: 50px;
  background: var(--ff-navy) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  font-family: var(--ff-sans) !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  cursor: pointer;
  transition: background 120ms ease;
}
.ff-form input[type="submit"]:hover,
.ff-form button[type="submit"]:hover,
.ff-form .hs-button:hover,
.ff-form .mktoButton:hover,
.ff-form #mc-embedded-subscribe:hover { background: var(--ff-navy-hover) !important; }

.ff-form button[disabled],
.ff-form input[type="submit"][disabled] { opacity: 0.55; cursor: default; }

/* ---------- validation ---------- */

.ff-form .hs-error-msg,
.ff-form .hs-error-msgs li,
.ff-form .gfield_validation_message,
.ff-form .validation_message,
.ff-form .mktoError,
.ff-form div.mce_inline_error,
.ff-form .ff-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--ff-sans) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.5;
  color: var(--ff-error) !important;
}
.ff-form .hs-error-msgs { list-style: none; margin: 0 !important; padding: 0 !important; }
.ff-form .hs-input.invalid,
.ff-form .mktoInvalid,
.ff-form input[aria-invalid="true"] { border-color: var(--ff-error-line) !important; }

/* Marketo floats its error bubble; pin it under the field instead. */
.ff-form .mktoErrorMsg { position: static !important; box-shadow: none !important; }

/* ---------- success state ---------- */
/* Suppress the platform's own inline message/redirect and render ours,
   or restyle theirs with this block. Only ONE confirmation should show. */

.ff-form .submitted-message,
.ff-form .gform_confirmation_message,
.ff-form .hs-form + .submitted-message,
.ff-form #mce-success-response,
.ff-form .ff-success {
  display: flex !important;
  flex-direction: column;
  gap: 14px;
  background: none !important;
  padding: 0 !important;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ff-body);
}
.ff-form .ff-success h3,
.ff-form .submitted-message p:first-child {
  font-family: var(--ff-display);
  font-size: 20px; font-weight: 700; letter-spacing: -0.018em;
  color: var(--ff-ink); margin: 0;
}
.ff-form .ff-success .ff-tick {
  width: 46px; height: 46px; border-radius: 50%;
  background: #e8f1f7;
  display: grid; place-items: center;
}
.ff-form .ff-success .ff-tick::before {
  content: ""; width: 22px; height: 22px; background: var(--ff-navy);
  clip-path: polygon(20% 52%, 42% 74%, 82% 26%, 92% 36%, 42% 90%, 10% 60%);
}

/* ---------- last resort: platform inline styles ---------- */
/* Marketo and some HubSpot themes write inline width/font on fields.
   These two rules strip the common offenders. Keep them last. */
.ff-form [style*="width"] { width: 100% !important; }
.ff-form .mktoForm * { font-family: var(--ff-sans) !important; }

/* Honeypot / bot fields must stay in the DOM but out of sight. */
.ff-form .hs_hidden,
.ff-form input[type="hidden"],
.ff-form div[style*="position: absolute"][style*="left: -5000px"] { display: none !important; }

/* ---------- Gravity Forms specifics ---------- */

/* Gravity's grid can leave the second column overflowing (the live bug).
   Force a real two-up grid with shrinkable cells, or one per row below 640px. */
.ff-form .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ff-form .gform_fields > .gfield { min-width: 0; grid-column: 1 / -1; }
/* first/last name side by side — adjust the ids/classes to the real fields */
.ff-form .gform_fields > .gfield.ff-half { grid-column: auto; }
@media (max-width: 639px) {
  .ff-form .gform_fields { grid-template-columns: 1fr !important; }
  .ff-form .gform_fields > .gfield.ff-half { grid-column: 1 / -1; }
}

/* State "(required)" in words next to the label; keep the asterisk if legal insists. */
.ff-form .gfield_required { color: #8c1d18; font-weight: 500; }
.ff-form .gfield_required_text::after { content: " (required)"; font-size: 12.5px; }

/* Validation summary Gravity puts at the top of the form */
.ff-form .gform_validation_errors {
  background: #fdf3f2 !important;
  border: 1px solid #e6bdb9 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin: 0 0 18px !important;
  box-shadow: none !important;
}
.ff-form .gform_validation_errors h2 {
  font-family: var(--ff-sans); font-size: 14.5px; font-weight: 700;
  color: var(--ff-error); margin: 0;
}

/* reCAPTCHA block spacing */
.ff-form .ginput_recaptcha { margin: 4px 0 18px !important; }
.ff-form .gform_footer { margin: 0 !important; padding: 0 !important; }

/* ===================================================================
   PLATFORM MAPPING — Microsoft Dynamics (gamry.com)
   Added to the shipped sheet, not a re-implementation of it.
   The sheet carries selectors for Gravity / HubSpot / Mailchimp / Marketo;
   this site runs a Dynamics marketing form, so its class names are mapped
   onto the same rules above. Values are the sheet's, not new ones.
   =================================================================== */

/* field row  ==  .gfield / .hs-form-field */
.ff-form .textFormFieldBlock,
.ff-form .lookupFormFieldBlock,
.ff-form .optionSetFormFieldBlock {
  display: flex !important; flex-direction: column; gap: 7px;
  margin: 0 0 16px !important; width: 100% !important; float: none !important; clear: both;
}

/* label  ==  .gfield_label */
.ff-form .marketingForm label,
.ff-form .textFormFieldBlock label,
.ff-form .lookupFormFieldBlock label,
.ff-form .optionSetFormFieldBlock label {
  font-size: 14px !important; font-weight: 600 !important; color: var(--ff-ink) !important;
  width: auto !important; float: none !important; line-height: 1.4;
  font-family: var(--ff-sans) !important; text-transform: none !important; letter-spacing: normal !important;
  margin: 0 !important;
}

/* inputs  ==  .mktoField / .ginput_container input */
.ff-form .marketingForm input[type="text"],
.ff-form .marketingForm input[type="email"],
.ff-form .marketingForm input[type="tel"],
.ff-form .marketingForm select,
.ff-form .marketingForm textarea {
  min-height: 48px !important; width: 100% !important; box-sizing: border-box;
  border: 1px solid var(--ff-line) !important; border-radius: 10px !important;
  background: #fff !important; padding: 0 14px !important;
  font-family: var(--ff-sans) !important; font-size: 15px !important; color: var(--ff-ink) !important;
}
.ff-form .marketingForm select { padding: 0 12px !important; }
.ff-form .marketingForm textarea { min-height: 110px; padding: 12px 14px !important; }

/* submit  ==  .hs-button / .gform_button. The platform wraps the label in its
   own <span> carrying color:#444, so the colour has to reach the child too. */
.ff-form .submitButton,
.ff-form .marketingForm .primaryButton { }
.ff-form .submitButton *,
.ff-form .marketingForm .primaryButton * { color: inherit !important; background: none !important; }

/* Dynamics renders fixed pixel widths (580 / 560 / 280px) that overflow the
   420px card; nothing inside it may exceed it. */
.ff-form .marketingForm, .ff-form .marketingForm *,
.ff-form .DynamicsFormWidget, .ff-form .DynamicsFormWidget * {
  max-width: 100% !important; min-width: 0 !important; box-sizing: border-box;
}
.ff-form .columnContainer, .ff-form .emptyContainer,
.ff-form .wrap-section, .ff-form .notification-container {
  width: 100% !important; float: none !important; margin-left: 0 !important; margin-right: 0 !important;
}

/* Required marker: the platform paints "*" on EVERY label, including Phone
   Number, whose input is not required. .ff-req is applied in JS from the
   control's real required state, so the word only appears where it is true. */
.ff-form .marketingForm label::after { content: none !important; }
.ff-form .marketingForm label.ff-req::after {
  content: " (required)" !important; color: #8c1d18 !important;
  font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: normal;
}

/* Submit label colour: matches the panel's bullet copy (#dceaf3), per the
   client's instruction, rather than the sheet's default white. The platform
   wraps the label in a <span> with its own colour, hence the child selector. */
.ff-form .submitButton, .ff-form .submitButton *,
.ff-form .marketingForm .primaryButton, .ff-form .marketingForm .primaryButton * {
  color: #dceaf3 !important;
}

/* One field per row inside the panel card.
   The sheet's two-up name row is gated on `min-width: 640px`, which measures the
   VIEWPORT — but the card is only 420px wide, so the override fired and gave each
   name field a 184px column. At that width "First Name (required)" wrapped onto
   four lines. The card is never wide enough for two columns, so stack them and
   let the label and its marker sit on one line. */
.ff-form .wrap-section,
.ff-form .emptyContainer.columns-equal-class {
  display: block !important;
  flex-direction: column !important;
}
.ff-form .columnContainer {
  width: 100% !important; max-width: 100% !important;
  flex: 1 1 100% !important; display: block !important;
}
.ff-form .marketingForm label { white-space: normal; overflow-wrap: break-word; }

/* The platform makes the label a growing flex item (flex: 1 1 0%), so inside the
   column-direction field block its box stretched to fill the row and left a gap
   between label and input. Hug the text instead. */
.ff-form .marketingForm label { flex: 0 0 auto !important; align-self: stretch; }

/* Label spacing: the platform gives the label `flex: 1 1 0%`, so in a
   column-direction field block it grew to absorb the row's leftover height —
   88px tall for a 20px line, pushing the input away. Overriding flex-grow kept
   losing, so drop the flex context entirely: a plain block with a bottom margin
   reproduces the sheet's 7px label-to-field gap with nothing left to stretch. */
.ff-form .textFormFieldBlock,
.ff-form .lookupFormFieldBlock,
.ff-form .optionSetFormFieldBlock {
  display: block !important;
  gap: 0 !important;
}
.ff-form .marketingForm label,
.ff-form .textFormFieldBlock label,
.ff-form .lookupFormFieldBlock label,
.ff-form .optionSetFormFieldBlock label {
  display: block !important;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 7px !important;
}

/* The 88px label boxes were the PSEUDO-ELEMENT, not the label: the platform
   styles its own `label::after` (the asterisk) as a positioned block with its
   own box, and swapping only `content` inherited all of that. Only the labels
   carrying a marker were tall — Phone Number, which has none, was already 20px.
   Reset the pseudo-element to plain inline text. */
.ff-form .marketingForm label.ff-req::after {
  display: inline !important;
  position: static !important;
  float: none !important;
  width: auto !important; height: auto !important;
  min-width: 0 !important; min-height: 0 !important;
  margin: 0 0 0 4px !important; padding: 0 !important;
  line-height: inherit !important; vertical-align: baseline !important;
  background: none !important; border: 0 !important;
}

/* The widget's own "Subscribe to our Weekly Friday Focus Emails" heading is
   WHITE — it was styled for the platform's dark panel — so on the paper card it
   measured 1.04:1 and was effectively invisible. The design replaces it with the
   panel's own h2, so hide it rather than recolour a duplicate heading.
   (An earlier rule targeted `.WidgetHolder > h3`; the real element sits deeper,
   inside the form, so it never matched.) */
.ff-form .marketingForm h1, .ff-form .marketingForm h2, .ff-form .marketingForm h3,
.ff-form .WidgetHolder h3, .ff-form .WidgetHolder h4 { display: none !important; }
/* Anything else the platform paints white would vanish on the paper card too. */
.ff-form .marketingForm, .ff-form .marketingForm p, .ff-form .marketingForm span,
.ff-form .marketingForm div { color: var(--ff-ink, #17242b); }
.ff-form .submitButton *, .ff-form .marketingForm .primaryButton * { color: #dceaf3 !important; }

/* Direct hit: the widget's heading sits outside both .marketingForm and
   .WidgetHolder, so the scoped selectors above missed it. The card carries no
   heading of its own in this design — the panel's h2 is the heading — so any
   heading inside .ff-form is a duplicate and is hidden. */
.ff-form h1, .ff-form h2, .ff-form h3, .ff-form h4 { display: none !important; }

/* Phone Number uses its own container class — .phoneFormFieldBlock — and wraps
   the input in a .phoneCountryCode flex element (the "+" country-code prefix),
   so none of the field-block or label rules above reached it. That left it with
   the platform's own spacing: a 24px label-to-field gap against 7px everywhere
   else. Bring it into the same rhythm. */
.ff-form .phoneFormFieldBlock {
  display: block !important;
  gap: 0 !important;
  margin: 0 0 16px !important;
  width: 100% !important; float: none !important;
}
.ff-form .phoneFormFieldBlock > label {
  display: block !important;
  margin: 0 0 7px !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--ff-ink) !important; line-height: 1.4;
}
/* The wrapper is the field for spacing purposes: no inherited top offset. */
.ff-form .phoneCountryCode {
  margin-top: 0 !important; padding-top: 0 !important;
  width: 100% !important;
}