/* grid.css — simple 1–5 column grid system */

/* ---- Config ---- */
:root{
  --grid-gap: 1rem;          /* default gap */
  --container-max: 1200px;   /* max width for .container */
}

/* ---- Layout wrappers ---- */
.container{
  width: min(100% - 2rem, var(--container-max));
  margin-inline: auto;
}

.flex{
  display: flex; 
}

.center{
  justify-content: center;
}

.grid{
  display: grid;
  gap: var(--grid-gap);
}

/* Grid layout for services */
.container {
  max-width: 1200px;
  margin: 0 auto;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.gap-20 {
  gap: 20px;
}

/* Card styling */
.card {
  border-radius: 12px;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
}
.btn-primary {
  background: #0077ff;
  color: white;
}
.btn-primary:hover {
  background: #005fcc;
}


/* ---- Fixed column counts ---- */
.cols-1{ grid-template-columns: 1fr; }
.cols-2{ grid-template-columns: repeat(2, 1fr); }
.cols-3{ grid-template-columns: repeat(3, 1fr); }
.cols-4{ grid-template-columns: repeat(4, 1fr); }
.cols-5{ grid-template-columns: repeat(5, 1fr); }

/* ---- Auto-fit utility (fills row with equal cards) ---- */
.cols-auto{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- Column span utilities (use inside .grid) ---- */
.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }

/* ---- Gap utilities ---- */
.gap-0 { gap: 0; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.gap-5 { gap: 3rem; }

/* ---- Responsive modifiers (mobile-first) ---- */
/* Small ≥576px */
@media (min-width: 576px){
  .sm-cols-1{ grid-template-columns: 1fr; }
  .sm-cols-2{ grid-template-columns: repeat(2, 1fr); }
  .sm-cols-3{ grid-template-columns: repeat(3, 1fr); }
  .sm-cols-4{ grid-template-columns: repeat(4, 1fr); }
  .sm-cols-5{ grid-template-columns: repeat(5, 1fr); }
}
/* Medium ≥768px */
@media (min-width: 768px){
  .md-cols-1{ grid-template-columns: 1fr; }
  .md-cols-2{ grid-template-columns: repeat(2, 1fr); }
  .md-cols-3{ grid-template-columns: repeat(3, 1fr); }
  .md-cols-4{ grid-template-columns: repeat(4, 1fr); }
  .md-cols-5{ grid-template-columns: repeat(5, 1fr); }
}
/* Large ≥992px */
@media (min-width: 992px){
  .lg-cols-1{ grid-template-columns: 1fr; }
  .lg-cols-2{ grid-template-columns: repeat(2, 1fr); }
  .lg-cols-3{ grid-template-columns: repeat(3, 1fr); }
  .lg-cols-4{ grid-template-columns: repeat(4, 1fr); }
  .lg-cols-5{ grid-template-columns: repeat(5, 1fr); }
}
/* XL ≥1200px */
@media (min-width: 1200px){
  .xl-cols-1{ grid-template-columns: 1fr; }
  .xl-cols-2{ grid-template-columns: repeat(2, 1fr); }
  .xl-cols-3{ grid-template-columns: repeat(3, 1fr); }
  .xl-cols-4{ grid-template-columns: repeat(4, 1fr); }
  .xl-cols-5{ grid-template-columns: repeat(5, 1fr); }
}

/* ---- Optional: demo card ---- */
.card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: .75rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.w-10{ width: 10%;}
.w-20{ width: 20%;}
.w-30{ width: 30%;}
.w-40{ width: 40%;}
.w-50{ width: 50%;}
.w-60{ width: 60%;}
.w-70{ width: 70%;}
.w-80{ width: 80%;}
.w-90{ width: 90%;}
.w-100{ width: 100%;}