/**
 * Feedough Tools Explorer — Frontend Stylesheet
 *
 * Design tokens are defined as CSS custom properties on :root so they
 * can be overridden by the theme if needed.
 *
 * Loaded only on pages that contain the [feedough_tools_explorer] shortcode.
 *
 * @package Feedough_Tools_Explorer
 */

/* ============================================================
   Reliable hide utility — used by JS filtering instead of the
   [hidden] attribute, which many WP themes override.
============================================================ */
.fte-hidden {
	display: none !important;
}

/* ============================================================
   Design tokens (from PRD §3.6)
============================================================ */
:root {
	--fte-brand:              #BE1E2D;
	--fte-heading:            #111827;
	--fte-body:               #4b5563;
	--fte-muted:              #6b7280;
	--fte-border:             #e5e7eb;
	--fte-card-bg:            #ffffff;
	--fte-subtle-bg:          #f3f4f6;
	--fte-active-tab-bg:      #ffffff;

	--fte-radius-card:        16px;
	--fte-radius-bubble:      12px;
	--fte-radius-tab:         9999px;

	--fte-shadow-sm:          0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--fte-shadow-default:     0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
	--fte-shadow-hover:       0 12px 24px -8px rgba(0, 0, 0, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--fte-transition:         all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	--fte-gap-desktop:        24px;
	--fte-gap-mobile:         16px;

	--fte-font:               'Figtree', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   Base container
============================================================ */
.fte-explorer {
	font-family: var(--fte-font);
	color: var(--fte-body);
	max-width: 1128px;
	margin: 0 auto;
	box-sizing: border-box;
}

.fte-explorer *,
.fte-explorer *::before,
.fte-explorer *::after {
	box-sizing: inherit;
}

/* Screen-reader only utility */
.fte-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ============================================================
   Tab navigation bar
============================================================ */
.fte-tab-nav-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;       /* always fill the container */
	overflow: hidden;  /* prevents WP-theme overflow-x:hidden from clipping
	                      the scroll child — the wrapper owns its boundary */
	min-width: 0;      /* stops flex blowout inside WP page wrappers */
	background: var(--fte-subtle-bg);
	border-radius: var(--fte-radius-tab);
	padding: 4px;
	margin-bottom: 32px;
	border: 1px solid rgba(0,0,0,0.03);
}

.fte-tab-nav {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
	/* scroll-behavior intentionally left as auto so mouse-wheel feels
	   instant/native. Arrow buttons pass behavior:'smooth' explicitly. */
	scrollbar-width: none;        /* Firefox: hide scrollbar */
	-ms-overflow-style: none;     /* IE/Edge: hide scrollbar */
	padding: 2px;
	flex: 1;
	min-width: 0;
}

/* Hide scrollbar in WebKit */
.fte-tab-nav::-webkit-scrollbar { display: none; }

.fte-tab {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 8px 20px;
	border-radius: var(--fte-radius-tab);
	border: none;
	background: transparent;
	color: var(--fte-muted);
	font-family: var(--fte-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--fte-transition);
	outline: none;
	flex-shrink: 0;
	position: relative;
	touch-action: manipulation; /* prevents double-tap zoom stealing the scroll */
}

/* Active tab */
.fte-tab.is-active,
.fte-tab[aria-selected="true"] {
	color: var(--fte-heading);
	background: var(--fte-active-tab-bg);
	box-shadow: var(--fte-shadow-sm), 0 0 0 1px rgba(0,0,0,0.02);
}

/* Inactive hover */
.fte-tab:not(.is-active):hover {
	color: var(--fte-heading);
	background: rgba(0,0,0,0.03);
}

/* Keyboard focus ring */
.fte-tab:focus-visible {
	outline: 2px solid var(--fte-brand);
	outline-offset: 2px;
}

/* Scroll arrow buttons */
.fte-scroll-arrow {
	display: none; /* Initially hidden; JS shows when overflow */
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--fte-card-bg);
	border: none;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.02);
	cursor: pointer;
	color: var(--fte-heading);
	transition: var(--fte-transition);
	flex-shrink: 0;
	padding: 0;
	z-index: 2;
}

