/* ==========================================================================
   GP Grid System
   Large    >1632px   : 12 colunas · max-width 1440px · gutter 24px (centralizado)
   Desktop  1200–1632px : 12 colunas · margin 96px  · gutter 24px
   Tablet   441–1199px : 12 colunas · margin 48px  · gutter 24px
   Mobile   ≤440px   : 8  colunas · margin 16px  · gutter 16px

   Arquitetura:
   .gp-row   = container + flex row  (padding = margin - half-gutter)
   .gp-col-N = coluna flexível       (padding = half-gutter em cada lado)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Row — container + flex row · Mobile base (≤440px)
   margin 16px · gutter 16px (half = 8px) → padding = 16 - 8 = 8px
   -------------------------------------------------------------------------- */
.gp-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
}


/* --------------------------------------------------------------------------
   Columns — base / Mobile (≤440px · gutter 16px · half = 8px)
   Todas as colunas empilham em 100% no mobile por padrão
   -------------------------------------------------------------------------- */
[class*="gp-col-"] {
  box-sizing: border-box;
  padding-left: 8px;
  padding-right: 8px;
  width: 100%;
}

.gp-col-1,
.gp-col-2,
.gp-col-3,
.gp-col-4,
.gp-col-5,
.gp-col-6,
.gp-col-7,
.gp-col-8,
.gp-col-9,
.gp-col-10,
.gp-col-11,
.gp-col-12 { width: 100%; }

/* Offsets zerados no mobile */
.gp-offset-1,
.gp-offset-2,
.gp-offset-3,
.gp-offset-4,
.gp-offset-5,
.gp-offset-6,
.gp-offset-7,
.gp-offset-8,
.gp-offset-9,
.gp-offset-10,
.gp-offset-11 { margin-left: 0; }


/* --------------------------------------------------------------------------
   Visibility helpers — Mobile
   -------------------------------------------------------------------------- */
.gp-show-mobile  { display: inherit !important; }
.gp-show-tablet  { display: none    !important; }
.gp-show-desktop { display: none    !important; }

.gp-hide-mobile  { display: none    !important; }
.gp-hide-tablet  { display: inherit !important; }
.gp-hide-desktop { display: inherit !important; }

/* Compatibilidade retroativa — classes Amazium ainda em uso */
.show-phone   { display: inherit !important; }
.hide-phone   { display: none    !important; }
.show-screen  { display: none    !important; }
.hide-screen  { display: inherit !important; }
.show-tablet  { display: none    !important; }
.hide-tablet  { display: inherit !important; }


/* ==========================================================================
   Tablet — 441px a 1199px · 12 colunas · margin 48px · gutter 24px
   padding = 48 - 12 = 36px
   ========================================================================== */
@media only screen and (min-width: 441px) and (max-width: 1199px) {

  .gp-row {
    padding-left: 36px;
    padding-right: 36px;
  }

  [class*="gp-col-"] {
    padding-left: 12px;
    padding-right: 12px;
  }

  .gp-col-1  { width: 8.3333%;  }
  .gp-col-2  { width: 16.6667%; }
  .gp-col-3  { width: 25%;      }
  .gp-col-4  { width: 33.3333%; }
  .gp-col-5  { width: 41.6667%; }
  .gp-col-6  { width: 50%;      }
  .gp-col-7  { width: 58.3333%; }
  .gp-col-8  { width: 66.6667%; }
  .gp-col-9  { width: 75%;      }
  .gp-col-10 { width: 83.3333%; }
  .gp-col-11 { width: 91.6667%; }
  .gp-col-12 { width: 100%;     }

  .gp-offset-1  { margin-left: 8.3333%;  }
  .gp-offset-2  { margin-left: 16.6667%; }
  .gp-offset-3  { margin-left: 25%;      }
  .gp-offset-4  { margin-left: 33.3333%; }
  .gp-offset-5  { margin-left: 41.6667%; }
  .gp-offset-6  { margin-left: 50%;      }
  .gp-offset-7  { margin-left: 58.3333%; }
  .gp-offset-8  { margin-left: 66.6667%; }
  .gp-offset-9  { margin-left: 75%;      }
  .gp-offset-10 { margin-left: 83.3333%; }
  .gp-offset-11 { margin-left: 91.6667%; }

  .gp-show-mobile  { display: none    !important; }
  .gp-show-tablet  { display: inherit !important; }
  .gp-show-desktop { display: none    !important; }

  .gp-hide-mobile  { display: inherit !important; }
  .gp-hide-tablet  { display: none    !important; }
  .gp-hide-desktop { display: inherit !important; }

  /* Compatibilidade retroativa — Tablet */
  .show-phone   { display: none    !important; }
  .hide-phone   { display: inherit !important; }
  .show-screen  { display: none    !important; }
  .hide-screen  { display: inherit !important; }
  .show-tablet  { display: inherit !important; }
  .hide-tablet  { display: none    !important; }

}


