/* ═══════════════════════════════════════════════════════════
   GARDEN HERO  ·  Project Pages
   Estilos exclusivos das páginas individuais de projeto.
   Depende de: tokens.css  base.css  components.css
   ═══════════════════════════════════════════════════════════ */

html, body { overflow-x: hidden; }

/* ╔═══════════════════════════════════════════════════════╗
   ║  HERO DO PROJETO                                      ║
   ╚═══════════════════════════════════════════════════════╝ */

.project-hero {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 520px;
  background-color: var(--color-bg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.project-hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.project-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 55%, transparent 75%),
    linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 30%);
  z-index: 1;
}

/* ── Botão Voltar ─────────────────────────────────────────── */
.project-hero__back {
  position:        absolute;
  top:              var(--space-16);
  left:             var(--space-16);
  z-index:          var(--z-nav);
  display:          inline-flex;
  align-items:      center;
  gap:              10px;
  padding:          12px 24px;
  border-radius:    var(--radius-pill);
  font-family:      var(--font-body);
  font-size:        var(--text-xs);
  font-weight:      500;
  letter-spacing:   0.15em;
  text-transform:   uppercase;
  color:            var(--color-white-80);
  transition:       color var(--ease-default), border-color var(--ease-default);

  background:              var(--glass-bg);
  backdrop-filter:          var(--glass-blur);
  -webkit-backdrop-filter:  var(--glass-blur);
  border:                   1px solid var(--glass-border);
  box-shadow:               var(--glass-shadow);
}

.project-hero__back svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--ease-default);
}

.project-hero__back:hover {
  color: var(--color-gold);
  border-color: var(--glass-border-gold);
}

.project-hero__back:hover svg {
  transform: translateX(-4px);
}

/* ── Conteúdo (título/ano) ────────────────────────────────── */
.project-hero__content {
  position: absolute;
  left:     var(--space-24);
  right:    var(--space-24);
  bottom:   var(--space-28);
  z-index:  2;
}

.project-hero__eyebrow {
  display:        flex;
  align-items:    center;
  gap:            12px;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  color:          var(--color-gold);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  opacity:        0.85;
  margin-bottom:  16px;
}

.project-hero__eyebrow::before {
  content:    '';
  width:      32px;
  height:     1px;
  background: var(--color-gold);
  opacity:    0.6;
}

.project-hero__title {
  font-family:    var(--font-display);
  font-size:      clamp(2.4rem, 7vw, 96px);
  line-height:    0.95;
  color:          var(--color-white);
  letter-spacing: 0.02em;
  text-shadow:    0 4px 24px rgba(0,0,0,0.6);
  margin-bottom:  12px;
}

.project-hero__year {
  font-family:    var(--font-body);
  font-size:      var(--text-md);
  color:          var(--color-gold);
  letter-spacing: 0.12em;
}

@media (max-width: 640px) {
  .project-hero { height: 75vh; min-height: 420px; }
  .project-hero__back { padding: 10px 18px; font-size: var(--text-2xs); }
  .project-hero__content { left: var(--space-12); right: var(--space-12); bottom: var(--space-16); }
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  META + DESCRIÇÃO                                     ║
   ╚═══════════════════════════════════════════════════════╝ */

.project-info {
  position:   relative;
  background: var(--color-bg);
  padding:    var(--space-32) var(--space-24) 96px;
}

.project-info::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     1px;
  background: linear-gradient(to right, transparent, var(--color-gold-dim), transparent);
}

.project-info__inner {
  max-width: 1100px;
  margin:    0 auto;
}

.project-meta {
  display:       flex;
  flex-wrap:     wrap;
  background:    rgba(255, 255, 255, 0.08);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin-bottom: var(--space-32);
}

