/* ==========================================================================
   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;
	}
}