/* ========================================================================================
 * plugin-skins.css - kit skin for Anchor Tools modules and the theme's own speakers and
 * testimonials (L2 layer). Speakers and testimonials moved from Anchor Tools into
 * inc/speakers/ and inc/testimonials/ with their markup, classes and custom properties
 * unchanged, so "the plugin" below means those ported features for them.
 *
 * Task 10 verified both modules against the live installs (anchor-speakers,
 * anchor-testimonials) and corrected this file to their REAL rendered markup; the layer
 * comment below documents what changed and why.
 *
 * Both modules already ship their own layout CSS (speakers.css / testimonials.css),
 * driven entirely by custom properties the shortcode renderer sets inline
 * (--as-cols/--as-gap/--as-photo-radius, --at-cols/--at-gap/--at-card-bg/--at-card-radius/
 * --at-accent). This file therefore only (a) sets those custom properties to the kit's
 * design tokens and (b) adds the typography/surface treatment neither plugin stylesheet
 * covers (quote size, name weight, border-left accent, card shadow) - it does NOT
 * redeclare display/grid-template-columns, which would fight the plugin's own rules at
 * equal specificity depending on enqueue order.
 *
 * Testimonials structure correction: real markup nests cards inside
 * .anchor-testimonials__viewport > .anchor-testimonials__track > figure.anchor-testimonial
 * (not direct children of .anchor-testimonials, as an earlier unverified draft of this file
 * assumed), and the photo class is .anchor-testimonial__photo (__media is the video-play
 * button). Selectors below target the real structure.
 *
 * Events list/registration remains out of scope: it exposes no documented custom-property
 * contract, so nothing here targets markup that was not verified. base.css's global element
 * rules already apply to it inside a .section.
 *
 * Task 11 fix round 1 is the one exception: a real ticket-row wrap bug, fixed against the
 * plugin's own verified, stable markup classes (class-woocommerce.php render_ticket_row(),
 * .anchor-event-ticket-row/-label/-price and .anchor-event-qty), see the block below.
 *
 * Store locator (compact card): [anchor_store_locator card="compact"] now DOES ship a
 * documented custom-property contract (--asl-compact-*, anchor-store-locator/README.md), so
 * it gets the same treatment as testimonials/speakers below - custom properties only, no
 * redeclared grid/layout rules.
 * ======================================================================================== */

/* --- testimonials ------------------------------------------------------------------------ */
.anchor-testimonials{
	--at-cols:3;
	--at-gap:var(--cd-5);
	--at-card-bg:var(--cd-ground-raised);
	--at-card-radius:var(--cd-r-md);
	--at-accent:var(--cd-accent);
}
/* Card (owner feedback 27-testimonial-card-target.png, in our colors): large rounded
 * corners, a big faint quote mark top-left, the quote, then a person row (circular
 * headshot when the testimonial has a featured image, bold name, small uppercase meta,
 * stars when rated). Light sections: a white card with a hairline border. Deep sections
 * (.on-dark, below): a translucent deep-green glass card with a light border.
 * Everything goes through the plugin's own BEM classes and --at-* properties. */
.anchor-testimonial{
	position:relative;
	border:1px solid var(--cd-line);
	border-radius:var(--cd-r-lg);
	box-shadow:var(--cd-shadow-1);
	padding:calc(var(--cd-7) + var(--cd-3)) var(--cd-6) var(--cd-6);
}
.anchor-testimonial::before{
	content:"\201C";position:absolute;left:var(--cd-5);top:var(--cd-2);
	font:700 5rem/1 Georgia,serif;color:var(--cd-ink-highlight);opacity:.25;pointer-events:none;
}
/* --at-quote-lines: lines a quote clamps to (keeps slider cards an even height). */
.anchor-testimonial__quote{
	--at-quote-lines:6;
	font-size:var(--cd-body-lg);line-height:1.6;color:var(--cd-ink);padding:0;
	display:-webkit-box;-webkit-line-clamp:var(--at-quote-lines);line-clamp:var(--at-quote-lines);
	-webkit-box-orient:vertical;overflow:hidden;
}
/* A card headline (tools/import-testimonials.php writes it as the quote's first paragraph
 * from tools/data/testimonial-headlines.json): bold, upright, in the heading ink. */
.anchor-testimonial__quote .anchor-testimonial__headline{margin:0 0 var(--cd-2);font-weight:700;font-style:normal;font-size:var(--cd-body-lg);line-height:1.3;color:var(--cd-ink-strong)}
.on-dark .anchor-testimonial__quote .anchor-testimonial__headline{color:var(--cd-white)}
.anchor-testimonial__quote:has(.anchor-testimonial__headline){--at-quote-lines:8}
/* Person row: photo in its own column spanning the name / meta / stars lines; with no
 * photo (none set yet) the text simply starts at the left edge. */
