/* ==========================================================================
   AZ Portfolio — base styles (tokens, base, components)
   Mobile-first; breakpoints: 768 / 1024 / 1440.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
	--az-bg: #050b17;
	--az-surface: #0a1424;
	--az-surface-2: #142233;
	--az-text: #eaf2ef;
	--az-text-soft: #c9d6d2;
	--az-muted: #a3b5b0;
	--az-subtle: #6e837d;
	--az-accent: #4fa58a;
	--az-accent-light: #7fd3b2;
	--az-accent-hover: #5fb89b;
	--az-on-accent: #04110c;
	--az-border: rgba(79, 165, 138, 0.35);
	--az-border-soft: rgba(79, 165, 138, 0.15);

	--az-font: "Montserrat", system-ui, sans-serif;
	--az-font-mono: "JetBrains Mono", ui-monospace, monospace;

	--az-fs-h1: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem);
	--az-fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
	--az-fs-h3: 1.25rem;
	--az-fs-lead: 1.125rem;

	--az-radius-sm: 12px;
	--az-radius: 20px;
	--az-radius-lg: 28px;
	--az-pill: 999px;

	--az-container: 1200px;
	--az-gutter: 20px;
	--az-section-y: 64px;

	--az-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 768px) {
	:root {
		--az-gutter: 32px;
		--az-section-y: 88px;
	}
}

/* ---------- Base ---------- */
body {
	background: var(--az-bg);
	color: var(--az-text);
	font-family: var(--az-font);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	color: var(--az-text);
	font-family: var(--az-font);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0 0 0.5em;
}

h1 { font-size: var(--az-fs-h1); letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: var(--az-fs-h2); }
h3 { font-size: var(--az-fs-h3); font-weight: 700; letter-spacing: 0; }

a {
	color: var(--az-accent-light);
	transition: color 0.2s var(--az-ease);
}

a:hover,
a:focus {
	color: #a8e6cc;
}

:focus-visible {
	outline: 2px solid var(--az-accent-light);
	outline-offset: 3px;
}

::selection {
	background: var(--az-accent);
	color: var(--az-on-accent);
}

img {
	max-width: 100%;
	height: auto;
}

/* ---------- Layout ---------- */
.az-container {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--az-container);
	padding-inline: var(--az-gutter);
	width: 100%;
}

.az-section {
	border-top: 1px solid var(--az-border-soft);
	padding-block: var(--az-section-y);
}

.az-section__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 40px;
}

.az-eyebrow {
	color: var(--az-accent);
	font-family: var(--az-font-mono);
	font-size: 0.875rem;
}

.az-lead {
	color: var(--az-muted);
	font-size: var(--az-fs-lead);
	max-width: 560px;
}

.az-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
	.az-grid--2,
	.az-grid--3,
	.az-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.az-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	.az-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Buttons ---------- */
.az-btn {
	align-items: center;
	border: 2px solid var(--az-accent);
	border-radius: var(--az-pill);
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--az-font);
	font-size: 1rem;
	font-weight: 700;
	gap: 8px;
	justify-content: center;
	min-height: 54px;
	padding: 0 30px;
	text-decoration: none;
	transition: background-color 0.2s var(--az-ease), color 0.2s var(--az-ease), transform 0.2s var(--az-ease);
}

.az-btn--primary {
	background: var(--az-accent);
	color: var(--az-on-accent);
}

.az-btn--primary:hover,
.az-btn--primary:focus {
	background: var(--az-accent-hover);
	border-color: var(--az-accent-hover);
	color: var(--az-on-accent);
}

.az-btn--ghost {
	background: transparent;
	color: var(--az-text);
}

.az-btn--ghost:hover,
.az-btn--ghost:focus {
	background: rgba(79, 165, 138, 0.12);
	color: var(--az-text);
}

.az-btn--sm {
	font-size: 0.875rem;
	min-height: 44px;
	padding: 0 20px;
}

.az-btn:active { transform: translateY(1px); }

/* ---------- Tags & chips ---------- */
.az-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.az-tag {
	border: 1px solid var(--az-accent);
	border-radius: var(--az-pill);
	color: var(--az-accent-light);
	font-size: 0.75rem;
	padding: 3px 12px;
}

