/* ===================================================================
   Retratos Amazônicos
   Pages: page-retratos-amazonicos.php, floresta/retratos-amazonicos block
   Extracted from embedded <style> block in template-parts/retratos-amazonicos.php
   =================================================================== */

.retratos-amazonicos-section {
  position: relative;
  width: 100vw;
  min-height: 1000px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.retratos-bg-image {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  /* URL passed via --retratos-bg-img custom property on .retratos-amazonicos-section */
  background: var(--retratos-bg-img, none) center/cover no-repeat;
  width: 100%;
  height: 100%;
}

.retratos-bg-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(38, 122, 43, 0.5); /* 50% green overlay */
  z-index: 1;
}

.retratos-header {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.page-template-page-retratos .retratos-header,
.page-template-page-retratos-php .retratos-header,
.page-template-page-retratos-amazonicos-php .retratos-header {
  margin-top: calc(var(--navbar-height) + 124px);
}

.retratos-title {
  font-size: 2rem;
  font-weight: bold;
  color: #F5E9D6; /* BEIGE-BRAND */
}

.retratos-subtitle {
  font-size: 1.2rem;
  color: #fff;
}

.retratos-grid {
  position: absolute;
  top: 200px;
  bottom: 0;
  left: 50%;
  min-width: 100vw;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 0;
  z-index: 2;
  justify-items: stretch;
  align-items: stretch;
  box-sizing: border-box;
}

.page-template-page-retratos .retratos-grid,
.page-template-page-retratos-php .retratos-grid,
.page-template-page-retratos-amazonicos-php .retratos-grid {
  top: calc(var(--navbar-height) + 270px);
}

.retrato-item,
.retrato-image {
  border-radius: 0 !important;
}

.retrato-item {
  position: relative;
  overflow: hidden;
  min-height: 180px;
  background: #eee;
  /* --col-span and --row-span set per-item via inline custom property */
  grid-column: span var(--col-span, 1);
  grid-row: span var(--row-span, 1);
}

.retrato-image {
  width: 100%;
  height: 100%;
  /* --retrato-bg set per-item via inline custom property */
  background-image: var(--retrato-bg, none);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s;
}

.retrato-item:hover .retrato-image {
  transform: scale(1.05);
}

.retrato-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.retrato-info {
  color: #fff;
  text-align: center;
}

.retrato-name {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.retrato-separator {
  width: 40px;
  height: 2px;
  background: #fff;
  margin: 0.5rem auto;
}

.retrato-author {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.retrato-place {
  font-size: 0.9rem;
  opacity: 0.8;
}