.anchor-testimonial__person{
	display:grid;grid-template-columns:minmax(0,1fr);align-items:center;column-gap:var(--cd-4);row-gap:2px;
	padding:var(--cd-5) 0 0;margin-top:auto;
}
/* With a photo: rows 1fr / name / meta / stars / 1fr so the text block centres on the
   photo whether or not the meta and stars lines exist. */
.anchor-testimonial__person:has(.anchor-testimonial__photo){grid-template-columns:64px minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr}
.anchor-testimonial__person:has(.anchor-testimonial__photo) .anchor-testimonial__name{grid-area:2 / 2}
.anchor-testimonial__person:has(.anchor-testimonial__photo) .anchor-testimonial__meta{grid-area:3 / 2}
.anchor-testimonial__person:has(.anchor-testimonial__photo) .anchor-testimonial__rating{grid-area:4 / 2}
.anchor-testimonial__photo{grid-row:1 / -1;grid-column:1;width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid color-mix(in srgb,var(--cd-ink-highlight) 45%,transparent)}
.anchor-testimonial__name{font-weight:800;color:var(--cd-ink-strong);font-size:var(--cd-body)}
/* A testimonial with no real name (import-testimonials.php leaves it blank) prints an
   empty name span; hide it so the card shows no stray gap. */
.anchor-testimonial__name:empty{display:none}
.anchor-testimonial__meta{color:var(--cd-ink-muted);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:1}
.anchor-testimonial__rating{margin-left:0;letter-spacing:.12em;color:var(--at-accent)}
/* Slider controls: round translucent prev/next flanking the dots. */
.anchor-testimonials{--at-arrow-size:48px;--at-arrow-bg:color-mix(in srgb,var(--cd-ground-deep) 8%,transparent);--at-arrow-fg:var(--cd-ink-strong)}
.anchor-testimonials__controls{margin-top:var(--cd-6);gap:var(--cd-4)}
.anchor-testimonials__dot{background:var(--cd-ink-strong);opacity:.25}
.anchor-testimonials__dot.active{background:var(--at-accent);opacity:1}

/* --video-grid: card has no quote/padding, just the play thumbnail + name caption. */
/* --slider: the shared carousel shows --at-cols cards at every width (3 by default), which
   squeezed each card to ~88px at 390px. Step the visible count down with the viewport. */
@media (max-width:899px){
	.anchor-testimonials--slider.anchor-testimonials--slider .anchor-testimonials__track{--anchor-carousel-cols:2}
}
@media (max-width:599px){
	.anchor-testimonials--slider.anchor-testimonials--slider .anchor-testimonials__track{--anchor-carousel-cols:1}
}

.anchor-testimonials--video-grid .anchor-testimonial{border:0;box-shadow:none;padding:0;background:transparent}
.anchor-testimonials--video-grid .anchor-testimonial::before{content:none}
.anchor-testimonials--video-grid .anchor-testimonial__person{padding:var(--cd-2) 0 0}

/* --- speakers ------------------------------------------------------------------------- */
.anchor-speakers{
	--as-cols:3;
	--as-gap:var(--cd-6);
	--as-photo-radius:var(--cd-r-lg);
}
.anchor-speaker{text-align:center;align-items:center}
.anchor-speaker__photo{background:var(--cd-teal-300);overflow:hidden}
/* The headshot fills its square box: without an explicit height the img kept its own
   intrinsic ratio (237px tall in a 362px box), leaving a teal band under the photo. */
.anchor-speaker__photo.anchor-speaker__photo img{width:100%;height:100%;object-fit:cover;border-radius:0}
.anchor-speaker__name{font-size:var(--cd-h4);color:var(--cd-ink-strong);margin-top:var(--cd-3)}
.anchor-speaker__credentials{font-family:var(--cd-font);font-size:var(--cd-small);font-weight:400;letter-spacing:0;color:var(--cd-ink-muted);line-height:1.5}
.anchor-speaker__title{font-size:var(--cd-small);color:var(--cd-ink-muted)}
.anchor-speaker__excerpt{font-size:var(--cd-small);line-height:1.55;max-width:44ch;color:var(--cd-ink)}
.anchor-speaker__link{color:var(--cd-ink-accent);font-weight:700;font-size:var(--cd-small);margin-top:var(--cd-1)}
/* Grid cards read as one set: the grid already stretches every card to the row height, so
   the "View profile" link takes the leftover space above it (margin-top:auto) and sits on the
   card's bottom edge. With 2+ cards, credentials reserve two lines so a long set that wraps
   (Olmos) does not push his bio down out of line with the others; a lone card skips it. */