.fte-scroll-arrow:not([hidden]) { display: flex; }
.fte-scroll-arrow:hover { background: var(--fte-subtle-bg); transform: scale(1.05); }
.fte-scroll-arrow:focus-visible { outline: 2px solid var(--fte-brand); outline-offset: 2px; }

/* ============================================================
   Separator between tab bar and grid
============================================================ */
.fte-separator {
	display: none;
}

/* ============================================================
   Tools grid
============================================================ */
.fte-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fte-gap-desktop);
}

/* ============================================================
   Category section header (visible in "All" tab only)
============================================================ */
.fte-category-section-header {
	grid-column: 1 / -1;
	margin-top: 40px; /* PRD: 32px above each header (except first) */
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	border-bottom: 1px solid var(--fte-border);
	padding-bottom: 8px;
}

/* Remove top margin from the very first category header */
.fte-category-section-header:first-child {
	margin-top: 0;
}

.fte-cat-header-label {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fte-heading);
}

/* ============================================================
   Tool cards
============================================================ */
.fte-card {
	display: flex;
	flex-direction: column;
	background: var(--fte-card-bg);
	border: 1px solid var(--fte-border);
	border-radius: var(--fte-radius-card);
	padding: 24px;
	text-decoration: none;
	color: var(--fte-body);
	box-shadow: var(--fte-shadow-default);
	transition: var(--fte-transition);
	position: relative;
	overflow: hidden;
}

.fte-card:hover {
	border-color: rgba(190, 30, 45, 0.3); /* subtle brand border */
	box-shadow: var(--fte-shadow-hover);
	transform: translateY(-4px);
}

.fte-card:focus-visible {
	outline: 2px solid var(--fte-brand);
	outline-offset: 2px;
}

/* Card header row */
.fte-card-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 12px;
}

/* Icon bubble */
.fte-card-icon-bubble {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--fte-radius-bubble);
	flex-shrink: 0;
	font-size: 24px;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}

.fte-card:hover .fte-card-icon-bubble {
	transform: scale(1.05) rotate(-2deg);
}

/* Tool name */
.fte-card-name {
	font-size: 18px;
	font-weight: 700;
	color: var(--fte-heading);
	line-height: 1.3;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	align-items: center;
	gap: 6px;
}

.fte-card-name::after {
	content: "→";
	opacity: 0;
	transform: translateX(-8px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: system-ui, -apple-system, sans-serif;
	font-weight: 400;
	color: var(--fte-brand);
}

.fte-card:hover .fte-card-name {
	color: var(--fte-brand);
}

.fte-card:hover .fte-card-name::after {
	opacity: 1;
	transform: translateX(0);
}

/* Description */
.fte-card-desc {
	margin: 0;
	font-size: 14.5px;
	color: var(--fte-muted);
	line-height: 1.6;
	flex-grow: 1;
}

/* Empty-state placeholder */
.fte-coming-soon {
	font-family: var(--fte-font);
	text-align: center;
	color: var(--fte-muted);
	padding: 32px 0;
}

/* ============================================================
   View More / Show More logic
============================================================ */

/* When in the "All" view, hide the overflow cards */
.fte-explorer[data-current-view="all"] .fte-card-overflow {
	display: none !important;
}

/* When NOT in the "All" view, hide the "View More" buttons */
.fte-explorer:not([data-current-view="all"]) .fte-view-more-wrapper {
	display: none !important;
}

.fte-view-more-wrapper {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	margin-top: 16px;
	margin-bottom: 32px;
}

.fte-view-more-wrapper::before,
.fte-view-more-wrapper::after {
	content: '';
	flex-grow: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--fte-border));
}

.fte-view-more-wrapper::after {
	background: linear-gradient(to left, transparent, var(--fte-border));
}

