/* ==========================================================================
   HaksengUz — shared styles
   Loaded by every page. Tokens, reset, typography, header/nav, footer, and
   the components reused across pages (buttons, cards, forms, language menu).

   Page-specific styles live beside this file and are linked only where they
   are used — see styles/demo.css, styles/resume.css, styles/jobs.css.
   Add page styles there, not here, or every page pays for them.

   Fonts are linked from each page's <head> rather than @import-ed here: an
   @import is only discovered after this file has been fetched and parsed,
   which puts an extra round trip in front of first paint.

   Tailwind arrives via CDN (<script src="cdn.tailwindcss.com">), so there are
   no @tailwind directives — those are PostCSS build directives and this
   project has no build step. They were present here and did nothing.
   ========================================================================== */

:root {
  --primary-blue: #3b82f6;
  --accent-orange: #f97316;
  --dark-bg: #1f2937;
  --light-bg: #f9fafb;
  --text-dark: #111827;
  --text-light: #6b7280;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  background-color: #ffffff;
  transition: background-color 0.3s ease;
}

body.dark-mode {
  background-color: var(--dark-bg);
  color: #f9fafb;
}

body.dark-mode .bg-white {
  background-color: #1f2937;
}

body.dark-mode .bg-gray-50 {
  background-color: #111827;
}

body.dark-mode .bg-gray-100 {
  background-color: #374151;
}

body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500 {
  color: #d1d5db;
}