.anchor-speakers--grid .anchor-speaker__link{margin-top:auto;padding-top:var(--cd-1)}
.anchor-speakers--grid:has(> .anchor-speaker + .anchor-speaker) .anchor-speaker__credentials{min-height:3em;min-height:2lh}

/* --compact: half-gap grid from speakers.css already; shrink the photo so a "full faculty"
   toggle list of 9 reads as a dense directory, not a second copy of the featured grid. */
.anchor-speakers--compact .anchor-speaker__photo{max-width:120px}
.anchor-speakers--compact .anchor-speaker__name{font-size:var(--cd-body);margin-top:var(--cd-2)}
.anchor-speakers--compact .anchor-speaker__excerpt{display:none}

/* --avatars/--list: the .accordion--panel faculty accordion's closed-row avatar stack and
 * open-card speaker list (owner screenshot, feedback-2026-09-25/2.png). Both want circular
 * photos, unlike --as-photo-radius's kit-wide default (--cd-r-lg, a rounded square, set
 * above for the grid/compact featured cards). */
.anchor-speakers--avatars{
	--as-avatar-size:30px;
	--as-avatar-overlap:10px;
	--as-avatar-ring:var(--cd-ground-raised);
}
.anchor-speakers--list{
	--as-photo-radius:50%;
	--as-list-border:var(--cd-line);
	--as-title-color:var(--cd-ink-muted);
	--as-cta-color:var(--cd-ink-accent);
}
/* Fix round 1 (owner, controller viewed fac-open.png against feedback-2026-09-25/2.png):
 * (1) the base .anchor-speaker{text-align:center} rule above (grid/compact's own look)
 * also hit list, centering the name/role/credentials text instead of the left-aligned,
 * photo-left row the design shows; override to left here (the row's own vertical
 * centering is unaffected, that is speakers.css's own .anchor-speakers--list
 * align-items:center on the grid, not this text-align).
 * (2)/(3) the plugin always nests .anchor-speaker__credentials inside .anchor-speaker__name
 * for this layout (its own fixed markup contract; not theme-controllable), so with
 * show="credentials,title" both the raw credentials string ("DDS, DABCP, ...") AND the
 * role title used to render, duplicating a degree already in the (now-normalized, see
 * tools/import-speakers.php) display name and reading in an unrelated monospace/teal
 * style. Restyled credentials to the same muted body font as the role line (not mono), and
 * hidden them with :has() whenever a role title paragraph follows (i.e. only ever shown as
 * a role-title substitute, never alongside one) - the exact "no role title -> show
 * credentials instead, in the same muted style" rule the owner asked for. */
.anchor-speakers--list .anchor-speaker{text-align:left}
.anchor-speakers--list .anchor-speaker__name{color:var(--cd-ink-strong);font-weight:700}
.anchor-speakers--list .anchor-speaker__credentials{
	font-family:var(--cd-font);font-size:var(--cd-small);font-weight:400;
	letter-spacing:normal;color:var(--as-title-color,rgba(0,0,0,.6));
}
.anchor-speakers--list .anchor-speaker__name:has(+ .anchor-speaker__title) .anchor-speaker__credentials{
	display:none;
}

/* --- events: ticket row wrap fix (Task 11 fix round 1) ---------------------------------
 * The plugin's own assets/frontend.css sets .anchor-event-ticket-row to
 * display:flex;flex-wrap:wrap with the label at flex:1 1 auto and the price/qty as plain
 * flex items with no explicit basis. A long tier label (e.g. "MD, DC, PT, DO or Non-Dental
 * Professional") grows to fill the row, leaving no room for the third item -- the qty
 * stepper (.anchor-event-qty, the div wrapping the -/input/+ trio) -- which then wraps
 * onto its own line alone while the price stays put on the label's line. Verified live on
 * the Pediatric OSA course page (the only course with a bookable date right now).
 *
 * Fix: keep the row itself from wrapping, and instead let the (now unconstrained, min-
 * width:0) label wrap its OWN text across lines within a shrunk box, while the price and
 * qty stepper keep their natural size (flex:none) and always stay together at the row's
 * end. No plugin file touched.
 *
 * Specificity note: on a page that embeds [event_registration] (not the plugin's own
 * single-event template), the plugin enqueues its frontend.css from inside the shortcode
 * handler -- after this theme's own wp_head-time enqueue already ran -- so it prints late,
 * at wp_footer (Anchor Events' own RENDER-D18 comment documents the same pattern for its
 * series archive). That means frontend.css can render AFTER this file in the cascade, so
 * matching its selectors' specificity is not enough to win on source order alone; each
 * selector below repeats a class token once purely to outrank the plugin's own
 * .anchor-event-ticket-rows .anchor-event-ticket-row (0,2,0) with (0,3,0), regardless of
 * which stylesheet happens to load last.
 * ----------------------------------------------------------------------------------------- */