.az-chip {
	background: var(--az-surface);
	border: 1px solid var(--az-border);
	border-radius: var(--az-radius-sm);
	font-weight: 600;
	padding: 10px 18px;
}

/* ---------- Cards ---------- */
.az-card {
	background: var(--az-surface);
	border: 1px solid var(--az-border);
	border-radius: var(--az-radius);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
}

.az-card p { color: var(--az-muted); font-size: 0.9375rem; margin: 0; }

/* Project card (portfolio grid) */
.az-project-card {
	background: var(--az-bg);
	border: 2px solid var(--az-accent);
	border-radius: var(--az-radius);
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 18px 24px;
	transition: transform 0.25s var(--az-ease), box-shadow 0.25s var(--az-ease);
}

.az-project-card[hidden] { display: none; }

.az-projects { display: flex; flex-direction: column; gap: 32px; }

.az-project-card__media { display: block; }

.az-project-card:hover {
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
	transform: translateY(-4px);
}

.az-project-card__media {
	aspect-ratio: 16 / 10;
	background: var(--az-surface-2);
	border-radius: var(--az-radius-sm);
	overflow: hidden;
}

.az-project-card__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: top;
	width: 100%;
}

.az-project-card__title { font-size: var(--az-fs-h3); font-weight: 700; letter-spacing: 0; margin: 0; }
.az-project-card__desc { color: var(--az-muted); flex-grow: 1; font-size: 0.9375rem; margin: 0; }
.az-project-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Filter tabs ---------- */
.az-tabs {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scrollbar-width: none;
}

.az-tabs::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
	.az-tabs { gap: 28px; }
}

.az-tab {
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--az-muted);
	cursor: pointer;
	font: 500 1rem/1.6 var(--az-font);
	padding: 8px 0;
	white-space: nowrap;
}

.az-tab:hover { color: var(--az-text); }

.az-tab[aria-pressed="true"],
.az-tab[aria-selected="true"] {
	border-bottom-color: var(--az-accent);
	color: var(--az-text);
}

/* ---------- Forms ---------- */
.az-field {
	display: flex;
	flex-direction: column;
	font-size: 0.875rem;
	font-weight: 600;
	gap: 6px;
}

.az-field input,
.az-field select,
.az-field textarea {
	background: var(--az-bg);
	border: 1px solid rgba(79, 165, 138, 0.45);
	border-radius: var(--az-radius-sm);
	box-sizing: border-box;
	color: var(--az-text);
	font: 400 1rem/1.5 var(--az-font);
	min-height: 50px;
	padding: 12px 16px;
	width: 100%;
}

.az-field input:focus,
.az-field select:focus,
.az-field textarea:focus {
	border-color: var(--az-accent-light);
	outline: none;
	box-shadow: 0 0 0 3px rgba(79, 165, 138, 0.25);
}

.az-field input[aria-invalid="true"],
.az-field textarea[aria-invalid="true"] {
	border-color: #f08a7e;
}

.az-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237FD3B2' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 16px center;
	background-repeat: no-repeat;
	padding-right: 44px;
}

.az-field select option { background: var(--az-surface); color: var(--az-text); }

/* Lead form */
.az-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.az-form__hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.az-form__submit {
	width: 100%;
}

.az-form__submit:disabled {
	cursor: progress;
	opacity: 0.7;
}

/* Keep the live region in the DOM (display:none would stop announcements). */
.az-form__status:empty { border: 0; padding: 0; }

.az-form__status {
	border-radius: var(--az-radius-sm);
	font-size: 0.9375rem;
	margin: 0;
	padding: 12px 16px;
}

.az-form__status.is-success {
	background: rgba(79, 165, 138, 0.15);
	border: 1px solid var(--az-accent);
	color: var(--az-accent-light);
}

.az-form__status.is-error {
	background: rgba(240, 138, 126, 0.1);
	border: 1px solid #f08a7e;
	color: #f6b3ab;
}

.az-form__note {
	color: var(--az-subtle);
	font-size: 0.8125rem;
	margin: 0;
}

/* ---------- Scroll reveal (enabled by JS adding .az-js on <html>) ---------- */
.az-js .az-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--az-ease), transform 0.6s var(--az-ease);
}

.az-js .az-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; /* Respect user motion preference. */
		transition-duration: 0.01ms !important;
	}

	.az-js .az-reveal { opacity: 1; transform: none; }
}

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