/* ============================================================
   AMAZONITA CREATIVA — LAYOUT
   ============================================================ */

/* --- RESET & BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }

/* --- SITE ROOT --- */
#site-root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#site-main {
  flex: 1;
}

/* --- CONTAINER --- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--2xl { max-width: var(--container-2xl); }
.container--full { max-width: 100%; }

/* --- SECTION SPACING --- */
.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-32));
  position: relative;
}

.section--sm  { padding-block: clamp(var(--space-10), 5vw, var(--space-20)); }
.section--lg  { padding-block: clamp(var(--space-20), 12vw, var(--space-40)); }

/* --- GRID SYSTEM --- */
.grid { display: grid; }
.grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-6); }
.grid--auto-md { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-8); }

/* --- FLEX UTILITIES --- */
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--col { flex-direction: column; }
.flex--gap-4 { gap: var(--space-4); }
.flex--gap-6 { gap: var(--space-6); }
.flex--gap-8 { gap: var(--space-8); }

/* --- SECTION HEADER --- */
.section-header {
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.section-header--center {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

/* --- DIVIDERS --- */
.divider {
  width: 100%;
  height: 1px;
  background: var(--clr-border);
}

/* --- NOISE TEXTURE OVERLAY --- */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* Tablet */
@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hide-tablet { display: none !important; }
}

/* Mobile */
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--auto-sm, .grid--auto-md { grid-template-columns: 1fr; }
  .hide-mobile { display: none !important; }
  .section { padding-block: var(--space-12); }
}