/* =========================
   CORE LAYOUT
========================= */

.page-shell {
  width: min(100% - 2rem, var(--page-width));
  margin: 0 auto;
}

.page-shell.home-shell {
  display: block;
}

/* =========================
   GRID SYSTEM
========================= */

.page-grid {
  display: grid;
  gap: 40px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* =========================
   SECTION SPACING
========================= */

.section-spacing {
  padding: 100px 0;
}

.section-spacing-sm {
  padding: 60px 0;
}

/* =========================
   HERO LAYOUT
========================= */

.hero-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* =========================
   SPLIT LAYOUT
========================= */

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* =========================
   CARD GRID SYSTEM
========================= */

.cards-grid {
  display: grid;
  gap: 24px;
}

.cards-2 {
  grid-template-columns: repeat(2, 1fr);
}

.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cards-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* =========================
   FLEX UTILITIES
========================= */

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-sm { gap: 12px; }
.gap-md { gap: 20px; }
.gap-lg { gap: 40px; }

/* =========================
   ALIGNMENT
========================= */

.text-center {
  text-align: center;
}

.align-center {
  align-items: center;
}

/* =========================
   WIDTH CONTROL
========================= */

.max-600 {
  max-width: 600px;
}

.max-500 {
  max-width: 500px;
}

/* =========================
   HERO IMAGE CONTROL
========================= */

.hero-image-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.hero-image-wrap img {
  max-width: 420px;
}

/* =========================
   CTA BAND ALIGNMENT
========================= */

.cta-center {
  text-align: center;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {

  .hero-layout,
  .split-layout,
  .grid-2,
  .grid-3,
  .grid-4,
  .cards-2,
  .cards-3,
  .cards-4 {
    grid-template-columns: 1fr;
  }

  .hero-image-wrap {
    justify-content: center;
    margin-top: 40px;
  }

}

/* =========================
   INTERACTION
========================= */

@media (hover: hover) {

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  }

  .button:hover {
    transform: translateY(-2px);
  }

}