/**
 * itj205 design tokens and utilities.
 *
 * Loaded on every page, including inside the Elementor editor, so hand-built sections and the
 * plugin's own components share one visual language.
 *
 * Two ways to use it:
 *   1. Tokens  — reference var(--itj-*) in any Elementor custom CSS or child-theme rule.
 *   2. Classes — type an itj-* class into Elementor's Advanced → CSS Classes field.
 *
 * Palette follows the agreed direction: black, white and greys, with brand yellow as an accent
 * only. Nothing here sets a font family on body — the theme keeps ownership of that.
 */

:root {
	/* Brand — values taken verbatim from elementor/README.md in itj205/com PR #2, so the
	   plugin's components and the nine imported Elementor templates stay in step. Do not
	   invent new hexes here; change them in the template build and mirror them across. */
	--itj-accent: #f9b200;          /* brand yellow — logo and hover only, never large fills */
	--itj-accent-ink: #000000;      /* text on an accent fill */

	/* Dark palette — the site is dark-first: black page, light text */
	--itj-black: #000000;           /* page background, header, footer */
	--itj-panel: #0b0b0d;           /* partner strips, inset panels on black */
	--itj-ink: #f5f5f7;             /* headings on dark */
	--itj-ink-2: #a1a1a6;           /* body text on dark */
	--itj-ink-3: #6e6e73;           /* labels and meta on dark */

	/* Light sections */
	--itj-light: #f5f5f7;           /* light section background */
	--itj-dark: #1d1d1f;            /* headings and body on light */

	/* Derived neutrals. Not in the README — kept minimal and tied to the above so form
	   controls have borders and surfaces without introducing a competing grey ramp. */
	--itj-line: color-mix(in srgb, var(--itj-dark) 16%, transparent);
	--itj-line-strong: color-mix(in srgb, var(--itj-dark) 32%, transparent);
	--itj-surface: var(--itj-light);
	--itj-white: #ffffff;

	/* Text colours in a light context, which is where forms usually sit */
	--itj-text: var(--itj-dark);
	--itj-muted: var(--itj-ink-3);

	/* Status. Chosen to sit alongside the monochrome palette rather than brighten it. */
	--itj-ok: #0a7c3f;
	--itj-warn: #9a6700;
	--itj-bad: #a6301c;

	/* Type — Inter at the four weights the templates load */
	--itj-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--itj-weight-light: 300;
	--itj-weight-normal: 400;
	--itj-weight-medium: 500;
	--itj-weight-semibold: 600;

	/* Spacing — 4px base */
	--itj-space-1: 0.25rem;
	--itj-space-2: 0.5rem;
	--itj-space-3: 0.75rem;
	--itj-space-4: 1rem;
	--itj-space-5: 1.5rem;
	--itj-space-6: 2rem;
	--itj-space-7: 3rem;
	--itj-space-8: 4rem;

	/* Type scale */
	--itj-text-xs: 0.8125rem;
	--itj-text-sm: 0.875rem;
	--itj-text-base: 1rem;
	--itj-text-lg: 1.125rem;
	--itj-text-xl: 1.375rem;
	--itj-text-2xl: 1.75rem;
	--itj-text-3xl: 2.25rem;

	/* Shape */
	--itj-radius: 8px;
	--itj-radius-lg: 14px;
	--itj-radius-pill: 999px;
	--itj-border: 1px solid var(--itj-line);

	/* Elevation — restrained, in keeping with the monochrome photographic look */
	--itj-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
	--itj-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.08);

	/* Motion */
	--itj-ease: cubic-bezier(0.2, 0, 0.2, 1);
	--itj-fast: 140ms;
	--itj-slow: 280ms;

	/* Layout */
	--itj-container: 72rem;
	--itj-measure: 40rem;
}

/* ---------------------------------------------------------------- dark surfaces */

/* Put itj-dark on any Elementor section to flip its contents to the dark palette. */
.itj-dark {
	--itj-text: var(--itj-ink);
	--itj-muted: var(--itj-ink-3);
	--itj-line: color-mix(in srgb, var(--itj-ink) 18%, transparent);
	--itj-line-strong: color-mix(in srgb, var(--itj-ink) 34%, transparent);
	--itj-surface: var(--itj-panel);
	--itj-white: var(--itj-panel);
	--itj-accent-ink: #000000;

	color: var(--itj-text);
	background: var(--itj-black);
}

/* ---------------------------------------------------------------- layout */

.itj-container { max-width: var(--itj-container); margin-inline: auto; padding-inline: var(--itj-space-4); }
.itj-measure { max-width: var(--itj-measure); }
.itj-center { margin-inline: auto; }

.itj-stack > * + * { margin-top: var(--itj-space-4); }
.itj-stack-sm > * + * { margin-top: var(--itj-space-2); }
.itj-stack-lg > * + * { margin-top: var(--itj-space-6); }

.itj-grid { display: grid; gap: var(--itj-space-4); }
.itj-grid-2 { display: grid; gap: var(--itj-space-4); grid-template-columns: 1fr; }
.itj-grid-3 { display: grid; gap: var(--itj-space-4); grid-template-columns: 1fr; }
.itj-grid-4 { display: grid; gap: var(--itj-space-4); grid-template-columns: 1fr; }

