/* Accessibility and responsive polish for the imported portfolio build. */
:root {
  --hero-fade: linear-gradient(90deg, #0f172a 0%, rgba(15, 23, 42, .96) 34%, rgba(15, 23, 42, .35) 65%, transparent 100%);
}

[data-theme="light"] {
  --hero-fade: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .98) 34%, rgba(255, 255, 255, .72) 62%, rgba(255, 255, 255, .08) 88%, transparent 100%);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* The original hero overlay used a dark fixed color in both themes. */
[style*="linear-gradient(to right"] {
  background: var(--hero-fade) !important;
}

/* Keep accent words readable on both light and dark backgrounds. */
.gradient-text {
  -webkit-text-fill-color: currentColor;
  background: none;
  color: var(--accent-primary);
}

[data-theme="dark"] .gradient-text {
  color: #7dd3fc;
}

.text-muted-foreground,
.text-slate-400,
.text-slate-500 {
  color: var(--text-secondary) !important;
}

.text-body {
  color: var(--text-secondary);
}

/* Hero metrics should never look unavailable while their parent animates in. */
.relative.min-h-screen .text-center {
  opacity: 1 !important;
  transform: none !important;
}

/* Reduce only decorative layers that were making the page feel dim. */
.relative.min-h-screen > .opacity-40 {
  opacity: .16;
}

button,
a {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  /* The source build intentionally reverses the desktop hero columns. */
  .order-2 {
    order: 1 !important;
  }

  .order-1 {
    order: 2 !important;
  }

  .container-custom {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .section-padding {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .min-h-screen {
    min-height: auto;
  }

  .heading-xl {
    font-size: clamp(2.25rem, 11vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.04em;
  }

  .heading-lg {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.15;
  }

  .text-body {
    font-size: 1rem;
    line-height: 1.7;
  }

  .btn-primary,
  .btn-secondary {
    min-height: 46px;
    padding: 11px 16px;
  }

  nav .container-custom {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  nav .text-xl {
    font-size: 1.05rem;
  }

  nav .w-10.h-10 {
    width: 2.25rem;
    height: 2.25rem;
  }

  [class*="grid-cols-2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [class*="grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [class*="gap-16"] {
    gap: 2.5rem;
  }

  [class*="gap-12"] {
    gap: 2rem;
  }

  [class*="p-8"] {
    padding: 1.25rem;
  }

  [class*="p-10"] {
    padding: 1.5rem;
  }

  [class*="text-5xl"],
  [class*="text-6xl"] {
    font-size: 2rem;
    line-height: 1.15;
  }

  [class*="aspect-video"] {
    min-height: 13rem;
  }

  [style*="linear-gradient(to right"] {
    background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(255, 255, 255, 0) 72%) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .container-custom {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .heading-xl {
    font-size: 3.25rem;
    line-height: 1.05;
  }
}