body.dark-mode .text-gray-400 {
  color: #9ca3af;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* Header Styles */
header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

body.dark-mode header {
  background: rgba(31, 41, 55, 0.95);
}

/* Navigation
   The desktop nav carries nine items plus the logo, language picker and CTA.
   Uzbek labels are noticeably longer than the English ones ("Ish o'rinlari"
   vs "Jobs"), so the row is sized for the widest language, not the shortest:
   it appears at >=1024px in a compact form, and only relaxes to full spacing
   (and regains the CTA) at >=1280px, where the container stops growing.
   Below 1024px the hamburger takes over — see the media queries at the end. */
header nav {
  gap: 16px;
}

header nav > div {
  flex-shrink: 0;
}

/* The header owns its own show/hide instead of leaning on the `hidden lg:flex`
   utilities in the markup: Tailwind arrives from the CDN and injects its sheet
   at runtime, so which of the two sheets wins a single-class tie is not
   something this file can count on. These selectors carry an extra element and
   win either way; the utility classes are kept in the markup as documentation
   and as a stand-in while the CDN script is still loading. */
header .desktop-nav {
  display: none;
  gap: 0.75rem;
  font-size: 0.875rem;
  min-width: 0;
  flex-wrap: nowrap;
}

header nav .btn-primary {
  display: none;
}

@media (min-width: 1024px) {
  header .desktop-nav {
    display: flex;
    align-items: center;
  }
}

/* At 1280px the container has reached its max-width, so this is as much room
   as the row will ever get: full spacing and the CTA, and nothing wider. */
@media (min-width: 1280px) {
  header .desktop-nav {
    gap: 1rem;
    font-size: 0.9375rem;
  }

  header nav .btn-primary {
    display: inline-block;
  }
}

.desktop-nav li,
.desktop-nav .nav-link {
  white-space: nowrap;
}

.nav-link {
  position: relative;
  color: var(--text-dark);
  font-weight: 500;
  transition: color 0.3s ease;
}

body.dark-mode .nav-link {
  color: #f9fafb;
}

.nav-link:hover {
  color: var(--primary-blue);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-blue);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Button Styles */
.btn-primary {
  background: var(--primary-blue);
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.btn-primary:hover {
  background: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.btn-secondary {
  background: transparent;
  color: var(--primary-blue);
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid var(--primary-blue);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.btn-secondary:hover {
  background: var(--primary-blue);
  color: white;
}

.btn-orange {
  background: var(--accent-orange);
  color: white;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

.btn-orange:hover {
  background: #ea580c;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3);
}

/* Hero Section */
.hero-gradient {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  position: relative;
  overflow: hidden;
}

body.dark-mode .hero-gradient {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
}

/* Section Styles */
.section {
  padding: 80px 0;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

body.dark-mode .section-title {
  color: #f9fafb;
}

.section-subtitle {
  text-align: center;
  color: var(--text-light);
  font-size: 1.125rem;
  margin-bottom: 3rem;
}

/* Card Styles */
.card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

body.dark-mode .card {
  background: #374151;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Icon Styles */
.icon-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
}

.icon-blue {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: var(--primary-blue);
}

.icon-orange {
  background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
  color: var(--accent-orange);
}

/* Program Cards */
.program-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2px solid transparent;
  height: 100%;
}

.program-card:hover {
  border-color: var(--primary-blue);
  transform: translateY(-8px);
}

.program-card.featured {
  border: 2px solid var(--primary-blue);
  position: relative;
}

.program-card.featured::before {
  content: "POPULAR";
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--primary-blue);
  color: white;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Mentor Cards */
.mentor-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

body.dark-mode .mentor-card {
  background: #374151;
}

.mentor-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.mentor-avatar {
  width: 120px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 1.5rem;
  object-fit: cover;
  object-position: center top;
  border: 4px solid var(--primary-blue);
}

/* Testimonial Cards */
.testimonial-card {
  background: white;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  position: relative;
}

body.dark-mode .testimonial-card {
  background: #374151;
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 4rem;
  color: var(--primary-blue);
  opacity: 0.2;
  font-family: Georgia, serif;
}

/* Footer */
footer {
  background: #111827;
  color: #f9fafb;
  padding: 60px 0 30px;
}

footer a {
  color: #9ca3af;
  transition: color 0.3s ease;
  text-decoration: none;
}

footer a:hover {
  color: var(--primary-blue);
}

/* Dark Mode Toggle */
.dark-mode-toggle {
  background: var(--light-bg);
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
}

.dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.dark-mode .dark-mode-toggle {
  background: #374151;
  color: #f9fafb;
}

/* Language Dropdown */
.lang-dropdown {
  position: relative;
}

.lang-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-dark);
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.lang-dropdown-trigger:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.lang-chevron {
  transition: transform 0.2s ease;
  color: var(--text-light);
  flex-shrink: 0;
}

.lang-dropdown.open .lang-chevron {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
  list-style: none;
  z-index: 1100;
  animation: dropdownIn 0.15s ease;
}

@keyframes dropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lang-dropdown.open .lang-dropdown-menu {
  display: block;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-dark);
  transition: background 0.15s ease;
  text-align: left;
}

.lang-option:hover {
  background: var(--light-bg);
}

.lang-option.active {
  background: #eff6ff;
  color: var(--primary-blue);
  font-weight: 600;
}

.lang-option-code {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.04em;
}

.lang-option.active .lang-option-code {
  color: var(--primary-blue);
}

/* Mobile Menu */
.mobile-menu {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 999;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.dark-mode .mobile-menu {
  background: #374151;
}

.mobile-menu.active {
  display: block;
}

/* A resize past the nav breakpoint must not leave the panel hanging over the
   page: the desktop nav is back, so the panel is closed regardless of state. */
@media (min-width: 1024px) {
  .mobile-menu.active {
    display: none;
  }
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}

body.dark-mode .hamburger span {
  background: #f9fafb;
}

/* Responsive */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }

  .section {
    padding: 60px 0;
  }

  .program-card {
    padding: 24px;
  }
}

/* Utility Classes */

/* Tailwind's CDN build ships a `.container` of its own — stepped max-widths
   (640/768/1024/1280/1536) and no padding — and the name collides with this
   one. Which of the two sheets wins a single-class tie comes down to the order
   the CDN injects its <style>, which is not ours to control, so this selector
   carries an extra element and wins outright.
   It matters most between 768px and 1280px: under Tailwind's stepped widths
   the page sat at 1024px wide with idle gutters on a 1200px window and then
   snapped to full bleed at exactly 1280px, instead of growing with the
   window. */
body .container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #2563eb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Checkmark List */
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  color: var(--text-light);
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary-blue);
  font-weight: bold;
  font-size: 1.2rem;
}

/* Social Icons */
.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary-blue);
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon:hover {
  background: var(--primary-blue);
  color: white;
  transform: translateY(-3px);
}

