/* InnerSight therapist video wall — scoped, theme-independent. */

.tvw {
	--tvw-brand: #4370b7;
	--tvw-brand-ink: #1f3c6c;
	--tvw-purple: #4e2a7d;
	--tvw-coral: #ff6f61;
	--tvw-coral-deep: #e8604f;
	--tvw-mist: #e8f1ff;
	--tvw-mist-mid: #c9d9f0;
	--tvw-line: #e4e2da;
	--tvw-text: #333;
	--tvw-soft: #666;
	max-width: 1360px;
	margin: 0 auto;
	padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 32px);
	font-family: 'Open Sans', Arial, sans-serif;
}

/*
 * Head
 *
 * The head spans its own band rather than sitting at 720px inside a 1201px grid
 * (Mo, 2026-08-13). The measure moves onto .tvw-intro alone, at the house 820px,
 * so the heading and the filter row line up with the card grid while the reading
 * line stays readable. Capping the block instead of the paragraph is what made
 * this read as a narrow panel floating above wider cards.
 */
.tvw-head { text-align: center; max-width: none; margin: 0 auto 32px; }
.tvw-eyebrow {
	display: block;
	font: 700 13px/1 'Open Sans', Arial, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tvw-brand);
	margin-bottom: 10px;
}
/* Matches the homepage section-H2 system exactly (Mo, 2026-08-14: every other
   H2 on the page is 300/clamp(30,3.4vw,46)/ink with a purple italic accent;
   this block's 800/blue heading read as a different typeface beside them). */
.tvw-heading {
	font-weight: 300;
	font-size: clamp(30px, 3.4vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: #1f3c6c;
	margin: 0;
	text-transform: none;
}
.tvw-heading em {
	font-style: italic;
	font-weight: 300;
	color: var(--tvw-purple);
}
.tvw-intro { color: var(--tvw-soft); font-size: 17px; line-height: 1.55; margin: 14px auto 0; max-width: 820px; }

/* Filters */
.tvw-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
	align-items: center;
	margin: 0 auto 36px;
	max-width: none;
}
.tvw-chip {
	border: 1.5px solid var(--tvw-mist-mid);
	background: #fff;
	color: var(--tvw-brand-ink);
	border-radius: 50px;
	padding: 9px 16px;
	font: 600 13.5px/1 'Open Sans', Arial, sans-serif;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tvw-chip:hover { border-color: var(--tvw-brand); color: var(--tvw-brand); }
.tvw-chip.is-on { background: var(--tvw-brand); border-color: var(--tvw-brand); color: #fff; }
.tvw-chip-sep { width: 1px; height: 22px; background: var(--tvw-line); margin: 0 4px; }

/* Grid */
.tvw-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 24px;
}

.tvw-card {
	background: #fff;
	border: 1px solid var(--tvw-line);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(78, 42, 125, 0.06);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s;
	display: flex;
	flex-direction: column;
}
.tvw-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(78, 42, 125, 0.16); }

/* Media (the face) */
.tvw-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: transparent;
}
.tvw-card.has-video .tvw-media { cursor: pointer; }
.tvw-media:focus-visible { outline: 3px solid var(--tvw-brand); outline-offset: -3px; }
.tvw-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
	transition: transform 0.4s ease;
}
.tvw-card.has-video:hover .tvw-photo { transform: scale(1.04); }
.tvw-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--tvw-mist), #fff); color: var(--tvw-brand); font: 800 3rem/1 'Open Sans', Arial, sans-serif; }

/* Play button (YouTube red) */
/* Docked small at the circle's lower-right so the FACE carries the card
   (24 centered red dots read as a polka-dot wall; docked chips recede). */
