/* ==========================================================
   DETALHE DO PROJETO — referência: OPCAO_1_DETALHE_PROJETO_LIDER_BPO.png
   ========================================================== */

/* Cabeçalho em faixa escura sólida */
.topbar { background: linear-gradient(90deg, var(--navy-950), var(--navy-900)); position: relative; z-index: 30; }
.topbar .header-inner { min-height: 84px; }

/* ---------- Hero claro com imagem do projeto ---------- */
.detail-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(100deg, #F4F8FE 0%, #EAF2FC 55%, #DCE9F8 100%);
  padding-bottom: 120px;
}
.detail-hero-photo {
  /* imagem do projeto inteira (sem zoom), à direita, como o monitor da referência */
  position: absolute; z-index: -1; top: 46%; right: 0; transform: translateY(-50%);
  width: 52%; height: auto; max-height: 90%; object-fit: cover; border-radius: 18px 0 0 18px;
  box-shadow: 0 30px 60px rgba(11, 27, 58, .18);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.7) 14%, #000 32%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.7) 14%, #000 32%);
}
.detail-hero::after { /* clareia a área do texto à esquerda */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 248, 254, .9) 0%, rgba(244, 248, 254, .6) 40%, rgba(244, 248, 254, 0) 55%);
}
.detail-hero-inner { position: relative; padding-top: 28px; min-height: 520px; }