/* Form Styles */
.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.dark-mode .form-input {
  background: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

/* Portfolio Page */
.nav-link.active {
  color: var(--primary-blue);
}

.nav-link.active::after {
  width: 100%;
}

.portfolio-hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 56px;
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(59, 130, 246, 0.28),
      transparent 34%
    ),
    radial-gradient(
      circle at 80% 10%,
      rgba(249, 115, 22, 0.22),
      transparent 30%
    ),
    linear-gradient(135deg, #eff6ff 0%, #dbeafe 52%, #bfdbfe 100%);
}

body.dark-mode .portfolio-hero {
  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(59, 130, 246, 0.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 80% 10%,
      rgba(249, 115, 22, 0.16),
      transparent 30%
    ),
    linear-gradient(135deg, #111827 0%, #1f2937 58%, #1e3a8a 100%);
}

.portfolio-grid-bg {
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.16) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: portfolioGridDrift 22s linear infinite;
}

@keyframes portfolioGridDrift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(48px, 48px, 0);
  }
}

.portfolio-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--primary-blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.dark-mode .portfolio-kicker {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

.portfolio-hero-copy,
.portfolio-founder-card {
  min-width: 0;
}

.portfolio-hero .grid,
.portfolio-hero .grid > * {
  min-width: 0;
}

.portfolio-hero-title {
  max-width: 760px;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.02;
  margin-bottom: 24px;
  color: var(--text-dark);
}

.portfolio-hero-title,
.portfolio-hero-lead,
.portfolio-hero-text {
  overflow-wrap: break-word;
}

body.dark-mode .portfolio-hero-title {
  color: #f9fafb;
}

.portfolio-hero-lead {
  max-width: 720px;
  color: #374151;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.55;
  font-weight: 700;
}

.portfolio-hero-text {
  max-width: 690px;
  margin-top: 18px;
  color: var(--text-light);
  font-size: 1.08rem;
  line-height: 1.8;
}

body.dark-mode .portfolio-hero-lead,
body.dark-mode .portfolio-hero-text {
  color: #d1d5db;
}

.portfolio-founder-card {
  position: relative;
  display: grid;
  gap: 24px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 70px rgba(31, 41, 55, 0.18);
  backdrop-filter: blur(12px);
}

body.dark-mode .portfolio-founder-card {
  border-color: rgba(148, 163, 184, 0.25);
  background: rgba(31, 41, 55, 0.82);
}

.portfolio-founder-photo {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  object-position: center top;
  border-radius: 20px;
  border: 5px solid white;
  box-shadow: 0 18px 45px rgba(17, 24, 39, 0.18);
}

body.dark-mode .portfolio-founder-photo {
  border-color: #374151;
}

.portfolio-founder-label {
  margin-bottom: 8px;
  color: var(--primary-blue);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}

.portfolio-founder-card h2 {
  margin-bottom: 10px;
  font-size: 2rem;
}

.portfolio-founder-card p:last-child {
  color: var(--text-light);
  line-height: 1.75;
}

body.dark-mode .portfolio-founder-card p:last-child {
  color: #d1d5db;
}

.portfolio-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}

.portfolio-stats-row div,
.portfolio-stat-strip div {
  padding: 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.1);
}

body.dark-mode .portfolio-stats-row div,
body.dark-mode .portfolio-stat-strip div {
  background: #374151;
}

.portfolio-stats-row strong,
.portfolio-stat-strip strong {
  display: block;
  color: var(--primary-blue);
  font-size: 1.8rem;
  line-height: 1;
}

.portfolio-stats-row span,
.portfolio-stat-strip span {
  display: block;
  margin-top: 8px;
  color: var(--text-light);
  font-weight: 600;
}

body.dark-mode .portfolio-stats-row span,
body.dark-mode .portfolio-stat-strip span {
  color: #d1d5db;
}

.portfolio-section-heading {
  max-width: 780px;
  margin: 0 auto 48px;
  text-align: center;
}

.portfolio-section-heading h2 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--text-dark);
}

.portfolio-section-heading p {
  color: var(--text-light);
  font-size: 1.08rem;
  line-height: 1.75;
}

body.dark-mode .portfolio-section-heading h2 {
  color: #f9fafb;
}

body.dark-mode .portfolio-section-heading p {
  color: #d1d5db;
}

.portfolio-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.portfolio-info-card,
.partnership-card,
.youth-program-card {
  border-radius: 16px;
  background: white;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.portfolio-info-card:hover,
.partnership-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

body.dark-mode .portfolio-info-card,
body.dark-mode .partnership-card,
body.dark-mode .youth-program-card {
  background: #374151;
}

.portfolio-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: var(--primary-blue);
  font-weight: 800;
}

