/* ==========================================================================
   1. DESIGN TOKENS (VARIÁVEIS)
   ========================================================================== */

:root {
  /* Cores */
  --Branco: #FFF;
  --Preto: #000;
  --Cinza: #3E434C;

  /* Tipografia */
  --font-body: "Inter", -apple-system, Roboto, Helvetica, sans-serif;

  /* Tamanhos de Fonte */
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 24px;
  --fs-xl: 32px;
  --fs-h2: 48px;
  --fs-h1: 60px;

  /* Espaçamentos */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-8: 64px;
  --space-10: 80px;
  --space-15: 120px;

  /* Gap padrão da galeria */
  --gallery-gap: 16px;
}

h1 { font-size: var(--fs-h1); font-style: normal; font-weight: 600; line-height: 1.5; }
h2 { font-size: var(--fs-h2); font-style: normal; font-weight: 600; line-height: 1.5; }
h3 { font-size: var(--fs-xl); font-style: normal; font-weight: 600; line-height: 2.0; }
h4 { font-size: var(--fs-lg); font-style: normal; font-weight: 600; line-height: 1.5; }
h5 { font-size: var(--fs-base); font-style: normal; font-weight: 600; }

p { font-size: var(--fs-base); line-height: 1.5; letter-spacing: 0.5px; }

article li {list-style: square; list-style-position: inside; line-height: 1.5em;}

* { margin: 0; padding: 0; box-sizing: border-box; }

.wp-block-file {width: 100%;}
.wp-block-file *+.wp-block-file__button {padding: 8px 24px; color: var(--Branco);}
a:-webkit-any-link {text-decoration: none;}

/* ==========================================================================
   LAYOUT (CONTAINER)
   ========================================================================== */

body {
  font-family: "Inter", sans-serif;
  background-color: var(--Branco);
  margin: 0 auto;
}

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;	
}

.shadow {
  border: 3px solid var(--Preto);
  background: var(--Branco);
  box-shadow: 10px 10px 0 0 var(--Preto);
}

img.icon {
  width: 24px; height: 24px; display: inline-block; vertical-align: middle;
}

.main-title {
  display: flex; padding: 40px 0; flex-direction: column;
  justify-content: center; align-items: center; gap: 10px; align-self: stretch;
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */

.btn-main {
  font-size: var(--fs-base); font-weight: 700; line-height: 1.5; color: var(--Branco);
  display: flex; height: 56px; padding: 0 var(--space-3); justify-content: center; align-items: center;
  text-decoration: none; border: none; background: var(--Preto);
  transition: color .2s, background .2s, box-shadow .2s, border .2s;
}
.btn-main:hover {
  color: var(--Preto); opacity: .8; cursor: pointer; border: 1px solid var(--Preto);
  background: #FFF; box-shadow: 5px 5px 0 0 #000;
}
.btn-main img {
  margin-left: 8px; width: 20px; height: 20px;
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(335deg) brightness(104%) contrast(107%);
}
.btn-main:hover img {
  width: 20px; height: 20px;
  filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(90deg) brightness(100%) contrast(93%);
}

.btn-link { color: var(--Preto); text-align: center; font-family: Inter; font-size: var(--fs-base); font-weight: 700; line-height: 1.5rem; text-decoration: none; }
.btn-link::after { content: " →"; }
.btn-container { display: flex; padding: 24px 0; flex-direction: column; justify-content: center; align-items: center; align-self: stretch; }

/* ==========================================================================
   NAV
   ========================================================================== */

nav {
  background: var(--Branco);
  display: flex; min-height: 120px; flex-direction: column; justify-content: center; align-items: center; align-self: stretch;
}
nav .container { display: flex; justify-content: space-between; align-items: center; }
nav .links li { display: inline; list-style: none; margin-left: var(--space-3); }
nav .logo { color: #000; font-family: Inter; font-size: 24px; letter-spacing: 1.5px; font-weight: 500; }
nav a { color: #000; text-decoration: none; font-family: Inter; font-size: 18px; font-weight: 700; line-height: 28px; }
.links a:hover {text-decoration: underline; text-underline-offset: 8px; transition: .3s;}

/* ==========================================================================
   NAV MOBILE
   ========================================================================== */

.overlay {
  height: 100%; width: 0; position: fixed; z-index: 999; top: 0; left: 0;
  background-color: rgba(0,0,0,.95); overflow-x: hidden; transition: .5s;
}
.overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; }
.overlay a {
  padding: 20px 10px; text-decoration: none; font-size: 20px; color: var(--Branco);
  display: block; transition: .3s; letter-spacing: 1.5px; text-transform: uppercase;
}
.overlay a:hover, .overlay a:focus { color: #f1f1f1; }
.overlay .closebtn { position: absolute; top: 40px; right: 20px; font-size: 60px; }

/* ==========================================================================
   MAIN BANNER
   ========================================================================== */

#main-banner {
  border: 3px solid #000; box-shadow: 10px 10px 0 0 #000; margin-bottom: 80px;
}
#main-banner iframe {
  width: 100%; display: flex; height: 60vh; flex-direction: column; justify-content: center; align-items: center; align-self: stretch;
}
#main-banner .desc {
  display: flex; padding: 32px; justify-content: center; align-items: center; gap: 48px; align-self: stretch;
}
#main-banner .desc .text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 0 0;
}

