/* =========================================================
   base.css — reset + tokens + tipografia (Hanken Grotesk)
   Tema: gabricelo-portfolio
========================================================= */

/* ---------- FONT: Hanken Grotesk (Variable) ---------- */
/* Coloque os arquivos aqui:
   /assets/fonts/HankenGrotesk-VariableFont_wght.ttf
   /assets/fonts/HankenGrotesk-Italic-VariableFont_wght.ttf
*/

@font-face{
  font-family: "HankenGrotesk";
  src: url("../fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "HankenGrotesk";
  src: url("../fonts/HankenGrotesk-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- TOKENS (cores / tipografia) ---------- */
:root{
  /* Cores */
  --bg: #F8F8F8;
  --surface: #F8F8F8;
  --surface-2: #F1F1F1;

  --text: #7700FF;
  --muted: rgba(119,0,255,.75);

  --accent: #7700FF;
  --accent-ink: #F8F8F8;

  /* Tipografia */
  --font-ui: "HankenGrotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "HankenGrotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-text: "HankenGrotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Pesos */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;

  /* Trackings */
  --track-ui: 0.01em;
  --track-tight: -0.02em;

  /* Bordas */
  --border: rgba(119,0,255,.22);

  /* Radius */
  --radius-pill: 999px;
}

/* ---------- RESET BÁSICO ---------- */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: var(--w-regular);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas{
  display: block;
  max-width: 100%;
  height: auto;
}

a{
  color: inherit;
  text-decoration: none;
}

button, input, textarea, select{
  font: inherit;
  color: inherit;
}

::selection{
  background: var(--text);
  color: var(--bg);
}

/* ---------- TIPOGRAFIA PADRÃO (site inteiro) ---------- */
h1, h2, h3, h4, h5, h6{
  font-family: var(--font-display);
  font-weight: 650;              /* variável -> ótimo no Hanken */
  letter-spacing: var(--track-tight);
  margin: 0 0 0.5em 0;
}

p{
  margin: 0 0 1em 0;
  line-height: 1.75;
}

small{
  font-size: 0.85em;
  opacity: .85;
}

/* ---------- UTILITÁRIOS OPCIONAIS ---------- */
.container{
  width: min(1200px, 100%);
  padding: 0 24px;
  margin: 0 auto;
}

.muted{ color: var(--muted); }
.accent{ color: var(--accent); }

.pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--text);
  background: transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.btn:hover{
  background: var(--text);
  color: var(--bg);
}

.hr{
  height: 1px;
  background: var(--border);
  width: 100%;
}

/* =========================================================
   SINGLE PROJETOS — FINAL FIX
========================================================= */

body.single-projetos{
  overflow: hidden !important;
  background:#F8F8F8;
  color:#7700FF;
}

/* remove QUALQUER header/footer do tema (fica só o gp header) */
body.single-projetos .site,
body.single-projetos .wp-site-blocks{
  min-height: 100vh;
}

/* header do tema (qualquer variação comum) */
body.single-projetos header.site-header,
body.single-projetos #masthead,
body.single-projetos .site-header,
body.single-projetos .wp-block-template-part.header,
body.single-projetos .wp-site-blocks > header,
body.single-projetos #page > header,
body.single-projetos .site > header,
body.single-projetos .wp-site-blocks header:not(.gp-project__header){
  display:none !important;
}

/* footer do tema (qualquer variação comum) */
body.single-projetos footer,
body.single-projetos .site-footer,
body.single-projetos #colophon,
body.single-projetos .wp-block-template-part.footer,
body.single-projetos .wp-site-blocks > footer,
body.single-projetos #page > footer,
body.single-projetos .site > footer,
body.single-projetos .wp-site-blocks footer{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* layout base */
.gp-project{
  height:100vh;
  display:flex;
  flex-direction:column;
}



body.admin-bar .gp-project__header{ top:32px; }

.gp-project__brand{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-size:16px;
}
.gp-project__brand-link{ color:#7700FF; text-decoration:none; font-weight:600; }
.gp-project__brand-sep,
.gp-project__tagline{ color:#7700FF; }

.gp-project__back{
  border:1px solid #7700FF;
  background:transparent;
  color:#7700FF;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
}

.gp-project__main{
  height: calc(100vh - 50px);
  display:flex;
}

/* split 28/72 */
.gp-project__text{
  width:28%;
  padding:34px;
  border-right:1px solid #7700FF;
  overflow-y:auto;
}

.gp-project__gallery{
  width:72%;
  overflow-y:auto;
  background:#F8F8F8;
}
.gp-project__gallery-inner{ padding:0; }

/* Tipos */
.gp-pill{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:#7700FF;
  color:#F8F8F8;
  font-size:14px;
  line-height:1;
  margin-bottom:18px;
}
.gp-title{
  margin:0 0 14px 0;
  font-size:56px;
  line-height:1.02;
  font-weight:800;
  color:#7700FF;
}
.gp-meta{
  font-size:18px;
  font-weight:600;
  margin-bottom:18px;
  color:#7700FF;
}
.gp-desc{
  font-size:16px;
  line-height:1.75;
  color:#7700FF;
  margin-bottom:26px;
}

/* Coautoria */
.gp-credits__title{
  font-size:18px;
  font-weight:800;
  margin-bottom:10px;
  color:#7700FF;
}
.gp-credits__name{
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  color:#7700FF;
}

/* capa + gap pequeno e consistente */
.gp-cover{ margin:0 0 12px 0; }
.gp-cover__img{
  width:100%;
  height:auto;
  display:block;
  border:0 !important;
}

/* Gutenberg gallery */
.gp-project__gallery .wp-block-gallery{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.gp-project__gallery .wp-block-image{ margin:0 !important; }
.gp-project__gallery .wp-block-image img{
  width:100%;
  height:auto;
  display:block;
  border:0 !important;
}

/* Shortcode [gallery] */
.gp-project__gallery .gallery{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.gp-project__gallery .gallery-item{
  width:100% !important;
  margin:0 0 12px 0 !important;
  float:none !important;
}
.gp-project__gallery .gallery-item:last-child{ margin-bottom:0 !important; }
.gp-project__gallery .gallery-icon img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border:0 !important;
}

/* =========================================================
   SCROLLBAR ROXA (texto + galeria)
   - Thumb roxo, track transparente (sem cinza)
========================================================= */

/* Firefox */
.gp-project__text,
.gp-project__gallery{
  scrollbar-color: #7700FF transparent;
  scrollbar-width: thin;
}

/* Webkit (Chrome/Edge/Safari) */
.gp-project__text::-webkit-scrollbar,
.gp-project__gallery::-webkit-scrollbar{
  width: 10px;
}
.gp-project__text::-webkit-scrollbar-track,
.gp-project__gallery::-webkit-scrollbar-track{
  background: transparent;
}
.gp-project__text::-webkit-scrollbar-thumb,
.gp-project__gallery::-webkit-scrollbar-thumb{
  background: #7700FF;
  border-radius: 999px;
  border: 2px solid transparent; /* evita aparência cinza */
  background-clip: padding-box;
}

/* responsivo */
@media (max-width: 980px){
  body.single-projetos{ overflow:auto !important; }
  .gp-project__main{ height:auto; flex-direction:column; }
  .gp-project__text{
    width:100%;
    border-right:0;
    border-bottom:1px solid #7700FF;
  }
  .gp-project__gallery{ width:100%; overflow:visible; }
}

/* =========================
   SINGLE PROJETOS - FINAL
========================= */
body.single-projetos,
body.single-projeto{
  overflow: hidden !important;
  background:#F8F8F8;
  color:#7700FF;
}

/* Layout */
.gp-project{
  height:100vh;
  display:flex;
  flex-direction:column;
}


.gp-project__brand{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-size:16px;
}
.gp-project__brand-link{ color:#7700FF; text-decoration:none; font-weight:600; }
.gp-project__brand-sep,
.gp-project__tagline{ color:#7700FF; }

.gp-project__back{
  border:1px solid #7700FF;
  background:transparent;
  color:#7700FF;
  padding:10px 16px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
  line-height:1;
}

.gp-project__main{
  height: calc(100vh - 50px);
  display:flex;
}

.gp-project__text{
  width:28%;
  padding:34px;
  border-right:1px solid #7700FF;
  overflow-y:auto;
}

.gp-project__gallery{
  width:72%;
  overflow-y:auto;
  background:#F8F8F8;
}
.gp-project__gallery-inner{ padding:0; }

/* Tipos */
.gp-pill{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:#7700FF;
  color:#F8F8F8;
  font-size:14px;
  line-height:1;
  margin-bottom:18px;
}
.gp-title{
  margin:0 0 14px 0;
  font-size:56px;
  line-height:1.02;
  font-weight:800;
  color:#7700FF;
}
.gp-meta{
  font-size:18px;
  font-weight:600;
  margin-bottom:18px;
  color:#7700FF;
}
.gp-desc{
  font-size:16px;
  line-height:1.75;
  color:#7700FF;
  margin-bottom:26px;
}
.gp-desc p{ margin:0 0 14px 0; }

.gp-credits__title{
  font-size:18px;
  font-weight:800;
  margin-bottom:10px;
  color:#7700FF;
}
.gp-credits__name{
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  color:#7700FF;
}

/* Galeria ocupa 100% */
.gp-cover{ margin:0 0 12px 0; }
.gp-cover__img{
  width:100%;
  height:auto;
  display:block;
  border:0 !important;
}

/* WP Block Gallery */
.gp-project__gallery .wp-block-gallery{
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.gp-project__gallery .wp-block-image{ margin:0 !important; }
.gp-project__gallery .wp-block-image img{
  width:100%;
  height:auto;
  display:block;
  border:0 !important;
}

/* Shortcode [gallery] */
.gp-project__gallery .gallery{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
.gp-project__gallery .gallery-item{
  width:100% !important;
  margin:0 0 12px 0 !important;
  float:none !important;
}
.gp-project__gallery .gallery-item:last-child{ margin-bottom:0 !important; }
.gp-project__gallery .gallery-icon img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border:0 !important;
}

/* Scrollbar ROXA (texto + galeria) */
.gp-project__text,
.gp-project__gallery{
  scrollbar-color:#7700FF transparent;
  scrollbar-width:thin;
}
.gp-project__text::-webkit-scrollbar,
.gp-project__gallery::-webkit-scrollbar{
  width:10px;
}
.gp-project__text::-webkit-scrollbar-track,
.gp-project__gallery::-webkit-scrollbar-track{
  background:transparent;
}
.gp-project__text::-webkit-scrollbar-thumb,
.gp-project__gallery::-webkit-scrollbar-thumb{
  background:#7700FF;
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

/* Responsivo */
@media (max-width: 980px){
  body.single-projetos,
  body.single-projeto{ overflow:auto !important; }
  .gp-project__main{ height:auto; flex-direction:column; }
  .gp-project__text{
    width:100%;
    border-right:0;
    border-bottom:1px solid #7700FF;
  }
  .gp-project__gallery{ width:100%; overflow:visible; }
}