/* ==========================================================================
   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);
  }
  .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;
  }
  :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; }