.portfolio-info-card h3,
.partnership-card h3,
.youth-program-card h3 {
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.portfolio-info-card p,
.partnership-card p,
.youth-program-card p {
  color: var(--text-light);
  line-height: 1.72;
}

body.dark-mode .portfolio-info-card p,
body.dark-mode .partnership-card p,
body.dark-mode .youth-program-card p {
  color: #d1d5db;
}

.portfolio-timeline {
  position: relative;
  display: grid;
  gap: 34px;
}

.portfolio-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    var(--primary-blue),
    var(--accent-orange)
  );
}

.timeline-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px minmax(0, 1fr);
  align-items: start;
}

.timeline-marker {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  position: sticky;
  top: 96px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 999px;
  background: white;
  border: 2px solid var(--primary-blue);
  color: var(--primary-blue);
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.12);
}

body.dark-mode .timeline-marker {
  background: #1f2937;
  color: #93c5fd;
}

.timeline-card {
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding: 26px;
  border-left: 6px solid var(--primary-blue);
  border-radius: 16px;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.timeline-entry:nth-child(odd) .timeline-card {
  grid-column: 1;
}

.timeline-entry:nth-child(even) .timeline-card {
  grid-column: 3;
}

body.dark-mode .timeline-card {
  background: #374151;
}

.timeline-card h3 {
  margin: 12px 0;
  font-size: 1.45rem;
}

.timeline-card p {
  color: var(--text-light);
  line-height: 1.74;
}

body.dark-mode .timeline-card p {
  color: #d1d5db;
}

.timeline-badge,
.partner-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 6px 11px;
  background: #eff6ff;
  color: var(--primary-blue);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.timeline-blue {
  border-color: #3b82f6;
}

.timeline-gray {
  border-color: #6b7280;
}

.timeline-emerald {
  border-color: #10b981;
}

.timeline-orange {
  border-color: #f97316;
}

.timeline-red {
  border-color: #ef4444;
}

.timeline-indigo {
  border-color: #6366f1;
}

.timeline-gold {
  border-color: #f59e0b;
}

.timeline-highlight {
  border-width: 3px 3px 3px 8px;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 65%);
  box-shadow: 0 18px 50px rgba(245, 158, 11, 0.22);
}

body.dark-mode .timeline-highlight {
  background: linear-gradient(180deg, rgba(146, 64, 14, 0.34), #374151 65%);
}

.milestone-ribbon {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent-orange);
  color: white;
  font-weight: 800;
  font-size: 0.85rem;
}

.portfolio-mini-list {
  margin-top: 16px;
  display: grid;
  gap: 9px;
}

.portfolio-mini-list li {
  position: relative;
  padding-left: 24px;
  color: var(--text-light);
  line-height: 1.6;
}

.portfolio-mini-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary-blue);
}

body.dark-mode .portfolio-mini-list li {
  color: #d1d5db;
}

.timeline-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--primary-blue);
  font-weight: 800;
}

.portfolio-photo {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #fed7aa 100%);
}

.portfolio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portfolio-photo .photo-fallback {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  text-align: center;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 58%, #f97316 100%);
}

.portfolio-photo .photo-fallback span {
  font-size: 1rem;
  font-weight: 800;
}

.portfolio-photo .photo-fallback small {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

.portfolio-photo.is-missing img {
  display: none;
}

.portfolio-photo.is-missing .photo-fallback {
  display: flex;
}

.timeline-thumb-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.timeline-thumb-strip .portfolio-photo {
  min-height: 110px;
  aspect-ratio: 1 / 1;
}

.portfolio-heading-row {
  max-width: none;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
}

.portfolio-heading-row > div:first-child {
  max-width: 760px;
}

.gallery-mode-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 12px;
  background: var(--light-bg);
}

body.dark-mode .gallery-mode-toggle {
  background: #1f2937;
}

.gallery-mode-toggle button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 10px 14px;
  color: var(--text-light);
  cursor: pointer;
  font-weight: 800;
}

.gallery-mode-toggle button.active {
  background: white;
  color: var(--primary-blue);
  box-shadow: 0 4px 14px rgba(31, 41, 55, 0.12);
}