.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .9rem; color: #4A5D7A; }
.breadcrumb a { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.breadcrumb a:hover { color: var(--blue-600); }
.breadcrumb .icon { width: 16px; height: 16px; }
.breadcrumb .sep { width: 14px; height: 14px; color: #8C99AE; }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }

.detail-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.detail-chips .chip { font-size: .95rem; padding: .6em 1.1em; font-weight: 600; }
.chip-cat { background: #DCEBFD; color: var(--blue-600); }
.chip-cat .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-cat:hover { background: #CDE2FC; }
.chip-status.chip-verde { background: #D7F5E3; color: #0F7A3D; }

.detail-title {
  margin-top: 22px; max-width: 640px; color: var(--ink); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(2.3rem, 1.5rem + 2.8vw, 4rem); line-height: 1.08;
}
.detail-summary {
  margin-top: 20px; max-width: 600px; color: #1E3A66;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); line-height: 1.5;
}
.detail-meta { display: flex; flex-wrap: wrap; gap: 18px 40px; margin-top: 30px; }
.detail-meta li { display: flex; align-items: center; gap: 12px; font-size: .95rem; color: #2A3F60; line-height: 1.3; }
.detail-meta strong { color: var(--ink); font-weight: 700; }
.detail-meta .icon { width: 30px; height: 30px; color: var(--ink); }

.video-btn {
  position: absolute; right: var(--gutter); bottom: 6px;
  display: inline-flex; align-items: center; gap: 14px; padding: 14px 24px 14px 16px; border-radius: 14px;
  background: rgba(6, 22, 52, .9); color: #fff; font-family: var(--font-title); font-weight: 600; font-size: 1rem; line-height: 1.25;
  box-shadow: 0 16px 36px rgba(4, 17, 43, .35); backdrop-filter: blur(6px);
  transition: transform .2s var(--ease), background-color .2s;
}
.video-btn:hover { transform: translateY(-2px); background: rgba(6, 22, 52, 1); }
.video-btn small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .875rem; color: rgba(255, 255, 255, .8); }
.video-btn-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-600); }
.video-btn-icon .icon { width: 20px; height: 20px; margin-left: 2px; }

/* ---------- Painel branco ---------- */
.detail-panel {
  position: relative; z-index: 2; margin-top: -72px; background: #fff;
  border-radius: 32px 32px 0 0; padding: 32px 0 72px;
}
.detail-container { max-width: calc(1180px + var(--gutter) * 2); }

/* Abas */
.detail-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: #F3F7FC; border: 1px solid #E3ECF8; border-radius: var(--radius-lg); overflow: hidden;
}
.detail-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 10px 20px; color: #3D4F6B; font-weight: 500; font-size: .95rem; text-align: center;
  transition: color .2s, background-color .2s;
}
.detail-tab .icon { width: 30px; height: 30px; color: #7C8BA3; transition: color .2s; }
.detail-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blue-600);
  transform: scaleX(0); transition: transform .25s var(--ease);
}
.detail-tab:hover { color: var(--blue-600); background: #EAF2FC; }
.detail-tab:hover .icon, .detail-tab.is-active .icon { color: var(--blue-600); }
.detail-tab.is-active { color: var(--blue-600); font-weight: 600; }
.detail-tab.is-active::after { transform: scaleX(1); }

/* História do projeto */
.story { display: flex; flex-direction: column; gap: 40px; margin-top: 44px; }
.story-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 28px; align-items: start; scroll-margin-top: 24px; }
.story-icon { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; }
.story-icon .icon { width: 34px; height: 34px; }
.story-icon--vermelho { background: #FDE8E8; color: #E02D3C; }
.story-icon--ambar    { background: #FFF2DC; color: #C77700; }
.story-icon--azul     { background: #E3EFFE; color: var(--blue-600); }
.story-icon--roxo     { background: #EEE9FE; color: #6D4AE0; }
.story-icon--verde    { background: #DDF6E7; color: #16A34A; }
.story-title { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.75rem); font-weight: 700; margin-top: 4px; }
.story-item p { margin-top: 10px; font-size: clamp(1rem, .95rem + .25vw, 1.15rem); color: #3A4C68; line-height: 1.65; max-width: 860px; }

.result-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.result-list li { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(1rem, .95rem + .25vw, 1.15rem); color: #2A3F60; }
.result-list .icon {
  flex: none; width: 24px; height: 24px; padding: 4px; margin-top: 1px; border-radius: 7px;
  background: #D7F5E3; color: #16A34A; stroke-width: 2.6;
}

/* Seções seguintes */
.detail-section { margin-top: 64px; scroll-margin-top: 24px; }
.detail-section-title { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.75rem); font-weight: 700; margin-bottom: 20px; }

/* Galeria */
.gallery { position: relative; }
.gallery-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  border-radius: var(--radius-lg); padding: 4px 0;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-item {
  display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); scroll-snap-align: start;
  box-shadow: var(--shadow); background: var(--navy-900);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--blue-600); box-shadow: var(--shadow-lg); transition: opacity .2s, transform .2s;
}
.gallery-nav .icon { width: 22px; height: 22px; }
.gallery-nav--prev { left: -20px; }
.gallery-nav--next { right: -20px; }
.gallery-nav:disabled { opacity: 0; pointer-events: none; }
.gallery.sem-rolagem .gallery-nav { display: none; }

.tech-list--detail { justify-content: flex-start; gap: 24px 56px; }

/* Mais projetos como este */
.more-card {
  display: flex; align-items: center; gap: 28px; margin-top: 64px; padding: 32px 40px;
  border-radius: var(--radius-lg); background: linear-gradient(90deg, #E2EEFD, #EDF5FF); border: 1px solid var(--blue-100);
}
.more-card-text { flex: 1; }
.more-card-text p { margin-top: 4px; font-size: 1.05rem; }
.more-card .soon-icon {
  display: grid; place-items: center; width: 80px; height: 80px; flex: none; border-radius: 18px;
  background: linear-gradient(145deg, var(--blue-500), var(--blue-600)); color: #fff; box-shadow: 0 10px 24px rgba(21, 112, 239, .3);
}
.more-card .soon-icon .icon { width: 40px; height: 40px; }
.more-card .soon-title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.6rem); font-weight: 700; }

/* ---------- Modais (vídeo e imagem) ---------- */
body.modal-aberto { overflow: hidden; }
.media-modal {
  width: min(1100px, 94vw); max-height: 92vh; padding: 0; border: 0; border-radius: var(--radius-lg);
  background: #000; color: #fff; overflow: visible;
}
.media-modal::backdrop { background: rgba(3, 10, 25, .82); backdrop-filter: blur(3px); }
.media-modal video { display: block; width: 100%; max-height: 86vh; border-radius: var(--radius-lg); background: #000; }
.media-modal--image { background: transparent; }
.media-modal--image img { display: block; margin: 0 auto; max-width: 100%; max-height: 82vh; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.media-close {
  position: absolute; top: -18px; right: -18px; z-index: 3; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: var(--shadow-lg);
}
.media-close .icon { width: 22px; height: 22px; }
.media-step {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: var(--shadow-lg);
}
.media-step .icon { width: 24px; height: 24px; }
.media-step--prev { left: 12px; }
.media-step--next { right: 12px; }
.media-count { text-align: center; margin-top: 10px; font-size: .9rem; color: rgba(255, 255, 255, .85); }

/* ==========================================================
   Responsividade
   ========================================================== */
@media (max-width: 1024px) {
  .gallery-nav--prev { left: -8px; }
  .gallery-nav--next { right: -8px; }
}
@media (max-width: 900px) {
  .topbar .header-inner { min-height: 76px; }
  .detail-hero-photo { width: 64%; opacity: .5; }
  .detail-hero::after { background: linear-gradient(90deg, rgba(244, 248, 254, .97) 0%, rgba(244, 248, 254, .88) 50%, rgba(244, 248, 254, .3) 100%); }
  .detail-hero-inner { min-height: 0; padding-bottom: 80px; }
  .gallery-track { grid-auto-columns: calc((100% - 16px) / 2); }
  .detail-tabs { overflow-x: auto; grid-auto-columns: minmax(120px, 1fr); scrollbar-width: none; }
}
@media (max-width: 720px) {
  .detail-hero { padding-bottom: 96px; }
  .detail-hero-photo { top: 0; transform: none; width: 100%; height: 100%; max-height: none; border-radius: 0; opacity: .18; -webkit-mask-image: none; mask-image: none; }
  .detail-panel { margin-top: -56px; border-radius: 24px 24px 0 0; padding-top: 24px; }
  .video-btn { position: static; margin-top: 26px; }
  .detail-hero-inner { padding-bottom: 16px; }
  .detail-tab { padding: 16px 8px 14px; font-size: .85rem; gap: 6px; }
  .detail-tab .icon { width: 24px; height: 24px; }
  .story { gap: 32px; margin-top: 32px; }
  .story-item { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .story-icon { width: 52px; height: 52px; }
  .story-icon .icon { width: 26px; height: 26px; }
  .gallery-track { grid-auto-columns: 85%; }
  .gallery-nav { display: none; }
  .tech-list--detail { gap: 20px 12px; }
  .more-card { flex-direction: column; text-align: center; padding: 28px 20px; gap: 16px; }
  .more-card .btn { width: 100%; }
  .media-close { top: 8px; right: 8px; }
}

/* Aviso de rascunho (pré-visualização da Equipe DEV) */
.draft-bar { background: #FFF4D6; color: #6B4100; text-align: center; font-size: .875rem; padding: 8px 16px; }
.draft-bar a { font-weight: 600; text-decoration: underline; }

/* ---------- Vídeo tocando no lugar da imagem de capa ---------- */
.detail-hero-photo { transition: opacity .3s var(--ease); }
.detail-hero-photo.is-hidden { opacity: 0; }
.detail-video {
  position: absolute; z-index: 3; top: 46%; right: var(--gutter); transform: translateY(-50%);
  width: min(47%, 680px); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 30px 70px rgba(5, 20, 48, .35);
}
.detail-video[hidden] { display: none; }
.detail-video video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.detail-video-fechar {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.detail-video-fechar .icon { width: 20px; height: 20px; }
.detail-video-erro {
  position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 12px; background: rgba(253, 236, 236, .97); color: #8E1620; font-size: .875rem;
}
.detail-video-erro .icon { width: 18px; height: 18px; }
.detail-video-erro a { font-weight: 700; text-decoration: underline; }
.video-btn.is-playing { background: var(--blue-600); }
@media (min-width: 721px) {
  body.video-aberto .video-btn { opacity: 0; pointer-events: none; }
}

@media (max-width: 900px) {
  .detail-video { width: min(60%, 520px); }
}
@media (max-width: 720px) {
  .detail-video { position: relative; top: auto; right: auto; transform: none; width: auto; margin: 18px 16px 0; order: 2; }
  .detail-hero { display: flex; flex-direction: column; }
  .detail-hero-inner { order: 1; }
}

/* ---------- Compartilhar / imprimir ---------- */
.detail-share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .75); border: 1px solid #D5E2F3; color: #1E3A66;
  font-size: .875rem; font-weight: 600; transition: background-color .2s, border-color .2s, color .2s;
}
.share-btn:hover { background: #fff; border-color: var(--blue-400); color: var(--blue-600); }
.share-btn .icon { width: 17px; height: 17px; }
.share-btn.is-ok { background: #D7F5E3; border-color: #9EDDB8; color: #0F7A3D; }

/* ---------- Impressão / salvar em PDF ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
  .topbar, .site-footer, .back-to-top, .video-btn, .detail-video, .detail-share, .detail-tabs, .gallery-nav,
  .more-card, .draft-bar, .breadcrumb, .media-modal, .avisos-dev { display: none !important; }
  .detail-hero { background: none !important; padding-bottom: 0; }
  .detail-hero::after { display: none; }
  .detail-hero-inner { min-height: 0; padding-top: 0; }
  .detail-hero-photo { position: static; transform: none; width: 100%; max-height: 260px; object-fit: cover;
    -webkit-mask-image: none; mask-image: none; box-shadow: none; border-radius: 10px; margin-bottom: 14px; }
  .detail-hero { display: flex; flex-direction: column; }
  .detail-hero-inner { order: 2; }
  .detail-title { font-size: 26pt; }
  .detail-panel { margin-top: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
  .story-item, .detail-section { break-inside: avoid; }
  .gallery-track { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; overflow: visible !important; }
  .gallery-item { width: auto !important; }
  a { text-decoration: none; color: inherit; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}