/* ============================================================
   CM+P — CAROLINA MALUHY + PARTNERS
   main.css
   ============================================================ */


/* --- FONTE --- */
@font-face {
  font-family: 'TT Fors';
  src: url('fonts/TT_Fors_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* --- VARIÁVEIS --- */
:root {
  --color-dark:   #3F3E3C;
  --color-gold:   #9C7851;
  --color-white:  #FFFFFF;
  --color-off:    #EDECEB;

  --font:         'TT Fors', sans-serif;

  --cols:         11;
  --gutter:       20px;
  --margin:       20px;

  --header-h:     62px;

  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     0.25s;
  --dur-mid:      0.5s;
  --dur-slow:     0.9s;
}


/* --- BASE --- */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--color-dark);
  background: var(--color-white);
  overflow-x: hidden;
}

body[data-page="home"] {
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-slow) var(--ease);
}

#preloader.hide {
  opacity: 0;
  pointer-events: none;
}

.symbol-svg {
  width: auto;
  height: 50px;
  display: block;
  animation: logoPulse 1.6s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.1; }
}


/* ============================================================
   HEADER
   ============================================================ */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.6s var(--ease);
}

#header.hidden { display: none; }

#header.solid { background: var(--color-white); }

/* Sobre e Contato: header com o mesmo cinza do bg da página */
body[data-page="sobre"] #header.solid,
body[data-page="contato"] #header.solid { background: var(--color-off); }
body[data-page="sobre"] #header::after,
body[data-page="contato"] #header::after {
  background: linear-gradient(to bottom, var(--color-off), transparent);
}

#header.home-transparent:hover { background: var(--color-white); }

/* Gradiente sutil abaixo do header ao scrollar */
#header::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-white), transparent);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
  pointer-events: none;
}

#header.scrolled::after { opacity: 1; }

.header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--margin) 20px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 17px;
}

.header-logo svg {
  display: block;
  height: 22px;
  width: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-link {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.075em;
  color: var(--color-dark);
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease);
}

.header-nav:has(.nav-link.active) .nav-link        { opacity: 0.5; }
.header-nav:has(.nav-link.active) .nav-link.active { opacity: 1; }
/* Quando um submenu está aberto, destaca o link dele e atenua todos os outros (inclusive o active da página) */
.header-nav:has(.nav-link.submenu-open) .nav-link              { opacity: 0.5; }
.header-nav:has(.nav-link.submenu-open) .nav-link.active        { opacity: 0.5; }
.header-nav:has(.nav-link.submenu-open) .nav-link.submenu-open { opacity: 1; }
.header-nav.is-hovering .nav-link                  { opacity: 0.5; }
.header-nav.is-hovering .nav-link:hover            { opacity: 1; }

/* Submenu */
.header-submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    max-height 0.35s var(--ease),
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease),
    padding 0.35s var(--ease);
}

.header-submenu.visible {
  max-height: 42px;
  opacity: 1;
  transform: translateY(0);
  padding: 0 0 20px;
}

.submenu-links {
  display: flex;
  align-items: center;
  gap: 20px;
  width: fit-content;
  margin-left: auto;
  padding: 0 var(--margin);
}

.submenu-link {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-dark);
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease);
}

/* Sobre: tem active permanente, regras com id pra ter especificidade suficiente */
#headerSubmenuSobre .submenu-link                                   { opacity: 0.5; }
#headerSubmenuSobre .submenu-link.active                            { opacity: 1; }
#headerSubmenuSobre .submenu-links.is-hovering .submenu-link        { opacity: 0.5; }
#headerSubmenuSobre .submenu-links.is-hovering .submenu-link:hover  { opacity: 1; }

/* Qualquer submenu com filtro active: irmãos atenuam */
.submenu-links:has(.submenu-link.active) .submenu-link        { opacity: 0.5; }
.submenu-links:has(.submenu-link.active) .submenu-link.active { opacity: 1; }

/* Hover */
.submenu-links.is-hovering .submenu-link        { opacity: 0.5; }
.submenu-links.is-hovering .submenu-link:hover  { opacity: 1; }


/* ============================================================
   HOME — HEADER ANIMADO
   ============================================================ */
#home-header {
  position: relative;
  width: 100%;
  height: 50vh;
  background: var(--color-white);
}

#logo-carolina {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 200;
}

#logo-carolina svg {
  display: block;
  height: 22px;
  width: auto;
}

#logo-partners {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

#logo-partners svg {
  display: block;
  height: 22px;
  width: auto;
}

#home-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.hero-slide.active { opacity: 1; }

.lang-switcher {
  position: absolute;
  bottom: var(--margin);
  right: var(--margin);
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
}

.lang {
  font-size: 1rem;
  letter-spacing: 0.075em;
  color: var(--color-dark);
  transition: color var(--dur-fast) var(--ease);
}

.lang.active,
.lang:hover { color: var(--color-white); }