body.dark-mode .gallery-mode-toggle button.active {
  background: #374151;
}

.portfolio-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.meetup-gallery {
  position: relative;
}

.meetup-gallery-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.portfolio-gallery-card {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.portfolio-gallery-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.portfolio-gallery-card::after {
  content: attr(data-title) "\A" attr(data-date) " · " attr(data-attendees)
    " people";
  white-space: pre;
  position: absolute;
  inset: auto 0 0 0;
  padding: 48px 18px 18px;
  color: white;
  font-weight: 800;
  text-align: left;
  background: linear-gradient(180deg, transparent, rgba(17, 24, 39, 0.82));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-gallery-card:hover::after {
  opacity: 1;
}

.slider-arrow,
.gallery-dots {
  display: none;
}

.meetup-gallery.is-slider {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 56px 42px;
}

.meetup-gallery.is-slider .meetup-gallery-track {
  display: block;
}

.meetup-gallery.is-slider .portfolio-gallery-card {
  display: none;
}

.meetup-gallery.is-slider .portfolio-gallery-card.active {
  display: block;
}

.meetup-gallery.is-slider .slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 42%;
  z-index: 3;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--primary-blue);
  color: white;
  cursor: pointer;
  font-size: 2rem;
  line-height: 1;
}

.slider-prev {
  left: 0;
}

.slider-next {
  right: 0;
}

.meetup-gallery.is-slider .gallery-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.gallery-dots button {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
}

.gallery-dots button.active {
  width: 28px;
  background: var(--primary-blue);
}

.partner-logo-strip,
.community-partners {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.partner-logo-strip div,
.community-partners div {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: white;
  color: var(--text-light);
  text-align: center;
  font-weight: 800;
  padding: 18px;
}

body.dark-mode .partner-logo-strip div,
body.dark-mode .community-partners div {
  border-color: #4b5563;
  background: #374151;
  color: #d1d5db;
}

.partnership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.partnership-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.partner-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary-blue), #2563eb);
  color: white;
  font-weight: 900;
}

.partner-badge {
  background: #eff6ff;
}

.partner-purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.partner-emerald {
  background: #ecfdf5;
  color: #059669;
}

.partner-slider {
  position: relative;
  margin-top: 22px;
}

.partner-slider .portfolio-photo {
  display: none;
  min-height: 190px;
}

.partner-slider .portfolio-photo.active {
  display: block;
}

.partner-slider-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 8px;
}

.partner-slider-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.72);
  color: white;
  cursor: pointer;
  font-size: 1.4rem;
}

.community-partners {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 24px;
  margin-bottom: 0;
}

.youth-impact-section {
  background: linear-gradient(135deg, #eff6ff 0%, #fff7ed 100%);
}

body.dark-mode .youth-impact-section {
  background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

.youth-impact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  align-items: center;
  gap: 44px;
}

.youth-impact-layout h2 {
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.youth-lead {
  color: var(--text-light);
  font-size: 1.12rem;
  line-height: 1.82;
}

body.dark-mode .youth-lead {
  color: #d1d5db;
}

.youth-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0;
}

.youth-pillars div {
  padding: 20px;
  border-radius: 14px;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

body.dark-mode .youth-pillars div {
  background: #374151;
}

.youth-pillars strong {
  display: block;
  margin-bottom: 8px;
  color: var(--primary-blue);
}

.youth-pillars span {
  color: var(--text-light);
  line-height: 1.6;
}

body.dark-mode .youth-pillars span {
  color: #d1d5db;
}

.youth-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.youth-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.youth-photo-grid .portfolio-photo {
  min-height: 170px;
  aspect-ratio: 1 / 1;
}

.youth-program-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  border: 2px solid rgba(59, 130, 246, 0.18);
}

.portfolio-final-cta {
  padding: 72px 0;
  background: #111827;
}

.portfolio-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 42px;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(59, 130, 246, 0.38),
      transparent 34%
    ),
    linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: white;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.portfolio-cta-card h2 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 4vw, 3.1rem);
}

.portfolio-cta-card p {
  margin-bottom: 12px;
  color: #d1d5db;
  font-size: 1.15rem;
}

.portfolio-cta-card span {
  color: #9ca3af;
  font-weight: 700;
}

