/**
 * Obras Artista — CSS Base Compartilhado
 * v1.0.0
 *
 * Lightbox, variáveis CSS, utilities usados por todos os 4 layouts.
 * Carregado em todas as páginas de artista que usam o novo sistema.
 */

/* =============================================
   VARIÁVEIS
   ============================================= */
:root {
   --gl-bg: #DADAD5;
   --gl-panel: #e7e7e2;
   --gl-accent: #d9ed09;
   --gl-text: #333;
   --gl-text-light: #666;
   --gl-text-muted: #999;
   --gl-text-faint: #bbb;
   --gl-border: #c8c8c7;
   --gl-shadow: rgba(0,0,0,0.12);
   --gl-shadow-light: rgba(0,0,0,0.08);
   --gl-overlay-bg: rgba(218,218,213,0.97);
   --gl-nav-bg: rgba(255,255,255,0.9);
   --gl-nav-hover-bg: #fff;
   --gl-nav-border: #ddd;
   --gl-nav-shadow: 0 2px 12px rgba(0,0,0,0.15);
   --gl-z-modal: 10001;
   --gl-z-modal-ui: 10002;
}

/* =============================================
   CONTAINER
   ============================================= */
.obras-artista-container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 40px 48px;
}

@media (max-width: 768px) {
   .obras-artista-container {
      padding: 24px 20px;
   }
}

/* =============================================
   MODAL / LIGHTBOX — Layout Pintura e Multimídia
   ============================================= */
.modal-overlay {
   display: none;
   position: fixed;
   inset: 0;
   z-index: var(--gl-z-modal);
   background: var(--gl-overlay-bg);
   align-items: center;
   justify-content: center;
   padding: 40px;
}
.modal-overlay.active {
   display: flex;
}

.modal-content {
   display: grid;
   grid-template-columns: 1.3fr 1fr;
   max-width: 1100px;
   width: 100%;
   max-height: 80vh;
   gap: 0;
}

.modal-img {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px;
   background: transparent;
}
.modal-img img {
   max-width: 100%;
   max-height: 70vh;
   object-fit: contain;
   touch-action: pan-y;
   cursor: zoom-in;
   filter: drop-shadow(0 4px 20px var(--gl-shadow));
}

.modal-info {
   padding: 48px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   background: var(--gl-bg);
}

/* Artista — uppercase, muted (igual coverflow h2) */
.modal-artista {
   font-size: 14px;
   font-weight: 400;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #888;
   margin-bottom: 8px;
}

/* Título + ano (igual coverflow h3) */
.modal-titulo {
   font-size: 22px;
   font-weight: 500;
   color: var(--gl-text);
   margin-bottom: 16px;
   font-style: normal;
   line-height: 1.3;
}

/* Labels (TÉCNICA, DIMENSÕES, EDIÇÃO) */
.modal-label {
   font-size: 11px;
   color: var(--gl-text-muted);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 16px;
   margin-bottom: 4px;
}
.modal-label:first-of-type {
   margin-top: 0;
}

/* Valores da ficha */
.modal-value {
   font-size: 13px;
   color: #555;
   line-height: 1.5;
   margin-bottom: 6px;
}

/* Preço / Sob consulta */
.modal-preco {
   font-size: 20px;
   font-weight: 500;
   color: var(--gl-text);
   margin-top: 20px;
}

/* Botão CTA — Solicitar Informações */
.modal-cta {
   display: inline-block;
   margin-top: 16px;
   padding: 14px 32px;
   background: var(--gl-accent);
   color: var(--gl-text);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   text-decoration: none;
   text-align: center;
   border: none;
   cursor: pointer;
   transition: opacity 0.2s;
}
.modal-cta:hover {
   opacity: 0.85;
}

.modal-form {
   display: none;
   margin-top: 20px;
}
.modal-form.active {
   display: block;
}
.modal-form-title {
   color: var(--gl-text-muted);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 10px;
}

/* CF7 no modal */
.modal-form .wpcf7-form-control:not([type="hidden"]):not([type="submit"]) {
   width: 100%;
   padding: 10px 12px;
   margin-bottom: 8px;
   background: #fff;
   border: 1px solid #ccc;
   color: var(--gl-text);
   font-family: inherit;
   font-size: 13px;
   border-radius: 2px;
   box-sizing: border-box;
}
.modal-form textarea.wpcf7-form-control {
   height: 80px;
   resize: none;
}
.modal-form input[type="submit"],
.modal-form .wpcf7-submit {
   display: block;
   width: 100%;
   padding: 12px;
   background: var(--gl-accent);
   color: var(--gl-text);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   border: none;
   cursor: pointer;
   font-family: inherit;
}
.modal-form .wpcf7-response-output {
   font-size: 12px;
   margin-top: 10px;
}

