/* ==========================================================================
   TBB Lab Tools Directory
   Light-mode UI. Hero uses the same blue gradient as individual calculators.
   Loads only with [tbb_lab_tools_directory].
   ========================================================================== */

/* ── Local design tokens ────────────────────────────────────────────────── */
.tbb-dir {
	/* Page surface */
	--dir-page-bg:        #f1f5f9;
	--dir-page-bg-alt:    #e9eef5;

	/* Card surface */
	--dir-card-bg:        #ffffff;
	--dir-card-bg-hover:  #f8faff;
	--dir-card-border:    #e2e8f0;
	--dir-card-border-hover: #93c5fd;
	--dir-card-shadow:    0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
	--dir-card-shadow-hover: 0 6px 28px rgba(37,99,235,.14), 0 2px 8px rgba(0,0,0,.07);

	/* Text */
	--dir-text:           #1e293b;
	--dir-text-muted:     #64748b;
	--dir-text-faint:     #94a3b8;

	/* Accent — matches plugin primary */
	--dir-accent:         #2563eb;
	--dir-accent-dark:    #1d4ed8;
	--dir-accent-light:   #eff6ff;
	--dir-accent-mid:     #bfdbfe;
	--dir-accent-hover:   #dbeafe;

	/* Shared */
	--dir-radius:         14px;
	--dir-radius-sm:      10px;
	--dir-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--dir-transition:     180ms cubic-bezier(.4, 0, .2, 1);

	font-family: var(--dir-font);
	color:       var(--dir-text);
	background:  var(--dir-page-bg);
	width:       100%;
	overflow-x:  hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO  — identical gradient to individual calculator headers
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-hero {
	background:  linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
	position:    relative;
	padding:     4rem 1.5rem 3.5rem;
	text-align:  center;
	overflow:    hidden;
}

/* Subtle dot-grid texture inside the hero */
.tbb-dir-hero::before {
	content:          '';
	position:         absolute;
	inset:            0;
	background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
	background-size:  26px 26px;
	pointer-events:   none;
}


/* Radial glow — reuses the existing element, now subtler on dark gradient */
.tbb-dir-hero-glow {
	position:       absolute;
	inset:          0;
	background:
		radial-gradient(ellipse 55% 40% at 50% 0%, rgba(255,255,255,.1) 0%, transparent 70%);
	pointer-events: none;
}

.tbb-dir-hero-content {
	position:  relative;
	z-index:   1;
	max-width: 720px;
	margin:    0 auto;
}

/* Eyebrow pill */
.tbb-dir-hero-eyebrow {
	display:        inline-block;
	font-size:      1.1rem;
	font-weight:    600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color:          #93c5fd;
	background:     rgba(255,255,255,.1);
	border:         1px solid rgba(255,255,255,.18);
	border-radius:  999px;
	padding:        .28rem .95rem;
	margin-bottom:  1.1rem;
}

/* Page title */
.tbb-dir-hero-title {
	font-size:      clamp(1.75rem, 4.5vw, 3rem);
	font-weight:    800;
	line-height:    1.15;
	letter-spacing: -.025em;
	color:          #ffffff;
	margin:         0 0 .85rem;
}

/* Subtitle */
.tbb-dir-hero-subtitle {
	font-size:   1.25rem;
	color:       rgba(255,255,255,.78);
	line-height: 1.6;
	margin:      0 auto 2rem;
	max-width:   520px;
}

/* ── Search bar ─────────────────────────────────────────────────────────── */
.tbb-dir-search-wrap {
	position:    relative;
	max-width:   500px;
	margin:      0 auto .9rem;
	display:     flex;
	align-items: center;
}

.tbb-dir-search-label {
	position:      absolute;
	left:          1.1rem;
	top:           50%;
	transform:     translateY(-50%);
	pointer-events: none;
	z-index:       2;
	line-height:   1;
}

.tbb-dir-search-icon {
	width:  1.1rem;
	height: 1.1rem;
	color:  rgba(255,255,255,.55);
}

.tbb-dir-search-input {
	width:          100%;
	box-sizing:     border-box;
	padding:        .85rem 3rem .85rem 3rem;
	font-size:      1.3rem;
	font-family:    var(--dir-font);
	color:          var(--dir-text);
	background:     rgba(255,255,255,.97);
	border:         1.5px solid rgba(255,255,255,.3);
	border-radius:  999px;
	outline:        none;
	box-shadow:     0 2px 16px rgba(0,0,0,.18);
	transition:     border-color var(--dir-transition), box-shadow var(--dir-transition);
	-webkit-appearance: none;
}

.tbb-dir-search-input::placeholder {
	color: var(--dir-text-faint);
}

.tbb-dir-search-input:focus {
	border-color: var(--dir-accent-mid);
	box-shadow:   0 0 0 4px rgba(37,99,235,.22), 0 2px 16px rgba(0,0,0,.18);
}

/* Clear button */
.tbb-dir-search-clear {
	position:        absolute;
	right:           .8rem;
	top:             50%;
	transform:       translateY(-50%);
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           1.55rem;
	height:          1.55rem;
	background:      var(--dir-page-bg-alt);
	border:          none;
	border-radius:   50%;
	color:           var(--dir-text-muted);
	font-size:       .8rem;
	cursor:          pointer;
	transition:      background var(--dir-transition), color var(--dir-transition);
	padding:         0;
	line-height:     1;
}

.tbb-dir-search-clear:hover {
	background: var(--dir-accent-mid);
	color:      var(--dir-accent-dark);
}

/* Tool count */
.tbb-dir-count {
	font-size:  1.15rem;
	color:      rgba(255,255,255,.55);
	margin:     0;
	letter-spacing: .02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   BODY / GRID
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-body {
	padding:   2.5rem 1.5rem 4rem;
	max-width: 1280px;
	margin:    0 auto;
}

.tbb-dir-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap:                   1.25rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-card {
	position:     relative;
	border-radius: var(--dir-radius);
	/* Entry animation */
	opacity:      0;
	transform:    translateY(16px);
	transition:   opacity 340ms ease, transform 340ms ease;
}

.tbb-dir-card--visible {
	opacity:   1;
	transform: translateY(0);
}

/* Stagger */
.tbb-dir-card:nth-child(2)  { transition-delay:  50ms; }
.tbb-dir-card:nth-child(3)  { transition-delay: 100ms; }
.tbb-dir-card:nth-child(4)  { transition-delay: 150ms; }
.tbb-dir-card:nth-child(5)  { transition-delay: 200ms; }
.tbb-dir-card:nth-child(6)  { transition-delay: 250ms; }
.tbb-dir-card:nth-child(7)  { transition-delay: 300ms; }
.tbb-dir-card:nth-child(8)  { transition-delay: 340ms; }
.tbb-dir-card:nth-child(n+9) { transition-delay: 380ms; }

/* The gradient border element — visible on hover */
.tbb-dir-card-border {
	position:      absolute;
	inset:         0;
	border-radius: var(--dir-radius);
	padding:       1.5px;
	background:    linear-gradient(135deg, rgba(37,99,235,.0), rgba(37,99,235,.0));
	-webkit-mask:  linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	transition:    background var(--dir-transition);
}

.tbb-dir-card:hover .tbb-dir-card-border {
	background: linear-gradient(135deg, #2563eb 0%, #6366f1 50%, #06b6d4 100%);
}

/* Inner surface */
.tbb-dir-card-inner {
	position:       relative;
	height:         100%;
	background:     var(--dir-card-bg);
	border:         1.5px solid var(--dir-card-border);
	border-radius:  var(--dir-radius);
	display:        flex;
	flex-direction: column;
	overflow:       hidden;
	box-shadow:     var(--dir-card-shadow);
	transition:     border-color var(--dir-transition),
	                box-shadow var(--dir-transition),
	                transform var(--dir-transition),
	                background var(--dir-transition);
}

.tbb-dir-card:hover .tbb-dir-card-inner {
	border-color: transparent; /* border is handled by .tbb-dir-card-border on hover */
	background:   var(--dir-card-bg-hover);
	box-shadow:   var(--dir-card-shadow-hover);
	transform:    translateY(-3px);
}

/* Icon area */
.tbb-dir-card-top {
	position: relative;
	padding:  1.5rem 1.5rem .7rem;
	overflow: hidden;
}

/* Soft accent blob behind icon */
.tbb-dir-card-glow {
	position:      absolute;
	top:           -24px;
	left:          -24px;
	width:         100px;
	height:        100px;
	background:    radial-gradient(circle, rgba(37,99,235,.1) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
	transition:    opacity var(--dir-transition);
	opacity:       0;
}

.tbb-dir-card:hover .tbb-dir-card-glow {
	opacity: 1;
}

.tbb-dir-card-icon {
	font-size:   2.3rem;
	line-height: 1;
	display:     inline-block;
	position:    relative;
	z-index:     1;
	transition:  transform var(--dir-transition);
}

.tbb-dir-card:hover .tbb-dir-card-icon {
	transform: scale(1.1) translateY(-1px);
}

/* Text body */
.tbb-dir-card-body {
	padding: 0 1.5rem .9rem;
	flex:    1;
}

.tbb-dir-card-title {
	font-size:      1.35rem;
	font-weight:    700;
	color:          var(--dir-text);
	margin:         0 0 .5rem;
	letter-spacing: -.01em;
	line-height:    1.3;
}

.tbb-dir-card-desc {
	font-size:   1.2rem;
	color:       var(--dir-text-muted);
	line-height: 1.6;
	margin:      0;
	display:     -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:    hidden;
}

/* Footer / CTA */
.tbb-dir-card-footer {
	padding: .9rem 1.5rem 1.5rem;
}

/* ── Open Calculator button — matches plugin's .tbb-btn--primary style ── */
.tbb-dir-card-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             .45rem;
	padding:         .65rem 1.35rem;
	font-size:       1.2rem;
	font-weight:     600;
	font-family:     var(--dir-font);
	color:           #fff;
	background:      var(--dir-accent);
	border:          1.5px solid var(--dir-accent);
	border-radius:   var(--dir-radius-sm);
	text-decoration: none;
	cursor:          pointer;
	transition:      background var(--dir-transition),
	                 border-color var(--dir-transition),
	                 box-shadow var(--dir-transition),
	                 transform var(--dir-transition);
	white-space:     nowrap;
}

.tbb-dir-card-btn:hover {
	background:   var(--dir-accent-dark);
	border-color: var(--dir-accent-dark);
	box-shadow:   0 3px 12px rgba(37,99,235,.35);
	transform:    translateX(2px);
}

.tbb-dir-card-btn:focus-visible {
	outline:        2px solid var(--dir-accent);
	outline-offset: 2px;
}

.tbb-dir-card-btn-arrow {
	width:       .95rem;
	height:      .95rem;
	flex-shrink: 0;
	transition:  transform var(--dir-transition);
}

.tbb-dir-card-btn:hover .tbb-dir-card-btn-arrow {
	transform: translateX(3px);
}

/* Coming Soon variant */
.tbb-dir-card-btn--disabled {
	color:        var(--dir-text-faint);
	background:   var(--dir-page-bg-alt);
	border-color: var(--dir-card-border);
	cursor:       not-allowed;
}

.tbb-dir-card-btn--disabled:hover {
	background:  var(--dir-page-bg-alt);
	border-color: var(--dir-card-border);
	box-shadow:  none;
	transform:   none;
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-empty {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         5rem 2rem;
	text-align:      center;
	gap:             .5rem;
}

.tbb-dir-empty-icon {
	font-size:     3rem;
	margin-bottom: .5rem;
	opacity:       .4;
}

.tbb-dir-empty-title {
	font-size:   1.5rem;
	font-weight: 700;
	color:       var(--dir-text-muted);
	margin:      0;
}

.tbb-dir-empty-sub {
	font-size: 1.2rem;
	color:     var(--dir-text-faint);
	margin:    0;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media ( max-width: 900px ) {
	.tbb-dir-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

@media ( max-width: 600px ) {
	.tbb-dir-hero {
		padding: 3rem 1.25rem 2.75rem;
	}

	.tbb-dir-hero-title {
		font-size: 1.75rem;
	}

	.tbb-dir-hero-subtitle {
		font-size: 1.15rem;
	}

	.tbb-dir-body {
		padding: 1.75rem 1rem 3rem;
	}

	.tbb-dir-grid {
		grid-template-columns: 1fr;
		gap:                   1rem;
	}

	.tbb-dir-search-input {
		font-size: 1.2rem;
	}

	.tbb-dir-card-btn {
		width:           100%;
		justify-content: center;
	}
}

@media ( max-width: 360px ) {
	.tbb-dir-grid {
		grid-template-columns: 1fr;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════════ */
@media ( prefers-reduced-motion: reduce ) {
	.tbb-dir-card,
	.tbb-dir-card-inner,
	.tbb-dir-card-icon,
	.tbb-dir-card-btn,
	.tbb-dir-card-btn-arrow,
	.tbb-dir-card-border,
	.tbb-dir-search-input {
		transition: none;
	}

	.tbb-dir-card {
		opacity:   1;
		transform: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   SEO VALUE SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-seo {
	background:  #ffffff;
	border-top:  1px solid var(--dir-card-border);
	padding:     4.5rem 1.5rem 5rem;
}

.tbb-dir-seo-inner {
	max-width: 1280px;
	margin:    0 auto;
}

/* ── Section header ──────────────────────────────────────────────────────── */
.tbb-dir-seo-header {
	text-align:    center;
	margin-bottom: 3rem;
	max-width:     760px;
	margin-left:   auto;
	margin-right:  auto;
}

.tbb-dir-seo-heading {
	font-size:      clamp(1.5rem, 3vw, 2.2rem);
	font-weight:    800;
	color:          var(--dir-text);
	letter-spacing: -.025em;
	line-height:    1.2;
	margin:         0 0 1rem;
}

.tbb-dir-seo-subtitle {
	font-size:  1.15rem;
	color:      var(--dir-text-muted);
	line-height: 1.75;
	margin:     0;
}

/* ── 3 × 2 card grid ─────────────────────────────────────────────────────── */
.tbb-dir-seo-grid {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   1.25rem;
}

/* ── Individual card ─────────────────────────────────────────────────────── */
.tbb-dir-seo-card {
	background:    var(--dir-page-bg);
	border:        1.5px solid var(--dir-card-border);
	border-radius: var(--dir-radius);
	padding:       1.75rem 1.6rem;
	transition:    border-color var(--dir-transition),
	               box-shadow   var(--dir-transition),
	               transform    var(--dir-transition),
	               background   var(--dir-transition);
}

.tbb-dir-seo-card:hover {
	border-color: var(--dir-card-border-hover);
	box-shadow:   var(--dir-card-shadow-hover);
	background:   var(--dir-card-bg-hover);
	transform:    translateY(-3px);
}

/* ── Icon badge ──────────────────────────────────────────────────────────── */
.tbb-dir-seo-card-icon {
	width:           44px;
	height:          44px;
	background:      var(--dir-accent-light);
	border-radius:   var(--dir-radius-sm);
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-bottom:   1.1rem;
	color:           var(--dir-accent);
	flex-shrink:     0;
	transition:      background var(--dir-transition), transform var(--dir-transition);
}

.tbb-dir-seo-card:hover .tbb-dir-seo-card-icon {
	background: var(--dir-accent-hover);
	transform:  scale(1.08) rotate(-2deg);
}

.tbb-dir-seo-card-icon svg {
	width:  22px;
	height: 22px;
}

/* ── Card text ───────────────────────────────────────────────────────────── */
.tbb-dir-seo-card-title {
	font-size:      1.2rem;
	font-weight:    700;
	color:          var(--dir-text);
	letter-spacing: -.01em;
	line-height:    1.3;
	margin:         0 0 .6rem;
}

.tbb-dir-seo-card-desc {
	font-size:   1.1rem;
	color:       var(--dir-text-muted);
	line-height: 1.65;
	margin:      0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 960px ) {
	.tbb-dir-seo-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( max-width: 600px ) {
	.tbb-dir-seo {
		padding: 3rem 1rem 3.5rem;
	}

	.tbb-dir-seo-header {
		margin-bottom: 2rem;
	}

	.tbb-dir-seo-grid {
		grid-template-columns: 1fr;
		gap:                   1rem;
	}

	.tbb-dir-seo-card {
		padding: 1.4rem 1.25rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tbb-dir-seo-card,
	.tbb-dir-seo-card-icon {
		transition: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   SOCIAL PROOF SECTION
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-sp {
	background:  #f8faff;
	border-top:  1px solid var(--dir-card-border);
	padding:     4.5rem 0 5rem;
	overflow:    hidden; /* clip marquee overflow at section edges */
}

.tbb-dir-sp-inner {
	max-width: 1280px;
	margin:    0 auto;
	padding:   0 1.5rem;
}

/* ── Section header ──────────────────────────────────────────────────────── */
.tbb-dir-sp-header {
	text-align:    center;
	margin-bottom: 2.75rem;
}

.tbb-dir-sp-heading {
	font-size:      clamp(1.5rem, 3vw, 2.2rem);
	font-weight:    800;
	color:          var(--dir-text);
	letter-spacing: -.025em;
	line-height:    1.2;
	margin:         0 0 .75rem;
}

.tbb-dir-sp-subtitle {
	font-size:  1.15rem;
	color:      var(--dir-text-muted);
	line-height: 1.6;
	margin:     0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MARQUEE STRIP
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-marquee-wrap {
	position:      relative;
	overflow:      hidden;
	background:    #ffffff;
	border:        1.5px solid var(--dir-card-border);
	border-radius: 999px;
	padding:       .75rem 0;
	margin-bottom: 3.5rem;
}

/* Gradient fade — left edge */
.tbb-dir-marquee-wrap::before,
.tbb-dir-marquee-wrap::after {
	content:        '';
	position:       absolute;
	top:            0;
	bottom:         0;
	width:          140px;
	z-index:        2;
	pointer-events: none;
}

.tbb-dir-marquee-wrap::before {
	left:       0;
	background: linear-gradient( to right, #ffffff 20%, transparent 100% );
}

.tbb-dir-marquee-wrap::after {
	right:      0;
	background: linear-gradient( to left, #ffffff 20%, transparent 100% );
}

/* Scrolling track */
.tbb-dir-marquee-track {
	display:    flex;
	align-items: center;
	width:      max-content;
	animation:  tbb-dir-scroll 50s linear infinite;
}

.tbb-dir-marquee-wrap:hover .tbb-dir-marquee-track {
	animation-play-state: paused;
}

/* Individual university chip */
.tbb-dir-marquee-item {
	display:     inline-flex;
	align-items: center;
	gap:         .6rem;
	white-space: nowrap;
	font-size:   .95rem;
	font-weight: 500;
	color:       var(--dir-text-muted);
	padding:     0 1.75rem;
	letter-spacing: .005em;
}

.tbb-dir-marquee-dot {
	display:       inline-block;
	width:         5px;
	height:        5px;
	border-radius: 50%;
	background:    var(--dir-accent-mid);
	flex-shrink:   0;
}

/* Keyframe — moves exactly half the track width (-50%) for seamless loop */
@keyframes tbb-dir-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-testimonials {
	display:               grid;
	grid-template-columns: repeat(3, 1fr);
	gap:                   1.25rem;
}

/* ── Individual testimonial card ─────────────────────────────────────────── */
.tbb-dir-tcard {
	background:    #ffffff;
	border:        1.5px solid var(--dir-card-border);
	border-radius: var(--dir-radius);
	padding:       2rem 1.75rem 1.75rem;
	display:       flex;
	flex-direction: column;
	gap:           1rem;
	box-shadow:    var(--dir-card-shadow);
	transition:    border-color var(--dir-transition),
	               box-shadow   var(--dir-transition),
	               transform    var(--dir-transition);
}

.tbb-dir-tcard:hover {
	border-color: var(--dir-card-border-hover);
	box-shadow:   var(--dir-card-shadow-hover);
	transform:    translateY(-3px);
}

/* Large opening quote mark */
.tbb-dir-tcard-quote {
	font-size:      3.5rem;
	line-height:    .7;
	font-family:    Georgia, "Times New Roman", serif;
	color:          var(--dir-accent-mid);
	margin-bottom:  -.25rem;
	user-select:    none;
}

/* Quote body */
.tbb-dir-tcard-text {
	font-size:   1.05rem;
	color:       var(--dir-text);
	line-height: 1.75;
	margin:      0;
	flex:        1;
}

/* Footer row: avatar + meta */
.tbb-dir-tcard-footer {
	display:     flex;
	align-items: center;
	gap:         .85rem;
	margin-top:  auto;
	padding-top: 1rem;
	border-top:  1px solid var(--dir-card-border);
}

/* Initials avatar */
.tbb-dir-tcard-avatar {
	width:           42px;
	height:          42px;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       .8rem;
	font-weight:     700;
	color:           #ffffff;
	flex-shrink:     0;
	letter-spacing:  .04em;
}

.tbb-dir-tcard-avatar--blue   { background: var(--dir-accent); }
.tbb-dir-tcard-avatar--purple { background: #7c3aed; }
.tbb-dir-tcard-avatar--teal   { background: #0f766e; }

/* Meta text stack */
.tbb-dir-tcard-meta {
	display:        flex;
	flex-direction: column;
	gap:            .15rem;
	min-width:      0;
}

.tbb-dir-tcard-name {
	font-size:   .95rem;
	font-weight: 700;
	color:       var(--dir-text);
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.tbb-dir-tcard-role,
.tbb-dir-tcard-inst {
	font-size:   .82rem;
	color:       var(--dir-text-muted);
	line-height: 1.4;
	white-space: nowrap;
	overflow:    hidden;
	text-overflow: ellipsis;
}

.tbb-dir-tcard-inst {
	color:       var(--dir-accent);
	font-weight: 500;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 960px ) {
	.tbb-dir-testimonials {
		grid-template-columns: 1fr;
		max-width: 560px;
		margin:    0 auto;
	}
}

@media ( max-width: 600px ) {
	.tbb-dir-sp {
		padding: 3rem 0 3.5rem;
	}

	.tbb-dir-sp-inner {
		padding: 0 1rem;
	}

	.tbb-dir-sp-header {
		margin-bottom: 2rem;
	}

	.tbb-dir-marquee-wrap {
		margin-bottom: 2.5rem;
		border-radius: var(--dir-radius);
	}

	.tbb-dir-marquee-wrap::before,
	.tbb-dir-marquee-wrap::after {
		width: 60px;
	}

	.tbb-dir-testimonials {
		max-width: 100%;
	}

	.tbb-dir-tcard {
		padding: 1.5rem 1.25rem 1.4rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tbb-dir-marquee-track { animation: none; }
	.tbb-dir-tcard         { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-filter-bar {
	display:     flex;
	align-items: center;
	gap:         .5rem;
	margin-bottom: 1.5rem;
	flex-wrap:   wrap;
}

.tbb-dir-filter-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             .4rem;
	padding:         .45rem 1rem;
	font-size:       1rem;
	font-weight:     600;
	font-family:     var(--dir-font);
	color:           var(--dir-text-muted);
	background:      var(--dir-card-bg);
	border:          1.5px solid var(--dir-card-border);
	border-radius:   999px;
	cursor:          pointer;
	transition:      color var(--dir-transition),
	                 background var(--dir-transition),
	                 border-color var(--dir-transition),
	                 box-shadow var(--dir-transition);
	white-space:     nowrap;
}

.tbb-dir-filter-btn:hover {
	border-color: var(--dir-accent-mid);
	color:        var(--dir-accent);
	background:   var(--dir-accent-light);
}

.tbb-dir-filter-btn--active,
.tbb-dir-filter-btn[aria-pressed="true"] {
	color:        var(--dir-accent);
	background:   var(--dir-accent-light);
	border-color: var(--dir-accent-mid);
	box-shadow:   0 0 0 3px rgba(37,99,235,.1);
}

.tbb-dir-filter-count {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       1.3rem;
	height:          1.3rem;
	padding:         0 .3rem;
	font-size:       .78rem;
	font-weight:     700;
	line-height:     1;
	color:           var(--dir-accent);
	background:      var(--dir-accent-mid);
	border-radius:   999px;
}

.tbb-dir-filter-btn[aria-pressed="true"] .tbb-dir-filter-count {
	background: var(--dir-accent);
	color:      #fff;
}

/* ══════════════════════════════════════════════════════════════════════════
   BOOKMARK BUTTON (on each card)
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-bookmark-btn {
	position:        absolute;
	top:             .65rem;
	right:           .65rem;
	z-index:         3;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           1.9rem;
	height:          1.9rem;
	padding:         0;
	background:      transparent;
	border:          none;
	border-radius:   50%;
	color:           var(--dir-text-faint);
	cursor:          pointer;
	transition:      color var(--dir-transition),
	                 background var(--dir-transition),
	                 transform var(--dir-transition);
}

.tbb-dir-bookmark-btn:hover {
	background: var(--dir-accent-light);
	color:      var(--dir-accent);
	transform:  scale(1.15);
}

.tbb-dir-bookmark-btn:focus-visible {
	outline:        2px solid var(--dir-accent);
	outline-offset: 2px;
}

/* Show outline / hide fill by default */
.tbb-bm-fill   { display: none; }
.tbb-bm-stroke { display: block; }

/* Bookmarked state */
.tbb-dir-bookmark-btn[aria-pressed="true"] {
	color: var(--dir-accent);
}

.tbb-dir-bookmark-btn[aria-pressed="true"] .tbb-bm-stroke { display: none; }
.tbb-dir-bookmark-btn[aria-pressed="true"] .tbb-bm-fill   { display: block; }

/* Pop animation when bookmarked */
@keyframes tbb-bm-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	70%  { transform: scale(0.9); }
	100% { transform: scale(1); }
}

.tbb-dir-bookmark-btn--pop {
	animation: tbb-bm-pop 320ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Empty bookmarks state inside the grid */
.tbb-dir-empty--bookmarks .tbb-dir-empty-icon {
	font-size: 2.5rem;
}

@media ( prefers-reduced-motion: reduce ) {
	.tbb-dir-bookmark-btn,
	.tbb-dir-filter-btn      { transition: none; }
	.tbb-dir-bookmark-btn--pop { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════════════════════════ */
.tbb-dir-pagination {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-wrap:       wrap;
	gap:             .35rem;
	margin-top:      2.5rem;
}

.tbb-dir-page-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       2.25rem;
	height:          2.25rem;
	padding:         0 .6rem;
	font-size:       1rem;
	font-weight:     600;
	font-family:     var(--dir-font);
	color:           var(--dir-text-muted);
	background:      var(--dir-card-bg);
	border:          1.5px solid var(--dir-card-border);
	border-radius:   var(--dir-radius-sm);
	cursor:          pointer;
	transition:      color var(--dir-transition),
	                 background var(--dir-transition),
	                 border-color var(--dir-transition),
	                 box-shadow var(--dir-transition);
	line-height:     1;
}

.tbb-dir-page-btn:hover:not(:disabled) {
	color:        var(--dir-accent);
	background:   var(--dir-accent-light);
	border-color: var(--dir-accent-mid);
}

.tbb-dir-page-btn:focus-visible {
	outline:        2px solid var(--dir-accent);
	outline-offset: 2px;
}

/* Active page */
.tbb-dir-page-btn--active {
	color:         #fff;
	background:    var(--dir-accent);
	border-color:  var(--dir-accent);
	box-shadow:    0 2px 8px rgba(37,99,235,.3);
	pointer-events: none;
}

/* Ellipsis */
.tbb-dir-page-btn--ellipsis {
	background:    transparent;
	border-color:  transparent;
	color:         var(--dir-text-faint);
	cursor:        default;
	pointer-events: none;
	min-width:     1.5rem;
}

/* Prev / Next arrow buttons */
.tbb-dir-page-btn--prev,
.tbb-dir-page-btn--next {
	padding: 0 .75rem;
}

.tbb-dir-page-btn--prev:disabled,
.tbb-dir-page-btn--next:disabled {
	opacity:        .35;
	cursor:         default;
	pointer-events: none;
}

@media ( max-width: 480px ) {
	.tbb-dir-page-btn {
		min-width: 2rem;
		height:    2rem;
		font-size: .9rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.tbb-dir-page-btn { transition: none; }
}