/* Grids collapse 4 → 2 → 1 and 3 → 2 → 1, per the agreed responsive behaviour. */
@media (min-width: 40rem) {
	.itj-grid-2, .itj-grid-3, .itj-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60rem) {
	.itj-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.itj-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.itj-row { display: flex; flex-wrap: wrap; gap: var(--itj-space-3); align-items: center; }
.itj-row-between { display: flex; flex-wrap: wrap; gap: var(--itj-space-3); align-items: center; justify-content: space-between; }

/* ---------------------------------------------------------------- surfaces */

.itj-card {
	padding: var(--itj-space-5);
	border: var(--itj-border);
	border-radius: var(--itj-radius-lg);
	background: var(--itj-white);
	color: var(--itj-text);
}

.itj-card-hover { transition: transform var(--itj-fast) var(--itj-ease), box-shadow var(--itj-fast) var(--itj-ease); }
.itj-card-hover:hover { transform: translateY(-2px); box-shadow: var(--itj-shadow-2); }

.itj-panel {
	padding: var(--itj-space-4);
	border-radius: var(--itj-radius);
	background: var(--itj-surface);
}

/* Photo card: image with a label over a gradient — the hardware-category treatment. */
.itj-photo-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--itj-radius-lg);
	aspect-ratio: 4 / 3;
	background: var(--itj-surface);
}

.itj-photo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.05);
	transition: transform var(--itj-slow) var(--itj-ease), filter var(--itj-slow) var(--itj-ease);
}

.itj-photo-card:hover img { transform: scale(1.04); filter: grayscale(0.4) contrast(1.05); }

.itj-photo-card__label {
	position: absolute;
	inset: auto 0 0 0;
	padding: var(--itj-space-5) var(--itj-space-4) var(--itj-space-4);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
	color: #fff;
	font-size: var(--itj-text-lg);
	font-weight: 600;
}

/* ---------------------------------------------------------------- type */

.itj-eyebrow {
	margin: 0 0 var(--itj-space-2);
	font-size: var(--itj-text-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--itj-muted);
}

.itj-h1 { font-size: var(--itj-text-3xl); line-height: 1.1; margin: 0 0 var(--itj-space-4); }
.itj-h2 { font-size: var(--itj-text-2xl); line-height: 1.15; margin: 0 0 var(--itj-space-3); }
.itj-h3 { font-size: var(--itj-text-xl); line-height: 1.2; margin: 0 0 var(--itj-space-2); }
.itj-lead { font-size: var(--itj-text-lg); color: var(--itj-muted); }
.itj-small { font-size: var(--itj-text-sm); }
.itj-muted { color: var(--itj-muted); }
.itj-accent { color: var(--itj-accent); }

/* Keep long specification strings from blowing out narrow cards. */
.itj-truncate-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------------------------------------------------------------- controls */

.itj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--itj-space-2);
	padding: var(--itj-space-3) var(--itj-space-5);
	border: 0;
	border-radius: var(--itj-radius);
	background: var(--itj-accent);
	color: var(--itj-accent-ink);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: filter var(--itj-fast) var(--itj-ease);
}

.itj-btn:hover { filter: brightness(0.94); }
.itj-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.itj-btn-ghost {
	background: transparent;
	color: var(--itj-text);
	box-shadow: inset 0 0 0 1px var(--itj-line);
}

.itj-btn-ghost:hover { background: var(--itj-surface); filter: none; }

.itj-btn-dark { background: var(--itj-dark); color: var(--itj-ink); }

.itj-tag {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: var(--itj-radius-pill);
	background: var(--itj-surface);
	color: var(--itj-muted);
	font-size: var(--itj-text-xs);
	font-weight: 600;
}

.itj-tag-ok { background: #eef8f1; color: var(--itj-ok); }
.itj-tag-warn { background: #fdf6e3; color: var(--itj-warn); }
.itj-tag-bad { background: #fdf1ef; color: var(--itj-bad); }

/* ---------------------------------------------------------------- misc */

.itj-divider { height: 1px; border: 0; margin: var(--itj-space-6) 0; background: var(--itj-line); }

.itj-stat__value { font-size: var(--itj-text-3xl); font-weight: 700; line-height: 1; }
.itj-stat__label { font-size: var(--itj-text-sm); color: var(--itj-muted); }

/* Partner / brand strip — greyscale until hovered. */
.itj-logos { display: flex; flex-wrap: wrap; gap: var(--itj-space-5); align-items: center; justify-content: center; }
.itj-logos img { max-height: 2rem; width: auto; filter: grayscale(1); opacity: 0.65; transition: opacity var(--itj-fast) var(--itj-ease), filter var(--itj-fast) var(--itj-ease); }
.itj-logos img:hover { filter: grayscale(0); opacity: 1; }

/* Editor-only placeholder from the widget base. */
.itj-editor-notice {
	margin-top: var(--itj-space-3);
	padding: var(--itj-space-4);
	border: 1px dashed var(--itj-line);
	border-radius: var(--itj-radius);
	color: var(--itj-muted);
	font-size: var(--itj-text-xs);
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	.itj-card-hover, .itj-photo-card img, .itj-btn, .itj-logos img { transition: none; }
	.itj-card-hover:hover { transform: none; }
	.itj-photo-card:hover img { transform: none; }
}