.project-meta__item {
  flex:        1 1 160px;
  padding:     var(--space-16) var(--space-20);
  background:  var(--color-bg);
  display:     flex;
  flex-direction: column;
  gap:         4px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.project-meta__item:first-child { border-left: none; }

.project-meta__label {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  color:          var(--color-white-50);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-meta__value {
  font-family: var(--font-display);
  font-size:   var(--text-xl);
  color:       var(--color-gold);
  letter-spacing: 0.02em;
}

.project-description {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  line-height: 1.9;
  color:       var(--color-white-80);
  max-width:   680px;
}

.project-description + .project-description {
  margin-top: var(--space-16);
}

@media (max-width: 640px) {
  .project-info { padding: var(--space-24) var(--space-12) 64px; }
  .project-meta__item { border-left: none; }
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  GALERIA                                              ║
   ╚═══════════════════════════════════════════════════════╝ */

.project-gallery {
  background: var(--color-bg);
  padding:    0 var(--space-24) 120px;
}

.project-gallery__grid {
  max-width: 1100px;
  margin:    0 auto;
  display:   grid;
  grid-template-columns: repeat(2, 1fr);
  gap:       var(--space-16);
}

.project-gallery__item {
  position:      relative;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  aspect-ratio:  4 / 3;
}

.project-gallery__item--wide {
  grid-column:  1 / -1;
  aspect-ratio: 16 / 9;
}

.project-gallery__item img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-gallery__item:hover img {
  transform: scale(1.045);
}

@media (max-width: 640px) {
  .project-gallery { padding: 0 var(--space-12) 80px; }
  .project-gallery__grid { grid-template-columns: 1fr; }
  .project-gallery__item,
  .project-gallery__item--wide { aspect-ratio: 4 / 3; }
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  PRÓXIMO PROJETO                                      ║
   ╚═══════════════════════════════════════════════════════╝ */

.project-next {
  border-top:    1px solid rgba(255, 197, 21, 0.12);
  border-bottom: 1px solid rgba(255, 197, 21, 0.12);
  background:    var(--color-bg);
  padding:       72px var(--space-24);
  text-align:    center;
}

.project-next__link {
  display:        inline-flex;
  flex-direction: column;
  align-items:    center;
  gap:            14px;
}

.project-next__label {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  color:          var(--color-white-50);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.project-next__title {
  display:        inline-flex;
  align-items:    center;
  gap:            18px;
  font-family:    var(--font-display);
  font-size:      clamp(1.8rem, 6vw, 72px);
  color:          var(--color-white);
  letter-spacing: 0.02em;
  transition:     color var(--ease-default);
}

.project-next__title svg {
  width:      28px;
  height:     28px;
  flex-shrink: 0;
  transition: transform var(--ease-default);
}

.project-next__link:hover .project-next__title {
  color: var(--color-gold);
}

.project-next__link:hover .project-next__title svg {
  transform: translateX(8px);
}

@media (max-width: 640px) {
  .project-next { padding: 48px var(--space-12); }
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  RODAPÉ (mesmo padrão da home)                        ║
   ╚═══════════════════════════════════════════════════════╝ */

.site-footer {
  background:  #000;
  padding:     100px 96px 40px;
  display:     flex;
  flex-direction: column;
  gap:         80px;
  border-top:  1px solid rgba(255,255,255,0.05);
}

.footer-top {
  display:        flex;
  justify-content: space-between;
  align-items:    flex-start;
  flex-wrap:      wrap;
  gap:            32px;
}

.footer-col {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.footer-col__title {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  color:          var(--color-white-50);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom:  8px;
}

.footer-col__subtitle {
  font-family:    var(--font-body);
  font-size:      10px;
  color:          var(--color-white-38);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display:        block;
  margin-bottom:  4px;
}

.footer-link {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  color:       var(--color-white);
  text-decoration: none;
  transition:  color 0.3s ease;
}

.footer-link:hover { color: var(--color-gold); }

.footer-address {
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  color:       var(--color-white-80);
  line-height: 1.6;
  font-style:  normal;
}

.footer-bottom {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            40px;
  border-top:     1px solid rgba(255,255,255,0.1);
  padding-top:    60px;
}

.footer-brand {
  width:         100vw;
  margin-left:   0px;
  overflow:      hidden;
}

.footer-brand h2 {
  font-family:    var(--font-display);
  font-size:      clamp(var(--text-5xl), 12vw, 170px);
  color:          var(--color-white);
  margin:         0;
  line-height:    0.8;
  letter-spacing: 0.02em;
  white-space:    nowrap;
  text-align:     left;
}

.footer-legal {
  display:        flex;
  justify-content: space-between;
  width:          100%;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  color:          var(--color-white-50);
  letter-spacing: 0.05em;
  flex-wrap:      wrap;
  gap:            20px;
}

.footer-legal-links { display: flex; gap: 24px; }

.footer-legal-links a {
  color:           var(--color-white-50);
  text-decoration: none;
  transition:      color 0.3s ease;
}

.footer-legal-links a:hover { color: var(--color-white); }

@media (max-width: 768px) {
  .site-footer { padding: 60px 24px 32px; }
  .footer-top  { flex-direction: column; gap: 48px; }
  .footer-brand { margin-left: -24px; }
  .footer-brand h2 { font-size: clamp(var(--text-4xl), 14vw, 180px); }
}