.fte-view-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fte-card-bg);
	color: var(--fte-heading);
	border: 1px solid var(--fte-border);
	border-radius: var(--fte-radius-tab);
	padding: 10px 24px;
	margin: 0 16px;
	font-family: var(--fte-font);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--fte-transition);
	box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.fte-view-more-btn:hover {
	color: var(--fte-brand);
	border-color: rgba(190, 30, 45, 0.2);
	box-shadow: var(--fte-shadow-default);
	transform: translateY(-1px);
}

/* ============================================================
   Responsive
============================================================ */

/* Tablet */
@media (max-width: 767px) {
	.fte-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--fte-gap-mobile);
	}
}

/* ── Mobile cards ──────────────────────────────────────────────
   Layout  : icon left, full title right (wraps up to 3 lines).
   No truncation — every word of the name is always visible.

   Adaptive sizing: JS stamps one of four classes onto each card
   (fte-name-s / -m / -l / -xl) based on the title's character
   count. CSS rules below scale font size and icon size for each
   class, so short names feel spacious and long names still fit.

   CSS Grid equalises both cards in a row to the taller one,
   so the grid always looks aligned even when wrap depths differ.

   min-width:0 on the card AND the header is non-negotiable —
   without it CSS Grid cells won't shrink past intrinsic width
   and wrapping / line-clamp silently stops working.
──────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {

	/* 2-column grid */
	.fte-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	/* Card: content centred vertically within the row height */
	.fte-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 12px;
		min-width: 0;       /* REQUIRED: lets the grid cell shrink */
	}

	/* Header: icon anchors to top of the (possibly multi-line) name */
	.fte-card-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		margin-bottom: 0;   /* description is hidden on mobile */
		flex: 1;
		min-width: 0;       /* REQUIRED: allows text to wrap correctly */
	}

	/* Icon — default size, never shrinks */
	.fte-card-icon-bubble {
		width: 32px;
		height: 32px;
		font-size: 16px;
		border-radius: 8px;
		flex-shrink: 0;
		margin-top: 0;
	}

	/* Title — full name, wraps to 3 lines max, never truncated */
	.fte-card-name {
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		min-width: 0;
	}

	/* Description hidden on mobile */
	.fte-card-desc { display: none; }

	/* ── Adaptive size classes (set by JS on page load) ───────────
	   Only active inside this breakpoint; desktop is unaffected.
	─────────────────────────────────────────────────────────────── */

	/* Short names  ≤ 12 chars — generous text & icon */
	.fte-card.fte-name-s .fte-card-icon-bubble { width: 36px; height: 36px; font-size: 18px; }
	.fte-card.fte-name-s .fte-card-name        { font-size: 14px; }

	/* Medium names  13–22 chars — default sizes above, no override */

	/* Long names  23–32 chars — scale down a notch */
	.fte-card.fte-name-l .fte-card-icon-bubble { width: 28px; height: 28px; font-size: 14px; }
	.fte-card.fte-name-l .fte-card-name        { font-size: 12px; }

	/* Very long names  33+ chars — smallest comfortable size */
	.fte-card.fte-name-xl .fte-card-icon-bubble { width: 24px; height: 24px; font-size: 12px; }
	.fte-card.fte-name-xl .fte-card-name        { font-size: 11px; }
}

/* ============================================================
   Accessibility: reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
	.fte-card,
	.fte-card::before,
	.fte-card-icon-bubble,
	.fte-card-name,
	.fte-tab,
	.fte-scroll-arrow {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
   Accessibility: high contrast mode
============================================================ */
@media (prefers-contrast: high) {
	.fte-card {
		border: 2px solid currentColor;
		box-shadow: none;
	}

	.fte-card:hover {
		border-color: currentColor;
		box-shadow: none;
		transform: none;
	}

	.fte-tab.is-active,
	.fte-tab[aria-selected="true"] {
		background: transparent;
		border: 2px solid currentColor;
		box-shadow: none;
	}
}