/* responsive.css - Tailwind-equivalent classes implemented in pure CSS */

/* ---------- BASIC RESPONSIVE BREAKPOINTS ---------- */
@media (min-width: 768px) {
  .md\:text-right { text-align: right; }
  .md\:grid-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-flow-dense { grid-auto-flow: dense; }
  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:text-left { text-align: left; }
}

/* ---------- COLOR CLASSES ---------- */
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-gray-900 { color: #111827; }
.bg-slate-800 { background-color: #1e293b; }
.bg-slate-900 { background-color: #0f172a; }
.bg-slate-800\/50 { background-color: rgba(30,41,59,0.5); }
.bg-white\/10 { background-color: rgba(255,255,255,0.10); }
.bg-white\/20 { background-color: rgba(255,255,255,0.20); }

/* ---------- SPACING UTILITY CLASSES ---------- */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* ---------- PADDING & MARGINS ---------- */
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

/* ---------- BORDER RADIUS ---------- */
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* ---------- SHADOW CLASSES ---------- */
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.15); }
.shadow-xl { box-shadow: 0 15px 25px rgba(0,0,0,0.20); }
.shadow-2xl { box-shadow: 0 25px 50px rgba(0,0,0,0.25); }

/* ---------- FLEXBOX UTILITY CLASSES ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* ---------- GRID SYSTEM ---------- */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* ---------- TEXT SIZES ---------- */
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }

/* ---------- FONT WEIGHTS ---------- */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ---------- OPACITY CLASSES ---------- */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* ---------- WIDTH / HEIGHT ---------- */
.w-full { width: 100%; }
.h-auto { height: auto; }

/* ---------- CUSTOM RESPONSIVE FIXES FOR YOUR SITE ---------- */
/* Project card stacking on mobile */
.project-card { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 768px) {
  .project-card { flex-direction: row; }
  .project-card.reverse { flex-direction: row-reverse; }
}

/* Responsive images */
.responsive-img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Timeline center line hide on mobile */
@media (max-width: 768px) {
  .timeline-center-line { display: none; }
  .timeline-dot { display: none; }
}

/* Contact grid */
.contact-grid { display: grid; grid-template-columns: 2fr; gap: 1rem; }
@media (min-width: 640px) { .contact-grid { grid-template-columns: repeat(2, 2fr); } }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: repeat(2, 2fr); } }

/* Hero text scaling */
.hero-title { font-size: clamp(32px, 6vw, 72px); }
.hero-subtitle { font-size: clamp(20px, 4vw, 42px); }
.hero-caption { font-size: clamp(14px, 4vw, 18px); }


/* Newly added code for mobile & tablet compatibility*/

/* Sidebar full-screen on mobile */
@media (max-width: 1199px) {
  #header {
    width: 260px;
    left: -260px;
  }

  #header.header-show {
    left: 0;
  }
}

/* Generic responsive grid fix */
.responsive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 640px) {
  .responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .responsive-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}