/* ==========================================================================
   Desktop — ≥1200px · 12 colunas · margin 96px · gutter 24px
   padding = 96 - 12 = 84px
   ========================================================================== */
@media only screen and (min-width: 1200px) {

  .gp-row {
    padding-left: 84px;
    padding-right: 84px;
  }

  [class*="gp-col-"] {
    padding-left: 12px;
    padding-right: 12px;
  }

  .gp-col-1  { width: 8.3333%;  }
  .gp-col-2  { width: 16.6667%; }
  .gp-col-3  { width: 25%;      }
  .gp-col-4  { width: 33.3333%; }
  .gp-col-5  { width: 41.6667%; }
  .gp-col-6  { width: 50%;      }
  .gp-col-7  { width: 58.3333%; }
  .gp-col-8  { width: 66.6667%; }
  .gp-col-9  { width: 75%;      }
  .gp-col-10 { width: 83.3333%; }
  .gp-col-11 { width: 91.6667%; }
  .gp-col-12 { width: 100%;     }

  .gp-offset-1  { margin-left: 8.3333%;  }
  .gp-offset-2  { margin-left: 16.6667%; }
  .gp-offset-3  { margin-left: 25%;      }
  .gp-offset-4  { margin-left: 33.3333%; }
  .gp-offset-5  { margin-left: 41.6667%; }
  .gp-offset-6  { margin-left: 50%;      }
  .gp-offset-7  { margin-left: 58.3333%; }
  .gp-offset-8  { margin-left: 66.6667%; }
  .gp-offset-9  { margin-left: 75%;      }
  .gp-offset-10 { margin-left: 83.3333%; }
  .gp-offset-11 { margin-left: 91.6667%; }

  .gp-show-mobile  { display: none    !important; }
  .gp-show-tablet  { display: none    !important; }
  .gp-show-desktop { display: inherit !important; }

  .gp-hide-mobile  { display: inherit !important; }
  .gp-hide-tablet  { display: inherit !important; }
  .gp-hide-desktop { display: none    !important; }

  /* Compatibilidade retroativa — Desktop */
  .show-phone   { display: none    !important; }
  .hide-phone   { display: inherit !important; }
  .show-screen  { display: inherit !important; }
  .hide-screen  { display: none    !important; }
  .show-tablet  { display: none    !important; }
  .hide-tablet  { display: inherit !important; }

}


/* ==========================================================================
   Large — >1632px · 12 colunas · max-width 1440px · gutter 24px
   Row fixo em 1440px centralizado, sem margin lateral, só gutter.
   Header e section-perfil seguem a mesma largura máxima.
   ========================================================================== */
@media only screen and (min-width: 1633px) {

  .gp-row {
    max-width: 1440px;
    padding-left: 12px;              /* Apenas half-gutter, sem margin */
    padding-right: 12px;
  }

  /* Section perfil alinhada ao grid */
  .section-perfil {
    padding-left: 0;
    padding-right: 0;
  }

  .section-perfil > * {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

}