/* Styles for the About page. Uses shared colour variables and a dark theme.*/

/* Theme variables */
:root {
  --bg: #0f0f12;
  --surface: #15151a;
  --text: #f7f7f9;
  --muted: #cfcfd6;
  --border: #2a2a30;
  --pink: #ff4da6;
}

/* Base styles */
html, body { 
  margin: 0; 
  padding: 0; 
}

body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

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

/* Main container */
main { 
  max-width: 1000px; 
  margin: 0 auto; 
  padding: 60px 20px; 
}

h1 {
  margin: 0 0 40px;
  font-size: clamp(2rem, 4vw, 3rem);
  text-align: center;
  color: var(--text);
  font-weight: 600;
}

h2 {
  margin: 0 0 30px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--text);
  text-align: center;
  font-weight: 500;
}

h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: var(--text);
  font-weight: 600;
}

p { 
  color: var(--muted); 
  line-height: 1.7;
  margin: 0 0 20px;
}

/* Section spacing */
section {
  margin-bottom: 80px;
}

/* About Introduction Section */
.about-intro {
  text-align: center;
  padding: 50px 30px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 60px;
}

.intro-text, .mission-text {
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 600px;
  margin: 0 auto 20px;
}

.mission-text {
  margin-bottom: 0;
  color: var(--pink);
  font-weight: 500;
}

/* Preparing with Love Section */
.love-section {
  text-align: center;
  padding: 50px 30px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-bottom: 60px;
}

.love-content p {
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 500px;
  margin: 0 auto;
}

/* Team Section */
.team-section {
  margin: 60px 0;
}

.team-intro {
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.1rem);
  max-width: 500px;
  margin: 0 auto 50px;
}

/* Team Gallery - Clean grid layout */
/* Grid shows three columns on desktop and reduces on smaller devices. */
.team-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.responsive {
  display: block;
  width: 100%;
  margin: 0;
}

.gallery {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.gallery img { 
  height: 250px; 
  width: 100%; 
  object-fit: cover;
}

.desc { 
  padding: 25px 20px;
  text-align: center;
}

.role {
  color: var(--pink);
  font-weight: 600;
  margin: 8px 0 15px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.desc p:last-child {
  margin-bottom: 0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.clearfix { 
  clear: both; 
}

/* Responsive Design */
/* Tablet adjustments: reduce columns and spacing for comfortable reading. */
@media (max-width: 900px) {
  .team-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}

@media (max-width: 600px) {
  /* Phone layout: single column grid and tighter spacing. */
  main {
    padding: 40px 16px;
  }
  
  .about-intro, .love-section {
    padding: 40px 20px;
    margin-bottom: 50px;
  }
  
  .team-gallery {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .gallery img {
    height: 220px;
  }
  
  .desc {
    padding: 20px 16px;
  }
  
  section {
    margin-bottom: 60px;
  }
}