/* ==========================================================================
   PROJETOS (lista)
   ========================================================================== */

#projects { margin-bottom: 80px; }

.tabs {
  display: flex; justify-content: center; align-items: center; align-self: stretch;
  gap: 2rem; margin-bottom: var(--space-4); border-bottom: 2px solid #e5e5e5;
}
.tab {
  cursor: pointer; padding: .5rem 0; font-weight: 600; color: #999; position: relative;
  display: flex; height: 56px; padding: 0 24px; justify-content: center; align-items: center;
}
.tab.active { color: var(--Preto); }
.tab.active::after { content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: #000; }

.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.5rem; min-height: 500px;}
.card { border: 2px solid var(--Preto); background: var(--Branco); display: none; }
.card:hover { box-shadow: 5px 5px 0 0 var(--Preto); transition: box-shadow .2s; }
.card.active { display: block; }
.card-img { width: 100%; height: 260px; object-fit: cover; }
.card-body { padding: var(--space-3); }
.tags { margin: 1rem 0; }
.tags a, .tags span {
  text-decoration: none; color: var(--Preto); border: 2px solid #000; border-radius: 20px;
  padding: .2rem .6rem; margin-right: .3rem; font-size: .8rem; font-weight: bold;
}
.card-footer { display: flex; justify-content: flex-end; align-items: center; gap: 10px; align-self: stretch; }

/* ==========================================================================
   Sobre
   ========================================================================== */
#about { display: flex; align-items: center; align-self: stretch; margin-bottom: 80px; }
#about .col {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; flex: 1 0 0;
}
#about .desc {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; align-self: stretch; padding: var(--space-8);
}
#about .col .about-img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   PÁGINA PADRÃO
   ========================================================================== */

.page-cover img { width: 100%; height: 400px; object-fit: cover; }
.page-content { margin: 32px 0; }
.page-content p { margin-bottom: 20px; }

/* ==========================================================================
   PÁGINA PROJETO (detalhe)
   ========================================================================== */

.galeria { max-width: 1280px; margin: 0 auto;}

.swiper { width: 100%; height: 100%; }
.swiper-slide { max-width: 1280px; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 500px; object-fit: cover; }

.project {
  display: flex; padding: 40px 0; align-items: flex-start; flex-direction: row-reverse; gap: 80px;
}
.project article {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; flex: 1 0 0;
}
.project .sidebar {
  display: flex; width: 35%; flex-direction: column; padding: var(--space-4); gap: var(--space-3);
}
.project .sidebar ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }

/* ===== Galeria Estática (2 colunas: 1 grande + 2 empilhadas) ===== */
:root { --gallery-gap: 16px; }

.gallery-static {
  display: grid;
  grid-template-columns: 2fr 1.2fr;   /* esquerda maior */
  gap: var(--gallery-gap);
  margin-bottom: 32px;
}

/* --- alturas explícitas em px para evitar “vazamento” de height:auto --- */
.gallery-static .col-left a {
  display: block;
  height: 500px;                      /* altura total da coluna esquerda */
}
.gallery-static .col-right {
  display: grid;
  gap: var(--gallery-gap);
  grid-template-rows: 1fr 1fr;
}
.gallery-static .col-right a {
  display: block;
  height: calc((500px - var(--gallery-gap)) / 2); /* metade da esquerda, já descontando o gap */
}

/* Imagem sempre preenche o bloco acima */
.gallery-static .col-left img,
.gallery-static .col-right img {
  width: 100%;
  height: 100% !important;            /* força contra height:auto vindos de outro lugar */
  object-fit: cover;
  display: block;
  max-height: none !important;        /* evita travas de max-height externas */
}

/* Casos especiais (menos imagens) */
.gallery-static.only-one .col-right { display: none; }
.gallery-static.only-two .col-right a { height: 500px; }  /* se só houver 1 imagem na direita, use toda a altura */

/* Vídeo 16:9 ocupando 100% do article */
.project article .video-embed {
  width: 100%;
}

.project article .video-embed__inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

/* Força o iframe a preencher o container, mesmo que o oEmbed traga width/height fixos */
.project article .video-embed__inner iframe,
.project article .video-embed__inner video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

/* Browsers modernos: usa aspect-ratio e remove o padding */
@supports (aspect-ratio: 16 / 9) {
  .project article .video-embed__inner {
    position: static;
    padding-top: 0;
    aspect-ratio: 16 / 9;
    height: auto;
  }
  .project article .video-embed__inner iframe,
  .project article .video-embed__inner video {
    position: static;
    width: 100% !important;
  }
}

/* (Opcional) se o Gutenberg/outras regras envolverem em figure */
.project article figure.wp-block-embed,
.project article .wp-block-embed__wrapper {
  width: 100%;
  max-width: 100%;
}


/* ==========================================================================
   RODAPÉ
   ========================================================================== */

footer {
  display: flex; padding: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; align-self: stretch; border-top: 3px solid #000;
}
footer .container { display: flex; justify-content: space-between; align-items: center; }
footer .social-links { display: flex; align-items: center; gap: 24px; }
footer .social-links img { width: 24px; height: 24px; }

/* Helpers responsivos */
@media only screen and (max-width: 768px) { .mobile-hide { display: none !important; } }
@media only screen and (max-width: 768px) { .mobile { display: inline !important; } }
@media only screen and (min-width: 500px) { .desktop-hide { display: none !important; } }