/* ==========================================================================
   Nice PageBuilder — Grid System
   nice__gridRow responsive system
   ========================================================================== */

/* ── Design Tokens ──────────────────────────────────────────────────────── */
/*
 * Override these in your theme's CSS or via :root to customise the builder
 * system-wide without touching any component styles.
 */
:root {
  /* Layout */
  --nice-container: 1200px;
  --nice-gutter: 30px;
  /* side padding inside container */
  --nice-gap: 30px;
  /* default grid gap */

  /* Section vertical rhythm */
  --nice-section-hero: 100px;
  /* full-page hero sections */
  --nice-section-xl: 100px;
  --nice-section-lg: 80px;
  /* standard content sections */
  --nice-section-md: 60px;
  /* compact sections */
  --nice-section-sm: 40px;
  --nice-section-xs: 24px;

  /* Typography scale (px) */
  --nice-font-h1: 48px;
  --nice-font-h2: 36px;
  --nice-font-h3: 28px;
  --nice-font-h4: 22px;
  --nice-font-h5: 18px;
  --nice-font-h6: 16px;
  --nice-font-body: 16px;
  --nice-font-sm: 14px;

  /* Line heights */
  --nice-lh-heading: 1.15;
  --nice-lh-body: 1.7;

  /* Border radius */
  --nice-radius-sm: 6px;
  --nice-radius-md: 12px;
  --nice-radius-lg: 20px;
  --nice-radius-pill: 50px;

  /* Shadows */
  --nice-shadow-sm: 0 1px 4px rgba(0, 0, 0, .08);
  --nice-shadow-md: 0 4px 16px rgba(0, 0, 0, .1);
  --nice-shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.nice__container {
  width: 100%;
  max-width: var(--nice-container);
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--nice-gutter);
  padding-left: var(--nice-gutter);
}

.nice__container--fluid {
  max-width: 100%;
}

/* ── Grid Row ───────────────────────────────────────────────────────────── */
.nice__gridRow {
  display: grid;
  gap: var(--nice-gap);
  width: 100%;
}

/* ── Column counts ──────────────────────────────────────────────────────── */
.nice__gridRow--cols-1 {
  grid-template-columns: 1fr;
}

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

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

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

.nice__gridRow--cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.nice__gridRow--cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

/* ── Gap modifiers ──────────────────────────────────────────────────────── */
.nice__gridRow.gap-0 {
  gap: 0;
}

.nice__gridRow.gap-10 {
  gap: 10px;
}

.nice__gridRow.gap-20 {
  gap: 20px;
}

.nice__gridRow.gap-30 {
  gap: 30px;
}

.nice__gridRow.gap-40 {
  gap: 40px;
}

.nice__gridRow.gap-60 {
  gap: 60px;
}

/* ── Column span helpers ────────────────────────────────────────────────── */
.nice__col--span-1 {
  grid-column: span 1;
}

.nice__col--span-2 {
  grid-column: span 2;
}

.nice__col--span-3 {
  grid-column: span 3;
}

.nice__col--span-4 {
  grid-column: span 4;
}

.nice__col--span-5 {
  grid-column: span 5;
}

.nice__col--span-6 {
  grid-column: span 6;
}

.nice__col--span-full {
  grid-column: 1 / -1;
}

/* ── Alignment helpers ──────────────────────────────────────────────────── */
.nice__gridRow--align-start {
  align-items: start;
}

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

.nice__gridRow--align-end {
  align-items: end;
}

.nice__gridRow--align-stretch {
  align-items: stretch;
}

.nice__gridRow--justify-start {
  justify-items: start;
}

.nice__gridRow--justify-center {
  justify-items: center;
}

.nice__gridRow--justify-end {
  justify-items: end;
}

.nice__gridRow--justify-stretch {
  justify-items: stretch;
}

/* ── Section wrapper ────────────────────────────────────────────────────── */
.nice__section {
  position: relative;
  width: 100%;
}

.nice__section--full-width {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  max-width: 100vw !important;
}

/* Grid row inside a full-width section can opt back into a container */
.nice__section--full-width .nice__gridRow--contained {
  max-width: var(--nice-container, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--nice-gutter, 30px);
  padding-right: var(--nice-gutter, 30px);
  width: 100%;
}

/* ── Typography scale — Font size classes ───────────────────────────────── */
/*
  Usage: <h2 class="f-32">Título</h2>
*/
.f-12 {
  font-size: 12px !important;
}

.f-14 {
  font-size: 14px !important;
}

.f-16 {
  font-size: 16px !important;
}

.f-18 {
  font-size: 18px !important;
}

.f-20 {
  font-size: 20px !important;
}

.f-24 {
  font-size: 24px !important;
}

.f-28 {
  font-size: 28px !important;
}

.f-32 {
  font-size: 32px !important;
}

.f-40 {
  font-size: 40px !important;
}

.f-48 {
  font-size: 48px !important;
}

.f-56 {
  font-size: 56px !important;
}

.f-64 {
  font-size: 64px !important;
}

.f-70 {
  font-size: 70px !important;
}

.f-80 {
  font-size: 80px !important;
}

.f-90 {
  font-size: 90px !important;
}

/* ── Responsive: Tablet (≤ 900px) ──────────────────────────────────────── */
@media (max-width: 900px) {

  .nice__gridRow--cols-4,
  .nice__gridRow--cols-5,
  .nice__gridRow--cols-6 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .nice__gridRow--cols-3[style*="grid-template-columns"],
  .nice__gridRow--cols-4[style*="grid-template-columns"],
  .nice__gridRow--cols-5[style*="grid-template-columns"],
  .nice__gridRow--cols-6[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .f-70 {
    font-size: 52px !important;
  }

  .f-80 {
    font-size: 60px !important;
  }

  .f-90 {
    font-size: 64px !important;
  }
}

/* ── Responsive: Mobile (≤ 600px) ──────────────────────────────────────── */
@media (max-width: 600px) {

  .nice__gridRow--cols-2,
  .nice__gridRow--cols-3,
  .nice__gridRow--cols-4,
  .nice__gridRow--cols-5,
  .nice__gridRow--cols-6 {
    grid-template-columns: 1fr;
  }

  .nice__gridRow--cols-2[style*="grid-template-columns"],
  .nice__gridRow--cols-3[style*="grid-template-columns"],
  .nice__gridRow--cols-4[style*="grid-template-columns"],
  .nice__gridRow--cols-5[style*="grid-template-columns"],
  .nice__gridRow--cols-6[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  :root {
    --nice-gutter: 16px;
  }

  .f-48 {
    font-size: 36px !important;
  }

  .f-56 {
    font-size: 40px !important;
  }

  .f-64 {
    font-size: 44px !important;
  }

  .f-70 {
    font-size: 40px !important;
  }

  .f-80 {
    font-size: 44px !important;
  }

  .f-90 {
    font-size: 48px !important;
  }
}

/* ── Equal-height columns ───────────────────────────────────────────────── */
.nice__gridRow--equal-height {
  align-items: stretch;
}

.nice__gridRow--equal-height>div {
  display: flex;
  flex-direction: column;
}