.anchor-event-ticket-rows.anchor-event-ticket-rows .anchor-event-ticket-row{
	flex-wrap:nowrap;font-size:var(--cd-small);
}
.anchor-event-ticket-rows.anchor-event-ticket-rows .anchor-event-ticket-row .anchor-event-ticket-label{
	min-width:0;
}
.anchor-event-ticket-rows.anchor-event-ticket-rows .anchor-event-ticket-row .anchor-event-ticket-price,
.anchor-event-ticket-rows.anchor-event-ticket-rows .anchor-event-ticket-row .anchor-event-qty{
	flex:none;
}

/* --- events: inline dates widget on course pages (final review I7, minors) --------------
 * Same doubled-class specificity trick as the block above, for the same late-printing
 * frontend.css reason.
 *   - The plugin's .anchor-event-inline-dates grid has an auto track, so its min-content
 *     (a nowrap ticket row) pushed the date card past a 390px viewport; minmax(0,1fr) keeps
 *     the card inside its container.
 *   - Below 480px a ticket row wraps: the tier label takes its own line, price and qty
 *     stepper share the next one, so the + button is never clipped.
 *   - The qty field is pinned to the stepper's own size (the parent theme's generic input
 *     rules otherwise widen it inside the pill).
 *   - "Register / Add to cart" wears the kit's .btn--primary look (button.css tokens).
 * ----------------------------------------------------------------------------------------- */
.anchor-event-inline-dates.anchor-event-inline-dates{grid-template-columns:minmax(0,1fr)}
.anchor-event-inline-dates.anchor-event-inline-dates .anchor-event-inline-date{
	min-width:0;padding:var(--cd-5);border-color:var(--cd-line);border-radius:var(--cd-r-md);box-shadow:var(--cd-shadow-1);
}
.anchor-event-inline-dates.anchor-event-inline-dates .anchor-event-inline-date-title{font-size:var(--cd-h4);color:var(--cd-ink-strong)}
.anchor-event-qty.anchor-event-qty .anchor-event-ticket-qty{
	width:44px;min-width:0;min-height:0;height:30px;padding:0;margin:0;box-sizing:border-box;font-size:var(--cd-small);
}
@media (max-width:479px){
	.anchor-event-inline-dates.anchor-event-inline-dates .anchor-event-inline-date{padding:var(--cd-4)}
	.anchor-event-ticket-rows.anchor-event-ticket-rows .anchor-event-ticket-row{flex-wrap:wrap;row-gap:var(--cd-2)}
	.anchor-event-ticket-rows.anchor-event-ticket-rows .anchor-event-ticket-row .anchor-event-ticket-label{flex:1 1 100%}
	.anchor-event-ticket-rows.anchor-event-ticket-rows .anchor-event-ticket-row .anchor-event-ticket-price{margin-inline-end:auto}
}
.anchor-event-registration.anchor-event-registration .anchor-event-button.anchor-event-register{
	display:inline-flex;align-items:center;justify-content:center;min-height:48px;
	padding:var(--cd-3) var(--cd-6);border:2px solid var(--cd-accent);border-radius:var(--cd-r-pill);
	font:700 var(--cd-body)/1.2 var(--cd-font);cursor:pointer;transition:background-color .2s,border-color .2s;
	/* !important only because Anchor Events always prints an inline
	   .anchor-event-register{background:<setting> !important;...} rule (enqueue_frontend_assets());
	   higher specificity plus !important is the only way the kit's Theme Colors win. */
	background:var(--cd-accent) !important;border-color:var(--cd-accent) !important;color:var(--cd-accent-ink) !important;
	filter:none !important;
}
.anchor-event-registration.anchor-event-registration .anchor-event-button.anchor-event-register:hover,
.anchor-event-registration.anchor-event-registration .anchor-event-button.anchor-event-register:focus-visible{
	background:var(--cd-accent-hover) !important;border-color:var(--cd-accent-hover) !important;
}

/* --- speakers list: owner faculty target (feedback-2026-09-25/2.png) ---------------------
 * Name at the h4 step, role line at body size and muted, a ~96px photo. Name size, gap and
 * role color go through the plugin's own custom properties (speakers.css). The plugin has
 * NO custom property for the list photo size (its grid template hard-codes a 64px first
 * column), so the column is widened here with a doubled class to outrank speakers.css
 * regardless of load order; the role line's font size likewise has no property. */