.lang-divider {
  color: var(--color-dark);
  position: relative;
  top: -1px;
}


/* ============================================================
   PROJETOS — GRID
   ============================================================ */
#projetos-grid {
  padding-top: calc(var(--header-h) + calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11));
  padding-bottom: calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11);
  padding-left: calc(var(--margin) + ((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11) + var(--gutter));
  padding-right: calc(var(--margin) + ((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11) + var(--gutter));
}

.projetos-inner {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--gutter);
  justify-items: start;
}

.projeto-item {
  width: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.projeto-item.default {
  grid-column: span 3;
  aspect-ratio: 1 / 1;
}

.projeto-item.wide { grid-column: span 6; }

.projeto-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projeto-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.projeto-item:hover .projeto-overlay { opacity: 1; }

.projeto-nome {
  font-size: 1.25rem;
  letter-spacing: 0.075em;
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
}


/* ============================================================
   BACK TO TOP
   ============================================================ */
#back-to-top {
  position: fixed;
  bottom: var(--margin);
  right: var(--margin);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease);
  cursor: pointer;
  z-index: 50;
}

#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}


/* ============================================================
   SOBRE
   ============================================================ */
#sobre { background: var(--color-off); }

.about {
  --col1: calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11);
  --photo-w: calc(var(--col1) * 4 + var(--gutter) * 3);
  --photo-h: calc(var(--photo-w) * 3 / 4);
  --start-y: calc((100vh - var(--header-h) - var(--photo-h)) / 2);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  padding: 0 var(--margin);
}

.about-photo {
  grid-column: 2 / span 4;
  align-self: start;
  margin-top: var(--start-y);
}

.about-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(100%);
  display: block;
}

.about-text {
  grid-column: 7 / span 4;
  margin-top: var(--start-y);
}

.about-text p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-dark);
  margin-bottom: 20px;
}

.about-text p:last-child { margin-bottom: 0; }


/* ============================================================
   CARROSSEL DO TIME
   ============================================================ */
.time-carousel {
  overflow: hidden;
  margin-top: calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11);
  cursor: default;
}

.time-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.time-card {
  flex: 0 0 calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11 * 3 + var(--gutter) * 2);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.time-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.time-card-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.time-card:hover .time-card-info { opacity: 1; }

.time-nome {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-white);
  text-align: center;
}

.time-cargo {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-dark);
  margin-top: 4px;
  text-align: center;
}


/* ============================================================
   PRÊMIOS
   ============================================================ */
.premios {
  --col1: calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11);
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  padding: 0 var(--margin);
  margin-top: var(--col1);
}

.premios-title {
  grid-column: 1 / span 5;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-dark);
  align-self: start;
}

.premios-lista { grid-column: 6 / span 6; }

.premio-grupo { margin-bottom: 40px; }
.premio-grupo:last-child { margin-bottom: 0; }

.premio-ano {
  font-size: 1rem;
  color: rgba(63, 62, 60, 0.5);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(63, 62, 60, 0.5);
  cursor: pointer;
  user-select: none;
}

.premio-items {
  overflow: hidden;
  transition: max-height var(--dur-mid) var(--ease);
  max-height: 0;
}

.premio-grupo.open .premio-items { max-height: 1000px; }

.premio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  padding: 20px 0;
  border-bottom: 1px solid rgba(63, 62, 60, 0.25);
}

.premio-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.premio-row-nome,
.premio-row-projeto {
  font-size: 1rem;
  color: var(--color-dark);
  transition: opacity var(--dur-fast) var(--ease);
}

.premio-row-projeto:hover {
  opacity: 0.5;
}


/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: transparent;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  padding: 0 var(--margin) 20px;
  margin-top: calc((100% - var(--margin) * 2 - var(--gutter) * 10) / 11);
  align-items: end;
}

.footer-credit { grid-column: 1 / span 2; }
.footer-social { grid-column: 3 / span 3; }
.footer-addr   { grid-column: 6 / span 3; }
.footer-addr-uk { grid-column: 9 / span 3; }

footer p,
footer a {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-dark);
}

footer a {
  transition: opacity var(--dur-fast) var(--ease);
}

footer a:hover { opacity: 0.5; }


/* ============================================================
   SINGLE PROJETO
   ============================================================ */
#single-projeto { min-height: 100vh; }

.projeto-close {
  position: fixed;
  top: var(--margin);
  right: var(--margin);
  z-index: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- NOME DO PROJETO - CANTO SUPERIOR ESQUERDO ---- */
.projeto-nome-canto {
  position: absolute;
  top: 0;
  left: var(--margin);
  z-index: 200;
  height: var(--header-h);
  padding-bottom: 20px;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  font-size: 1.5rem; /* 24px */
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--color-dark);
  pointer-events: none;
}

