/*
 * Dratschjona Main Design System Stylesheet
 * Custom CSS with Material Design 3 Dark Theme, Fluid Typography, Grid & Glassmorphism
 * Aligned with Stitch Project 13010891162386082548 (Precision Master)
 * Author: Oleg Kononin
 */

/* =========================================================================
   1. RESET & BASE SETUP
========================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body), 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  background-color: var(--color-background, #131313);
  color: var(--color-on-background, #e5e2e1);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background, #131313);
  color: var(--color-on-background, #e5e2e1);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Link reset: prevents any default browser blue hyperlinks */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-primary, #ffb4aa);
}

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

/* Accessibility Focus Visible Rings */
:focus-visible {
  outline: 2px solid var(--color-primary-container, #e30613) !important;
  outline-offset: 4px !important;
}

/* =========================================================================
   2. TYPOGRAPHY CLASSES
========================================================================= */
.font-display {
  font-family: var(--font-display, 'Libre Caslon Text', Georgia, serif);
}

.font-body {
  font-family: var(--font-body, 'Hanken Grotesk', system-ui, -apple-system, sans-serif);
}

.font-mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.text-display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.text-headline-xl {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
  font-weight: 700;
  line-height: 1.2;
}

.text-headline-lg {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw + 1rem, 2rem);
  font-weight: 600;
  line-height: 1.3;
}

.text-body-lg {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
}

.text-body-md {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

.text-button {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.text-label-technical {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* =========================================================================
   3. CONTAINERS & COMPREHENSIVE RESPONSIVE GRID FALLBACKS
========================================================================= */
.container-custom {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 768px) {
  .container-custom {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (min-width: 1024px) {
  .container-custom {
    padding-left: 64px;
    padding-right: 64px;
  }
}

/* Flexbox utilities */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

  .md\:col-span-4 { grid-column: span 4 / span 4; }
  .md\:col-span-5 { grid-column: span 5 / span 5; }
  .md\:col-span-6 { grid-column: span 6 / span 6; }
  .md\:col-span-7 { grid-column: span 7 / span 7; }
  .md\:col-span-8 { grid-column: span 8 / span 8; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none !important; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
}

/* Gaps */
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }

/* Display & Visibility */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.w-full { width: 100%; }
.h-full { height: 100%; }

/* =========================================================================
   4. GLASSMORPHISM, BUTTONS & CARDS (PRECISION MASTER DESIGN SYSTEM)
========================================================================= */
.glass-panel {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(26, 26, 26, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 8px);
}

.tech-card {
  background: var(--color-surface-container, #201f1f);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 4px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tech-card:hover {
  background: var(--color-surface-bright, #3a3939);
  border-color: rgba(227, 6, 19, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.tech-card-accent {
  position: relative;
}

.tech-card-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--color-primary-container, #e30613);
  transition: width 0.3s ease;
}

.tech-card-accent:hover::before {
  width: 100%;
}

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  background-color: var(--color-primary-container, #e30613);
  color: #ffffff !important;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm, 2px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-primary:hover {
  background-color: #f00715;
  box-shadow: 0 0 24px rgba(227, 6, 19, 0.6);
  transform: translateY(-2px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  background-color: transparent;
  color: #ffffff !important;
  border: 2px solid var(--color-primary-container, #e30613);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm, 2px);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.btn-secondary:hover {
  background-color: rgba(227, 6, 19, 0.15);
  color: #ffffff !important;
  border-color: #ff3340;
}

.electric-glow {
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.electric-glow:hover {
  box-shadow: 0 0 24px rgba(227, 6, 19, 0.55);
}

/* Animated Energy Pulse Line */
.energy-line {
  background: linear-gradient(90deg, transparent, var(--color-primary-container, #e30613), transparent);
  height: 1px;
  width: 100%;
  position: absolute;
  left: 0;
  animation: energyPulse 3s ease-in-out infinite;
}

@keyframes energyPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}

/* Material Symbols alignment */
.material-symbols-outlined {
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}