.tvw-play {
	position: absolute;
	right: 12%;
	bottom: 5%;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #ff0000;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, background 0.2s, opacity 0.2s;
	z-index: 2;
}
.tvw-play svg { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.tvw-card.has-video:hover .tvw-play { transform: scale(1.12); background: #cc0000; }

/* "Watch intro" cue */
.tvw-cue {
	position: absolute;
	left: 12px;
	bottom: 12px;
	background: rgba(31, 60, 108, 0.86);
	color: #fff;
	font: 700 11.5px/1 'Open Sans', Arial, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: 50px;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.2s, transform 0.2s;
	z-index: 2;
}
.tvw-card.has-video:hover .tvw-cue { opacity: 1; transform: none; }

/* Muted hover-preview overlay */
.tvw-preview {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.tvw-preview-frame {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 177.78%; /* cover a 1:1 box with a 16:9 video, cropping the sides */
	transform: translateX(-50%);
	border: 0;
}
.tvw-card.is-previewing .tvw-play { opacity: 0; }
.tvw-card.is-previewing .tvw-cue { opacity: 1; transform: none; }
.tvw-card.is-previewing .tvw-cue::before { content: '\1F50A  '; } /* speaker: hints 'tap for sound' */

/* Body */
.tvw-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.tvw-name { font-weight: 700; font-size: 1.08rem; color: var(--tvw-brand-ink); margin: 0 0 2px; text-transform: none; }
/* min-height reserves the second credential line. "Registered Psychotherapist
   (Qualifying)" wraps to two lines and "Registered Psychotherapist" does not, so
   without this every element below shifts by one line and the availability badge,
   which is the only margin-top:auto in the card, ends up with a gap that differs
   by ~19px between cards in the same row. 3.1em = 2 lines at this line-height;
   4.65em = 3 lines, which is what the 168px card width below 600px needs. */
.tvw-cred { font-size: 12.5px; color: var(--tvw-soft); margin: 0 0 8px; min-height: 3.1em; }
.tvw-tags { font-size: 12.5px; font-weight: 600; color: var(--tvw-brand); margin: 0 0 16px; }
.tvw-actions { margin-top: auto; display: flex; gap: 8px; }
.tvw-btn {
	flex: 1;
	text-align: center;
	padding: 10px 8px;
	border-radius: 50px;
	font: 600 13px/1 'Open Sans', Arial, sans-serif;
	text-decoration: none;
	transition: all 0.2s;
	white-space: nowrap;
}
.tvw-btn--ghost { border: 1.5px solid var(--tvw-brand); color: var(--tvw-brand); }
.tvw-btn--ghost:hover { background: var(--tvw-mist); }
.tvw-btn--book { /* CTA button */ background: var(--tvw-coral) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(255, 111, 97, 0.3); }
.tvw-btn--book:hover { background: var(--tvw-coral-deep) !important; transform: translateY(-1px); }

.tvw-empty { text-align: center; color: var(--tvw-soft); margin-top: 28px; }
.tvw-reset {
	background: none;
	border: 0;
	color: var(--tvw-brand);
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
}

/* Modal (click to play with sound) */
.tvw-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tvw-modal[hidden] { display: none !important; }
.tvw-modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.85); }
.tvw-modal-panel { position: relative; width: 100%; max-width: 880px; }
.tvw-modal-close {
	position: absolute;
	top: -46px;
	right: 0;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
}
.tvw-modal-close:hover { opacity: 1; }
.tvw-modal-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.tvw-modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

html.tvw-modal-open, body.tvw-modal-open { overflow: hidden; }

@media (max-width: 600px) {
	.tvw-cred { min-height: 4.65em; }
	.tvw-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
	.tvw-actions { flex-direction: column; }
	.tvw-play { width: 32px; height: 32px; }
}

/* Collapsed wall: all cards stay in the DOM (SEO), only the first ROW(S) show
   until "Show all" or any filter chip expands the grid (view.js drops
   .is-collapsed).
   The grid is auto-fill minmax(232px,1fr) (150px below 600), so the column
   count changes with width and "one row" is not a single number. The counts
   below were MEASURED on the live homepage, not derived:
     >=1320    5 cols     808-1063  3 cols      354-519  2 cols
     1064-1319 4 cols     601-807   2 cols      <=353    1 col
     520-600   3 cols
   Desktop/tablet shows ONE row; <=600px (phones) shows TWO complete rows.
   (601-807 is 2 because the 600px rule drops the track min to 150px, which
   RAISES the count to 3 just below it. That inversion is intentional.)
   Rules are same-specificity and ordered widest-first, so the last matching
   media query wins. Each breakpoint sits ON the column-switch width rather
   than one pixel below it, so a sub-pixel rounding difference can only show
   one card too FEW (one short row, which reads fine) and never one too many
   (a two-row orphan, which is the whole thing being fixed).
   Re-measure before changing the track min or the gap. */
.tvw-grid.is-collapsed .tvw-card:nth-child(n+6) { display: none; }
@media (max-width: 1320px) { .tvw-grid.is-collapsed .tvw-card:nth-child(n+5) { display: none; } }
@media (max-width: 1064px) { .tvw-grid.is-collapsed .tvw-card:nth-child(n+4) { display: none; } }
@media (max-width: 808px)  { .tvw-grid.is-collapsed .tvw-card:nth-child(n+3) { display: none; } }
/* PHONES KEEP TWO COMPLETE ROWS, not one (Mo, 2026-08-20). One row on a phone
   is only 2 cards, which reads sparse; two rows was the pre-2026-08-20
   behaviour and is already tidy there.
   These rules must SHOW as well as hide: the <=808 rule above has already
   hidden cards 3+, and an additive hide-only rule can never bring them back
   (that bug shipped once - it left 2 cards in a 3-column row at 560px).
   6 in the 520-600 band, not 4: that band is 3 columns (the 600px rule drops
   the track min to 150px) and 6 divides cleanly by 3, 2 AND 1, so it cannot
   orphan however the count lands. 4 there would render 3+1.
   The 519 boundary is exact rather than +1: it can only ever mis-fire upward
   into the <=600 rule, which shows 6 - still complete rows at 3, 2 or 1 cols. */
@media (max-width: 600px)  { .tvw-grid.is-collapsed .tvw-card:nth-child(-n+6) { display: flex; }
                             .tvw-grid.is-collapsed .tvw-card:nth-child(n+7) { display: none; } }
@media (max-width: 519px)  { .tvw-grid.is-collapsed .tvw-card:nth-child(-n+4) { display: flex; }
                             .tvw-grid.is-collapsed .tvw-card:nth-child(n+5) { display: none; } }
.tvw-showall-wrap { text-align: center; margin-top: 30px; }
.tvw-grid:not(.is-collapsed) + .tvw-showall-wrap { display: none; }
.tvw-showall {
	font: 700 15px/1 'Open Sans', Arial, sans-serif;
	color: #1F3C6C;
	background: #fff;
	border: 2px solid #DBE5F3;
	border-radius: 50px;
	padding: 15px 34px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.tvw-showall:hover { border-color: #4370B7; background: #E8F1FF; transform: translateY(-1px); }