/* ==========================================================================
   LAYOUT.CSS -- Shubhdeep Metier
   Container | Grid | Flexbox | Section | Spacing
   ========================================================================== */

/* --- Container --- */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }
.container--narrow { max-width: 860px; margin-inline: auto; padding-inline: var(--container-px); }
.container--wide { max-width: 1600px; margin-inline: auto; padding-inline: var(--container-px); }

/* --- Grid (mobile-first: 1 col) --- */
.grid { display: grid; gap: var(--grid-gap); }
.grid--2 { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
.grid--3 { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
.grid--4 { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
.grid--auto-fit { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

@media (min-width: 480px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Flexbox --- */
.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--column { display: flex; flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.flex--gap { gap: var(--grid-gap); }

/* --- Section Base --- */
.section { padding-block: var(--section-py); }
.section--sm { padding-block: var(--section-py-sm); }
.section--lg { padding-block: var(--section-py-lg); }
.section--ivory { background-color: var(--color-bg-main); }
.section--surface { background-color: var(--color-bg-surface); }
.section--espresso { background-color: var(--color-text-primary); color: var(--color-bg-main); }
.section--espresso h1,.section--espresso h2,.section--espresso h3,.section--espresso h4 { color: var(--color-bg-main); }

/* --- Dividers --- */
.divider { display: block; width: 100%; height: 1px; background-color: var(--color-border); border: none; }
.accent-line { display: block; width: 40px; height: 1.5px; background-color: var(--color-gold); flex-shrink: 0; }
.accent-line--lg { width: 72px; }
.accent-line--center { margin-inline: auto; }

/* --- Spacing Utilities --- */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-inline: auto; }

/* --- Text Alignment --- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* --- Visibility --- */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; min-height: 100dvh; }

.hide-on-mobile { display: none; }
@media (min-width: 768px) { .hide-on-mobile { display: revert; } .hide-on-tablet { display: none; } }
@media (min-width: 1024px) { .hide-on-tablet { display: revert; } }

/* --- Scroll Top Button --- */
.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  z-index: var(--z-raised);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}
.scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { background: var(--color-clay); color: white; border-color: var(--color-clay); }