.anchor-speakers--list{
	--as-name-size:var(--cd-h4);
	--as-photo-gap:var(--cd-5);
	--as-title-color:var(--cd-ink-muted);
}
.anchor-speakers--list.anchor-speakers--list .anchor-speaker{grid-template-columns:96px minmax(0,1fr) auto}
.anchor-speakers--list.anchor-speakers--list .anchor-speaker__title{font-size:var(--cd-body)}
/* layout="cards" (About Us guest speakers) also carries .anchor-speakers--list: keep its compact
   56px round photo, not the list row's 96px column above. */
.anchor-speakers--cards.anchor-speakers--cards .anchor-speaker{grid-template-columns:56px minmax(0,1fr) auto}

/* --- speakers on a deep section (course pages' "Meet your expert speaker") ---------------- */
.on-dark .anchor-speaker__name{color:var(--cd-white)}
.on-dark .anchor-speaker__credentials,.on-dark .anchor-speaker__title{color:var(--cd-ink-invert-muted)}
.on-dark .anchor-speaker__excerpt{color:var(--cd-ink-invert-muted)}
.on-dark .anchor-speaker__photo{background:var(--cd-ground-tint)}

/* --- universal popups: kit .popup-panel content runs edge to edge ------------------------
 * The plugin pads .up-content__inner 16px; a .popup-panel child cancels it so its header bar
 * or lead photo reaches the modal's rounded edges (popup-panel.css). */
.up-content__inner > .popup-panel{margin:-16px}
.up-modal .up-content-wrap{border-radius:var(--cd-r-md)}

/* --- anchor gallery (feature_gallery preset) inside a deep panel --------------------------
 * The featured player keeps the plugin's own layout; only the frame radius and the strip's
 * gap follow the kit, and the plugin's dark theme background is dropped so the panel shows. */
.panel .anchor-video-gallery{--avg-radius:var(--cd-r-md);background:transparent}

/* --- .speaker-feature: one speaker shown large beside a bio (course pages' "Meet your
 * expert speaker", live Toronto): wrap [anchor_speakers ... columns="1" show="credentials"]
 * so the single card is a centered, capped-width portrait instead of a full-column tile. */
.speaker-feature .anchor-speaker{max-width:420px;margin-inline:auto;align-items:center;text-align:center;--as-photo-radius:var(--cd-r-lg)}
.speaker-feature .anchor-speaker__name{font-size:var(--cd-h3)}

/* --- testimonial cards on a deep section: translucent deep-green glass (27-testimonial-
 * card-target.png), white text, light border and controls. */