.cta-outline-light {
  border-color: white;
  color: white;
}

.cta-outline-light:hover {
  border-color: var(--primary-blue);
}

.portfolio-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.88);
}

.portfolio-lightbox.active {
  display: flex;
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox-panel {
  width: min(960px, 100%);
  overflow: hidden;
  border-radius: 20px;
  background: white;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}

body.dark-mode .lightbox-panel {
  background: #1f2937;
}

.lightbox-visual .portfolio-photo {
  border-radius: 0;
  min-height: 520px;
}

.lightbox-caption {
  padding: 24px;
}

.lightbox-caption h3 {
  margin-bottom: 8px;
  font-size: 1.4rem;
}

.lightbox-caption p {
  color: var(--text-light);
}

body.dark-mode .lightbox-caption p {
  color: #d1d5db;
}

.lightbox-close,
.lightbox-arrow {
  position: fixed;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  cursor: pointer;
}

.lightbox-close {
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 2rem;
}

.lightbox-arrow {
  top: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
}

.lightbox-prev {
  left: 28px;
}

.lightbox-next {
  right: 28px;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1023.98px) {
  header .hamburger {
    display: flex;
  }

  .portfolio-info-grid,
  .partnership-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-timeline::before {
    left: 42px;
  }

  .timeline-entry {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .timeline-marker {
    position: relative;
    top: auto;
    grid-column: 1;
    width: 76px;
    min-height: 44px;
    padding: 8px;
    border-radius: 999px;
    font-size: 0.66rem;
    line-height: 1.12;
    text-align: center;
  }

  .timeline-entry:nth-child(odd) .timeline-card,
  .timeline-entry:nth-child(even) .timeline-card {
    grid-column: 2;
  }

  .youth-impact-layout {
    grid-template-columns: 1fr;
  }

  /* Five and three column strips are too narrow to read on a tablet: the
     logo tiles clip their names and the gallery cards lose their captions. */
  .partner-logo-strip,
  .community-partners {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .meetup-gallery-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .portfolio-hero {
    padding: 68px 0 40px;
  }

  .portfolio-hero-copy,
  .portfolio-hero-title,
  .portfolio-hero-lead,
  .portfolio-hero-text,
  .portfolio-hero-copy .flex {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
  }

  .portfolio-hero .container,
  .portfolio-hero .container > .grid {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    padding-left: 0;
    padding-right: 0;
  }

  .portfolio-stats-row,
  .portfolio-stat-strip,
  .partner-logo-strip,
  .community-partners {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portfolio-info-grid,
  .partnership-grid,
  .meetup-gallery-track,
  .youth-pillars {
    grid-template-columns: 1fr;
  }

  .portfolio-heading-row,
  .portfolio-cta-card,
  .youth-program-card {
    align-items: stretch;
    flex-direction: column;
  }

  .portfolio-heading-row {
    text-align: center;
  }

  .gallery-mode-toggle {
    align-self: center;
  }

  .meetup-gallery.is-slider {
    padding: 0 42px 42px;
  }

  .meetup-gallery.is-slider .slider-arrow {
    width: 38px;
    height: 38px;
  }

  .timeline-card {
    padding: 22px;
  }

  .timeline-thumb-strip,
  .youth-photo-grid {
    grid-template-columns: 1fr;
  }

  .lightbox-visual .portfolio-photo {
    min-height: 320px;
  }

  .lightbox-arrow {
    display: none;
  }
}

@media (max-width: 520px) {
  header .container {
    padding: 0 12px;
  }

  header nav {
    gap: 10px;
  }

  header .text-2xl {
    font-size: 1.45rem;
  }

  header .space-x-4 > :not([hidden]) ~ :not([hidden]) {
    margin-left: 0.45rem;
  }

  .dark-mode-toggle {
    padding: 6px 8px;
    font-size: 1rem;
  }

  .hamburger span {
    width: 22px;
  }

  .portfolio-hero-title {
    font-size: 2.2rem;
  }

  .portfolio-stats-row,
  .portfolio-stat-strip,
  .partner-logo-strip,
  .community-partners,
  .youth-stats {
    grid-template-columns: 1fr;
  }

  .portfolio-founder-card,
  .portfolio-cta-card {
    padding: 24px;
  }
}

li:has(a[href="portfolio.html"]) {
  display: none;
}