/* ---- HERO: primeira dobra 100vh ---- */
.projeto-hero {
  --col1: calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11);
  height: 100vh;
  padding-left: calc(var(--margin) + var(--col1) + var(--gutter));
  padding-right: calc(var(--margin) + var(--col1) + var(--gutter));
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  box-sizing: border-box;
}

/* Thumb: grid item ocupando 9 col (mesma largura que fotos .full) */
.hero-thumb {
  grid-column: 1 / -1;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  /* Offset Y: (header-h - margin - altura seta 17px) / 2 */
  margin-top: calc((var(--header-h) - var(--margin) - 17px) / 2);
}

.hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Seta indicando scroll — fixa no bottom center, some ao scrollar */
.hero-arrow {
  position: fixed;
  bottom: var(--margin);
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.hero-arrow.oculto {
  opacity: 0;
}

/* ---- GALERIA ---- */
.projeto-fotos {
  --col1: calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11);
  background: var(--color-white);
  padding-left: calc(var(--margin) + var(--col1) + var(--gutter));
  padding-right: calc(var(--margin) + var(--col1) + var(--gutter));
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  column-gap: var(--gutter);
  row-gap: var(--col1);
}

/* ---- META APÓS GALERIA ---- */
.projeto-meta {
  --col1: calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11);
  padding: var(--col1) calc(var(--margin) + var(--col1) + var(--gutter));
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  column-gap: var(--gutter);
}

.meta-bloco {
  display: flex;
  flex-direction: column;
}

.meta-bloco.localizacao { grid-column: 1 / span 2; }
.meta-bloco.ano         { grid-column: 3 / span 2; }
.meta-bloco.fotografia  { grid-column: 6 / span 2; }
.meta-bloco.colaboracao { grid-column: 8 / span 2; }

.meta-label {
  font-size: 1rem;
  letter-spacing: 0.075em;
  color: rgba(63, 62, 60, 0.5);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.meta-value {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color-dark);
}

.projeto-foto.full {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.projeto-foto.half-left {
  grid-column: 1 / span 4;
  height: 100vh;
  overflow: hidden;
}

.projeto-foto.half-right {
  grid-column: 6 / span 4;
  height: 100vh;
  overflow: hidden;
}

.projeto-foto.solo {
  grid-column: 3 / span 5;
  height: 100vh;
  overflow: hidden;
}

.projeto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cursor pointer nas fotos do grid */
.projeto-foto { cursor: pointer; }


/* ============================================================
   LIGHTBOX: modo fullscreen das fotos
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--color-white);
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox.visible { display: flex; }

.lightbox-img {
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--margin);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }


/* ============================================================
   CONTATO
   ============================================================ */
body[data-page="contato"] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body[data-page="contato"] #contato {
  flex: 1;
}

#contato {
  background: var(--color-off);
  padding-top: var(--header-h);
}

.contato-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  padding: 0 var(--margin);
  margin-top: calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11);
  padding-bottom: calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11);
}

.contato-title {
  grid-column: 1 / span 5;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--color-dark);
  align-self: start;
}

.contato-lista {
  grid-column: 6 / span 6;
}

.contato-grupo {
  margin-bottom: 40px;
}

.contato-grupo:last-child {
  margin-bottom: 0;
}

.contato-label {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: rgba(63, 62, 60, 0.5);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(63, 62, 60, 0.5);
  cursor: pointer;
  user-select: none;
}

.contato-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-mid) var(--ease);
}

.contato-grupo.open .contato-items {
  max-height: 600px;
}

.contato-row {
  display: grid;
  grid-template-columns: 3fr 3fr;
  gap: var(--gutter);
  padding: 20px 0 0;
}

.contato-row--texto {
  grid-template-columns: 1fr;
}

.contato-info p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-dark);
}

.contato-info a {
  font-size: 1rem;
  color: var(--color-dark);
  transition: opacity var(--dur-fast) var(--ease);
}

.contato-info a:hover {
  opacity: 0.5;
}

.contato-foto {
  overflow: hidden;
}

.contato-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  mix-blend-mode: multiply;
}

/* Footer mínimo — contato */
.footer-minimal {
  background: var(--color-off);
  padding: var(--margin) var(--margin) 20px;
}

.footer-minimal-credit a {
  font-size: 1rem;
  color: var(--color-dark);
  transition: opacity var(--dur-fast) var(--ease);
}

.footer-minimal-credit a:hover {
  opacity: 0.5;
}

/* ============================================================
   PUBLICAÇÕES — GRID
   ============================================================ */
#publicacoes {
  background: #fff;
}

.pub-grid {
  padding-top: calc(var(--header-h) + calc((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11));
  padding-left: calc(var(--margin) + ((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11) + var(--gutter));
  padding-right: calc(var(--margin) + ((100vw - var(--margin) * 2 - var(--gutter) * 10) / 11) + var(--gutter));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}

.pub-card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
}

.pub-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pub-card::after {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease);
  pointer-events: none;
}

.pub-card:hover::after { opacity: 1; }