/* Ficha legado (fallback) */
.modal-ficha {
   font-size: 13px;
   color: #555;
   line-height: 1.8;
   margin-bottom: 24px;
}

/* Close */
.modal-close {
   position: absolute;
   top: 16px;
   right: 24px;
   background: none;
   border: none;
   cursor: pointer;
   font-size: 28px;
   color: var(--gl-text);
   z-index: var(--gl-z-modal-ui);
   font-family: inherit;
}

/* =============================================
   SETAS DE NAVEGAÇÃO — circulares (igual coverflow)
   ============================================= */
.modal-prev,
.modal-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--gl-nav-bg);
   border: 1px solid var(--gl-nav-border);
   cursor: pointer;
   color: var(--gl-text);
   font-size: 22px;
   z-index: var(--gl-z-modal-ui);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s;
   line-height: 1;
   font-family: inherit;
   box-shadow: var(--gl-nav-shadow);
}
.modal-prev:hover,
.modal-next:hover {
   background: var(--gl-nav-hover-bg);
}
.modal-prev {
   left: 20px;
}
.modal-next {
   right: 20px;
}

/* Contador "3 / 15" */
.modal-counter {
   position: absolute;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 11px;
   letter-spacing: 2px;
   color: var(--gl-text-muted);
   z-index: var(--gl-z-modal-ui);
}

@media (max-width: 520px) {
   .modal-prev,
   .modal-next {
      font-size: 28px;
      padding: 10px;
   }
   .modal-prev { left: 4px; }
   .modal-next { right: 4px; }
}

@media (max-width: 768px) {
   .modal-overlay {
      align-items: flex-start;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
   }
}

@media (max-width: 520px) {
   .modal-overlay {
      padding: 20px;
   }
   .modal-content {
      grid-template-columns: 1fr;
      max-height: 90vh;
      overflow-y: auto;
   }
   .modal-img {
      padding: 20px;
   }
   .modal-info {
      padding: 24px 20px;
   }
}

/* =============================================
   VIDEO LIGHTBOX — Layout Multimídia
   ============================================= */
.video-lightbox {
   display: none;
   position: fixed;
   inset: 0;
   z-index: var(--gl-z-modal);
   background: rgba(0,0,0,0.9);
   align-items: center;
   justify-content: center;
}
.video-lightbox.active {
   display: flex;
}
.video-lightbox__close {
   position: absolute;
   top: 20px;
   right: 28px;
   background: none;
   border: none;
   cursor: pointer;
   font-size: 28px;
   color: rgba(255,255,255,0.7);
   transition: color 0.2s;
   z-index: var(--gl-z-modal-ui);
}
.video-lightbox__close:hover {
   color: #fff;
}
.video-lightbox__container {
   width: 80vw;
   max-width: 1000px;
   aspect-ratio: 16/9;
}
.video-lightbox__container iframe {
   width: 100%;
   height: 100%;
   border: none;
}

/* =============================================
   FULLSCREEN DA IMAGEM (2o clique no modal)
   ============================================= */
.modal-fullscreen {
   display: none;
   position: fixed;
   inset: 0;
   background: var(--gl-bg);
   z-index: calc(var(--gl-z-modal-ui) + 10);
   align-items: center;
   justify-content: center;
   padding: 20px;
}
.modal-fullscreen.active {
   display: flex;
}
.modal-fullscreen img {
   max-width: 95vw;
   max-height: 90vh;
   object-fit: contain;
}
.modal-fullscreen-close {
   position: fixed;
   top: 14px;
   right: 20px;
   background: rgba(51, 51, 51, 0.75);
   color: #fff;
   border: none;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   font-size: 22px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}

@media (max-width: 768px) {
   .video-lightbox__container {
      width: 95vw;
   }
}

/* =============================================
   VIDEO FACADE — Layout Multimídia
   ============================================= */
.video-facade {
   position: relative;
   cursor: pointer;
}
.video-facade img {
   transition: transform 0.5s ease;
}
.video-facade:hover img {
   transform: scale(1.02);
}
.video-facade__play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 68px;
   height: 68px;
   opacity: 0.85;
   transition: opacity 0.3s;
   pointer-events: none;
}
.video-facade:hover .video-facade__play {
   opacity: 1;
}

/* =============================================
   BODY SCROLL LOCK (iOS Safari fix)
   ============================================= */
body.modal-open {
   overflow: hidden;
   position: fixed;
   width: 100%;
   left: 0;
   right: 0;
}

/* =============================================
   FADE-IN ANIMATION
   ============================================= */
.obra-fade-in {
   opacity: 0;
   transform: translateY(16px);
   transition: opacity 0.5s ease, transform 0.5s ease;
}
.obra-fade-in.visible {
   opacity: 1;
   transform: translateY(0);
}