/* Additional grid alignment styles */

/* General grid system - all elements aligned to 60px grid or 30px half-grid */
:root {
  --grid-base: 60px;
  --grid-half: 30px;
  --grid-quarter: 15px;
}

/* Project card improvements */
.project-card {
  padding: var(--grid-quarter);
  gap: var(--grid-quarter);
  margin-bottom: var(--grid-quarter);
}

.project-header {
  margin-bottom: var(--grid-quarter);
}

.project-actions {
  display: flex;
  gap: calc(var(--grid-quarter) / 2);
  margin-bottom: calc(var(--grid-quarter) / 2);
}

.project-description {
  margin-bottom: calc(var(--grid-quarter) / 2);
}

.project-description ul {
  margin-bottom: var(--grid-quarter);
}

.project-description li {
  line-height: calc(var(--grid-half) - 5px);
  margin-bottom: 5px;
}

.project-description p {
  line-height: calc(var(--grid-half) - 5px);
  margin-bottom: calc(var(--grid-quarter) / 2);
}

/* Project tags */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: calc(var(--grid-quarter) / 2);
}

.project-tag {
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
}

/* Experience section improvements */
.experience-company {
  margin-bottom: var(--grid-base);
}

.company-header {
  height: var(--grid-half);
  margin-bottom: var(--grid-half);
  display: flex;
  align-items: center;
}

.position-title {
  margin-bottom: var(--grid-half);
  line-height: var(--grid-half);
}

.position-details {
  margin-bottom: var(--grid-half);
}

/* Form alignment */
.form-group {
  margin-bottom: var(--grid-half);
}

.form-group label {
  height: var(--grid-quarter);
  line-height: var(--grid-quarter);
  margin-bottom: 10px;
}

.form-group input {
  height: var(--grid-half) !important;
}

/* Buttons alignment */
button, 
.resume-btn,
.submit-btn {
  height: 40px;
}

/* Footer alignment */
.footer-content {
  gap: var(--grid-half);
  margin-bottom: var(--grid-half);
}

.footer-brand {
  margin-bottom: var(--grid-half);
}

.footer-links {
  gap: var(--grid-half);
}

.footer-bottom {
  padding-top: var(--grid-half);
  gap: var(--grid-quarter);
}

/* Make lists align with grid */
ul, ol {
  margin-left: var(--grid-half);
}

li {
  line-height: 30px;
}