.on-dark .anchor-testimonials{--at-card-bg:color-mix(in srgb,var(--cd-ground-deeper) 55%,transparent);--at-arrow-bg:color-mix(in srgb,var(--cd-white) 14%,transparent);--at-arrow-fg:var(--cd-white)}
.on-dark .anchor-testimonial{
	color:var(--cd-white);
	border-color:var(--cd-glass-border);
	background-image:var(--cd-glass-sheen);
	box-shadow:var(--cd-glass-shadow);
	-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.on-dark .anchor-testimonial::before{color:var(--cd-white);opacity:.2}
.on-dark .anchor-testimonial__quote,.on-dark .anchor-testimonial p{color:var(--cd-white)}
.on-dark .anchor-testimonial__name{color:var(--cd-white)}
.on-dark .anchor-testimonial__meta{color:var(--cd-ink-invert-muted)}
.on-dark .anchor-testimonial__photo{border-color:color-mix(in srgb,var(--cd-white) 35%,transparent)}
.on-dark .anchor-testimonials__dot{background:var(--cd-white);opacity:.35}
.on-dark .anchor-testimonials__dot.active{background:var(--cd-white);opacity:1}

/* --- store locator: compact card (For Patients "Find your Centre"), custom properties
 * only per the plugin's own --asl-compact-* contract (anchor-store-locator/README.md). */
.anchor-store-card--compact{
	--asl-compact-bg:var(--cd-ground-raised);
	--asl-compact-border:var(--cd-line);
	--asl-compact-radius:var(--cd-r-md);
	--asl-compact-title-color:var(--cd-ink-strong);
	--asl-compact-owner-color:var(--cd-ink-muted);
	--asl-compact-link-color:var(--cd-ink-brand);
}

/* --- store locator results: compact cards everywhere the locator appears (owner 2026-09-29:
 * the plugin's default card, a full-width portrait above the name plus the bio excerpt, was
 * "huge and obnoxious"). A small round photo beside the name, the distance as a pill, the
 * address and contact lines in small type, no excerpt (the "View location" link carries the
 * full profile), three cards across on desktop. The plugin's card markup is built in its
 * frontend.js (createCard); class tokens are doubled to outrank frontend.css whichever loads
 * last. */
.anchor-store-results.anchor-store-results{gap:var(--cd-3)}
@media (min-width:700px){.anchor-store-results.anchor-store-results{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.anchor-store-results.anchor-store-results{grid-template-columns:repeat(3,minmax(0,1fr))}}
.anchor-store-card.anchor-store-card{
	gap:var(--cd-2);align-content:start;padding:var(--cd-4);
	border-color:var(--cd-line);border-radius:var(--cd-r-md);background:var(--cd-ground-raised);
}
.anchor-store-card.anchor-store-card.is-active{border-color:var(--cd-ink-brand);box-shadow:var(--cd-shadow-1)}
.anchor-store-card-header.anchor-store-card-header{flex-direction:row;align-items:center;gap:var(--cd-3)}
.anchor-store-card-header.anchor-store-card-header img{
	flex:none;width:56px;height:56px;border-radius:var(--cd-r-pill);object-fit:cover;object-position:top;
}
.anchor-store-card.anchor-store-card h3{font-size:var(--cd-body);line-height:1.3;color:var(--cd-ink-strong)}
.anchor-store-distance.anchor-store-distance{
	justify-self:start;padding:2px var(--cd-2);border-radius:var(--cd-r-pill);
	background:var(--cd-ground-tint);color:var(--cd-ink-brand);font-size:var(--cd-eyebrow);font-weight:700;
}
.anchor-store-address.anchor-store-address,.anchor-store-meta.anchor-store-meta{font-size:var(--cd-small);line-height:1.5;color:var(--cd-ink)}
.anchor-store-meta.anchor-store-meta a{background:none;color:var(--cd-ink-brand);font-weight:600}
.anchor-store-excerpt.anchor-store-excerpt{display:none}
.anchor-store-link.anchor-store-link{font-size:var(--cd-small);font-weight:700;color:var(--cd-ink-accent)}

/* --- feature_gallery (layout "gallery": one featured player over a thumbnail strip), as the
 * live course pages show it: three thumbs across at full strength (the plugin's
 * --avg-thumb-size is a fixed px width set inline on the root, so the thumbs are sized here
 * as a third of the strip minus its two gaps), no scrollbar, and plain white chevrons that
 * appear on hover, over the strip (the plugin's own .avg-nav buttons, which scroll it) and
 * over the featured player (.avg-feat-nav, added by site.js initFeatureGallery(), which also
 * plays the featured video in place instead of opening the lightbox). */
.avg-layout-gallery .avg-gallery-thumb{width:calc((100% - 2 * var(--avg-gap)) / 3);opacity:.85}
.avg-layout-gallery .avg-gallery-thumb:hover,.avg-layout-gallery .avg-gallery-thumb.active{opacity:1}
.avg-layout-gallery .avg-gallery-strip{scrollbar-width:none;padding-bottom:4px}
.avg-layout-gallery .avg-gallery-strip::-webkit-scrollbar{display:none}
.avg-layout-gallery .avg-nav,
.avg-layout-gallery .avg-feat-nav{
	width:44px;height:44px;background:transparent;box-shadow:none;color:var(--cd-white);
	filter:drop-shadow(0 1px 4px rgb(0 0 0 / .6));opacity:0;transition:opacity .2s,transform .15s;
}
.avg-layout-gallery .avg-nav svg,.avg-layout-gallery .avg-feat-nav svg{width:26px;height:26px}
.avg-layout-gallery .avg-gallery-strip-wrapper:hover .avg-nav:not(:disabled),
.avg-layout-gallery .avg-gallery-featured:hover .avg-feat-nav,
.avg-layout-gallery .avg-feat-nav:focus-visible{opacity:1}
.avg-layout-gallery .avg-gallery-strip-wrapper .avg-nav:disabled{opacity:0}
.avg-feat-nav{
	all:unset;position:absolute;top:50%;z-index:3;display:grid;place-items:center;cursor:pointer;
	transform:translateY(-50%);
}
.avg-feat-nav--prev{left:var(--cd-3)}
.avg-feat-nav--next{right:var(--cd-3)}
.avg-feat-nav svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.avg-layout-gallery .avg-gallery-featured{position:relative}
.avg-gallery-featured .avg-thumb{position:relative}
/* No hover on touch screens: keep the chevrons visible there. */
@media (hover:none){
	.avg-layout-gallery .avg-feat-nav,
	.avg-layout-gallery .avg-gallery-strip-wrapper .avg-nav:not(:disabled){opacity:1}
}
.avg-gallery-featured .avg-feat-player{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0}
.avg-gallery-featured.is-playing .avg-play{display:none}

/* --- Zoho CRM web-to-lead forms: embedded inline (.zoho-form wrapper) and inside Universal
 * Popups (.up-modal), one skin for both (2026-10-08: the popups relied on Divi's custom CSS,
 * which hid the Zoho title, made fields full width and turned the submit orange; that CSS goes
 * with Divi). The Mini Residency notify-me form is Zoho's own script embed (kept as-is so the lead capture
 * snippet still recognises it, see the tmj-optin skill). Zoho injects its markup with inline
 * styles (Arial, fixed widths, a white box), so this skin needs !important to put its fields
 * on the kit: full-width inputs, kit label type, the submit as the primary button, no reset.
 * The card around it already carries the heading, so Zoho's own title is hidden. */
.zoho-form .crmWebToEntityForm,.up-modal .crmWebToEntityForm{max-width:none !important;padding:0 !important;background:transparent !important;color:inherit !important}
.zoho-form .zcwf_title,.up-modal .zcwf_title{display:none !important}
.zoho-form .zcwf_row,.up-modal .zcwf_row{margin:0 0 var(--cd-3) !important}
.zoho-form .zcwf_col_lab,.up-modal .zcwf_col_lab,.zoho-form .zcwf_col_fld,.up-modal .zcwf_col_fld{float:none !important;width:100% !important;padding:0 !important}
.zoho-form .zcwf_col_lab,.up-modal .zcwf_col_lab,.zoho-form .zcwf_col_lab label,.up-modal .zcwf_col_lab label{margin-bottom:var(--cd-1);font:700 var(--cd-small)/1.4 var(--cd-font) !important;color:var(--cd-ink-strong) !important}
.zoho-form input[type="text"],.up-modal input[type="text"]{box-sizing:border-box;width:100% !important;min-height:46px;padding:0 var(--cd-3) !important;font:400 var(--cd-body) var(--cd-font) !important;color:var(--cd-ink-strong) !important;background:var(--cd-white) !important;border:1px solid var(--cd-line-strong) !important;border-radius:var(--cd-r-sm) !important}
.zoho-form input[type="text"]:focus,.up-modal input[type="text"]:focus{outline:none;box-shadow:var(--cd-ring) !important}
.zoho-form input[type="reset"],.up-modal input[type="reset"]{display:none !important}
.zoho-form input[type="submit"],.up-modal input[type="submit"]{width:auto !important;max-width:none !important;overflow:visible !important;text-overflow:clip !important;min-height:48px;padding:var(--cd-3) var(--cd-6) !important;border:2px solid var(--cd-accent) !important;border-radius:var(--cd-r-pill) !important;background:var(--cd-accent) !important;color:var(--cd-accent-ink) !important;font:700 var(--cd-body)/1.2 var(--cd-font) !important;cursor:pointer}
.zoho-form input[type="submit"]:hover,.up-modal input[type="submit"]:hover,.zoho-form input[type="submit"]:focus-visible,.up-modal input[type="submit"]:focus-visible{background:var(--cd-accent-hover) !important;border-color:var(--cd-accent-hover) !important}
.zoho-form select,.up-modal .zcwf_row select{box-sizing:border-box;width:100% !important;padding:var(--cd-2) var(--cd-3) !important;font:400 var(--cd-small)/1.5 var(--cd-font) !important;color:var(--cd-ink-strong) !important;background:var(--cd-white) !important;border:1px solid var(--cd-line-strong) !important;border-radius:var(--cd-r-sm) !important}
.zoho-form select:focus,.up-modal .zcwf_row select:focus{outline:none;box-shadow:var(--cd-ring) !important}

/* --- webinars: access gate (Anchor Tools anchor-webinars, render_access_gate()) ------------
 * The Sign In / Register card on a gated webinar and on the Webinars page hero. The markup is
 * the module's own; tmj_webinar_gate_html() (inc/webinars.php) adds .field/.input/.btn
 * .btn--primary to it, and this block removes the module's competing look (its inputs rule
 * is .anchor-webinar-login__field input, one element above .input) and puts the card, tabs,
 * links and error box on kit tokens. The module's --awg-* properties are reset on the card
 * too, so any rule of its that still reads them gets the kit accent. Layout, the honeypot and
 * the tab/panel switching stay the module's. */
.anchor-webinar-gate{margin:0;--awg-accent:var(--cd-accent);--awg-accent-contrast:var(--cd-accent-ink);--awg-accent-hover:var(--cd-accent-hover);--awg-accent-ring:transparent}
.anchor-webinar-gate .anchor-webinar-login{
	--awg-accent:var(--cd-accent);--awg-accent-hover:var(--cd-accent-hover);
	max-width:480px;padding:var(--cd-6) var(--cd-5);text-align:left;
	background:var(--cd-white);border:1px solid var(--cd-line);border-radius:var(--cd-r-lg);box-shadow:var(--cd-shadow-2);
}
.anchor-webinar-gate .anchor-webinar-login__title{margin:0 0 var(--cd-2);font:800 var(--cd-h3)/1.2 var(--cd-font);letter-spacing:-.01em;color:var(--cd-ink-strong)}
.anchor-webinar-gate .anchor-webinar-login__subtitle{margin:0 0 var(--cd-5);font-size:var(--cd-small);color:var(--cd-ink)}
.anchor-webinar-gate__tabs{margin:0 0 var(--cd-5);padding:4px;background:var(--cd-ground-tint);border-radius:var(--cd-r-pill)}
.anchor-webinar-gate .anchor-webinar-gate__tab{padding:var(--cd-2) var(--cd-3);border-radius:var(--cd-r-pill);font:700 var(--cd-small)/1.2 var(--cd-font);color:var(--cd-ink)}
.anchor-webinar-gate .anchor-webinar-gate__tab:hover{color:var(--cd-ink-strong)}
.anchor-webinar-gate .anchor-webinar-gate__tab.is-active{color:var(--cd-ink-strong);background:var(--cd-white);box-shadow:var(--cd-shadow-1)}
.anchor-webinar-gate .anchor-webinar-gate__tab:focus-visible{outline:3px solid var(--cd-focus);outline-offset:2px}
.anchor-webinar-gate .anchor-webinar-login__field{margin:0 0 var(--cd-4)}
.anchor-webinar-gate .anchor-webinar-login__field label{margin:0;font-size:var(--cd-small);font-weight:700;letter-spacing:0;color:var(--cd-ink-strong)}
.anchor-webinar-gate .anchor-webinar-login__field .input{
	min-height:48px;padding:var(--cd-2) var(--cd-4);font:400 var(--cd-body) var(--cd-font);color:var(--cd-ink-strong);
	border:1px solid var(--cd-teal-200);border-radius:var(--cd-r-sm);box-shadow:none;
}
.anchor-webinar-gate .anchor-webinar-login__field .input:focus{outline:none;border-color:var(--cd-focus);box-shadow:var(--cd-ring)}
.anchor-webinar-gate .anchor-webinar-login__row{margin:0 0 var(--cd-5);font-size:var(--cd-small)}
.anchor-webinar-gate .anchor-webinar-login__remember{color:var(--cd-ink)}
.anchor-webinar-gate .anchor-webinar-login__remember input{accent-color:var(--cd-accent)}
.anchor-webinar-gate .anchor-webinar-login__lost,.anchor-webinar-gate .anchor-webinar-login__register a{color:var(--cd-ink-accent);text-decoration:underline;text-underline-offset:.2em}
.anchor-webinar-gate .anchor-webinar-login__register{margin-top:var(--cd-4);font-size:var(--cd-small);color:var(--cd-ink)}
.anchor-webinar-gate .btn{width:100%}
.anchor-webinar-gate .btn[disabled]{opacity:.65;cursor:default}
.anchor-webinar-gate .anchor-webinar-login__error,.anchor-webinar-gate .anchor-webinar-register__error{
	margin:0 0 var(--cd-4);padding:var(--cd-3) var(--cd-4);border:1px solid var(--cd-orange-700);border-radius:var(--cd-r-sm);
	background:var(--cd-white);color:var(--cd-orange-700);font-size:var(--cd-small);
}
.anchor-webinar-gate .anchor-webinar-notice{padding:var(--cd-6) var(--cd-5);background:var(--cd-white);border:1px solid var(--cd-line);border-radius:var(--cd-r-lg);box-shadow:var(--cd-shadow-1)}
.anchor-webinar-gate .anchor-webinar-notice__title{font-size:var(--cd-h4);color:var(--cd-ink-strong)}
.anchor-webinar-gate .anchor-webinar-notice__text{color:var(--cd-ink)}
/* In a hero's right column (.hero__media--card, the Webinars page): after the copy on phones. */
.hero__media--card:has(> .anchor-webinar-gate){order:0}
/* The tracked Vimeo player (render_player()): the module's 16:9 box, on the kit's frame. */
.anchor-webinar-player{border-radius:var(--cd-r-lg);box-shadow:var(--cd-shadow-2)}
/* .webinar-watch: the single webinar's player, description and back link (theme template
   webinars/single-webinar.php), one reading column a little wider than the prose measure. */
.webinar-watch{display:flex;flex-direction:column;gap:var(--cd-6);max-width:960px;margin-inline:auto}