/* css/layout.css */
/* Section & grid layouts, containers, and spacing */

/* ====== SECTION BASE ====== */
.section {
  padding: var(--space-3xl) 0;
  width: 100%;
}

/* Hero takes full viewport height */
#home.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: 0;
  position: relative;
  overflow: hidden;
}

.hero-content {
  text-align: center;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  position: relative;
  z-index: 2;
}

.hero-bg-accent {
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0.08;
  border-radius: 50%;
  pointer-events: none;
}

/* ====== ABOUT SECTION ====== */
.about-card {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* ====== SKILLS GRID ====== */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* ====== PROJECTS GRID ====== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* ====== TEAM GRID ====== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* ====== CONTACT LAYOUT ====== */
.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.contact-form {
  flex: 1 1 350px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.contact-info {
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}

/* ====== FOOTER ====== */
.footer {
  padding: var(--space-xl) 0;
  border-top: 1px solid var(--surface);
  text-align: center;
}

/* Section titles alignment */
.section-title {
  text-align: center;
  margin-bottom: var(--space-md);
}