/* ============================================================
   WEGEMS STUDIO — layout.css
   Containers, section padding, grids, spacers, max-width
   helpers, and alignment/visibility utilities.
   ============================================================ */


/* --- Containers (always pair with .padding-global) --- */

.container {
  width: 100%;
  max-width: var(--container-width);   /* 1294px */
  margin-left: auto;
  margin-right: auto;
}

.container-large {
  width: 100%;
  max-width: var(--container-large-width);
  margin-left: auto;
  margin-right: auto;
}

.container-medium {
  max-width: 60rem; /* 960px */
  margin-left: auto;
  margin-right: auto;
}

.container-small {
  max-width: 45rem; /* 720px */
  margin-left: auto;
  margin-right: auto;
}


/* --- Global Horizontal Padding --- */

.padding-global {
  padding-left: 2rem;
  padding-right: 2rem;
}


/* --- Section Padding --- */

.section-padding {
  /* Base class — no padding by default; use a modifier. */
}

.section-padding.is-large {
  padding-top: var(--space-120);    /* 120px */
  padding-bottom: var(--space-120); /* 120px */
}

.section-padding.is-medium {
  padding-top: var(--space-80);     /* 80px */
  padding-bottom: var(--space-80);  /* 80px */
}

.section-padding.is-small {
  padding-top: var(--space-48);     /* 48px */
  padding-bottom: var(--space-48);  /* 48px */
}


/* --- Title Gap --- */

.title-gap {
  margin-bottom: var(--title-gap); /* 64px */
}


/* --- Grid Layouts --- */

.grid-2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

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

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


/* --- Spacers --- */

.spacer-8   { height: var(--space-8); }    /*   8px */
.spacer-16  { height: var(--space-16); }   /*  16px */
.spacer-24  { height: var(--space-24); }   /*  24px */
.spacer-32  { height: var(--space-32); }   /*  32px */
.spacer-40  { height: var(--space-40); }   /*  40px */
.spacer-48  { height: var(--space-48); }   /*  48px */
.spacer-64  { height: var(--space-64); }   /*  64px */
.spacer-80  { height: var(--space-80); }   /*  80px */
.spacer-120 { height: var(--space-120); }  /* 120px */


/* --- Max Width Helpers --- */

.max-width-large {
  max-width: 50rem; /* 800px */
}

.max-width-medium {
  max-width: 40rem; /* 640px */
}

.max-width-small {
  max-width: 30rem; /* 480px */
}


/* --- Alignment Utilities --- */

.align-center {
  margin-left: auto;
  margin-right: auto;
}

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

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

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


/* --- Opacity Utilities --- */

.opacity-100 { opacity: 1; }
.opacity-70  { opacity: 0.7; }
.opacity-50  { opacity: 0.5; }


/* --- Visibility --- */

.hide {
  display: none;
}

/* --- Padding Override --- */

.padding-top-0 {
  padding-top: 0 !important;
  /* Override: section intentionally has no top padding */
}

.padding-bottom-0 {
  padding-bottom: 0 !important;
  /* Override: section intentionally has no bottom padding */
}


/* Max width utility */
.max-width-60 {
  max-width: 40%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .max-width-60 {
    max-width: 80%;
  }
}

@media (max-width: 767px) {
  .max-width-60 {
    max-width: 100%;
  }
}


/* --- Responsive — Tablet (991px) --- */

@media (max-width: 991px) {
  .grid-2-col {
    grid-template-columns: 1fr;
  }
}