/* ============================================================================
   Devoções (Aparições Marianas + Milagres Eucarísticos) — Quick 260614-aoa.

   Componentes compartilhados que estendem o sistema visual de santos.css.
   Reutilizam as MESMAS variáveis (--gold-mid, --slate, --line...) — cada tema
   (marian.css / eucharistic.css) apenas sobrescreve a paleta. Carregar SEMPRE
   após santos.css.
   ========================================================================== */

/* Vitrine: grid de cards */
.dv-section { max-width: 1180px; margin: 0 auto; padding: 56px 24px; }
.dv-section-head { margin-bottom: 28px; }
.dv-section-head h2 { font-family: 'Spectral', serif; font-weight: 400; font-size: 34px; letter-spacing: -0.015em; color: var(--slate); margin: 6px 0 8px; }
.dv-section-head h2 em { font-style: italic; color: var(--gold-mid); }
.dv-section-head p { font-family: 'Spectral', serif; font-style: italic; font-size: 16px; color: var(--slate-2); margin: 0; }

.dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }

.dv-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.dv-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(27,36,64,0.35); border-color: var(--gold-line); }
.dv-card-media { height: 150px; background: linear-gradient(135deg, var(--gold-soft), #fff); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.dv-card-media img { width: 100%; height: 100%; object-fit: cover; }
.dv-card-media .ic { font-size: 44px; color: var(--gold-mid); opacity: .8; }
.dv-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.dv-card-body h3 { font-family: 'Spectral', serif; font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--slate); margin: 0; }
.dv-card-loc { font-family: var(--sans); font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.dv-card-desc { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--slate-2); margin: 0; flex: 1; }
.dv-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.dv-card-more { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--gold-deep); }

/* Badge de status de aprovação */
.dv-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; line-height: 1; white-space: nowrap; }
.dv-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dv-badge.ok { background: #E7F6EE; color: #1E7A48; }
.dv-badge.warn { background: #FCF3E2; color: #9A6B16; }
.dv-badge.no { background: #FBEAEC; color: #B23344; }
.dv-badge.neutral { background: #EEF1F6; color: #54607A; }

/* ---------------------------- Página de detalhe ---------------------------- */
.dv-detail { background: #fff; color: var(--slate); font-family: var(--sans); }
.dv-detail-hero { background: linear-gradient(180deg, var(--gold-soft) 0%, #fff 100%); border-bottom: 1px solid var(--line); }
.dv-detail-hero-inner { max-width: 1080px; margin: 0 auto; padding: 40px 24px 36px; }
.dv-breadcrumb { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.dv-breadcrumb a { color: var(--gold-deep); text-decoration: none; }
.dv-detail-grid { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; }
.dv-detail-figure { border-radius: 18px; overflow: hidden; border: 1px solid var(--gold-line); background: linear-gradient(160deg, var(--gold-soft), #fff); aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; }
.dv-detail-figure img { width: 100%; height: 100%; object-fit: cover; }
.dv-detail-figure .ic { font-size: 76px; color: var(--gold-mid); opacity: .8; }
.dv-detail-head h1 { font-family: 'Spectral', serif; font-weight: 400; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: var(--slate); margin: 10px 0 12px; }
.dv-detail-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-mid); }
.dv-detail-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold-mid); }
.dv-detail-lede { font-family: 'Spectral', serif; font-style: italic; font-size: 17px; line-height: 1.55; color: var(--slate-2); margin: 0 0 18px; }
.dv-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 8px; }
.dv-meta-item { font-family: var(--sans); font-size: 13.5px; color: var(--slate-2); }
.dv-meta-item b { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }

.dv-body { max-width: 1080px; margin: 0 auto; padding: 40px 24px 64px; display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.dv-prose { font-family: var(--sans); font-size: 15.5px; line-height: 1.7; color: var(--slate-2); }
.dv-prose h2 { font-family: 'Spectral', serif; font-weight: 500; font-size: 24px; color: var(--slate); margin: 28px 0 10px; }
.dv-prose p { margin: 0 0 16px; }
.dv-aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 18px; }
.dv-aside-card { border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.dv-aside-card h3 { font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.dv-aside-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dv-aside-card a { color: var(--gold-deep); text-decoration: none; font-size: 14px; }
.dv-aside-card a:hover { text-decoration: underline; }

.dv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 8px 0 24px; }
.dv-gallery img { width: 100%; height: 120px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }

.dv-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* ---------------------- Aviso / legenda dos selos ------------------------- */
.dv-notice-band { background: var(--gold-soft); border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); padding: 48px 24px; }
.dv-notice-inner { max-width: 1180px; margin: 0 auto; }
.dv-notice-inner h2 { font-family: 'Spectral', serif; font-weight: 400; font-size: 30px; letter-spacing: -0.015em; color: var(--slate); margin: 6px 0 10px; }
.dv-notice-lede { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--slate-2); max-width: 76ch; margin: 0 0 24px; }
.dv-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.dv-legend-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.dv-legend-item p { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--slate-2); margin: 8px 0 0; }

/* ------------------------------- Busca ------------------------------------ */
.dv-search-box { display: flex; align-items: center; gap: 12px; height: 58px; background: #fff; border: 1.5px solid var(--gold-line); border-radius: 14px; padding: 0 16px; margin-bottom: 14px; color: var(--muted); }
.dv-search-box:focus-within { border-color: var(--gold-mid); box-shadow: 0 0 0 4px rgba(0,0,0,0.04); }
.dv-search-box input { flex: 1; border: 0; outline: 0; background: transparent; font-family: var(--sans); font-size: 16px; color: var(--slate); }
.dv-search-box input::placeholder { color: #9aa3b2; }
.dv-search-box button { border: 0; background: var(--gold-soft); color: var(--gold-deep); width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; }
.dv-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.dv-chip { padding: 8px 14px; background: #fff; border: 1px solid var(--gold-line); border-radius: 999px; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--slate-2); cursor: pointer; transition: all .12s ease; }
.dv-chip:hover { border-color: var(--gold-mid); color: var(--gold-deep); }
.dv-chip.on { background: var(--gold-mid); color: #fff; border-color: var(--gold-mid); }
.dv-result-count { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin: 0 0 16px; }
.dv-empty { font-family: 'Spectral', serif; font-style: italic; font-size: 16px; color: var(--muted); text-align: center; padding: 40px 0; }

/* ----------------------------- Linha do tempo ----------------------------- */
.dv-timeline { position: relative; max-width: 760px; margin: 0; padding-left: 28px; }
.dv-timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--gold-line); }
.dv-tl-item { position: relative; padding: 0 0 22px; }
.dv-tl-item::before { content: ''; position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--gold-mid); }
.dv-tl-year { font-family: var(--sans); font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--gold-deep); text-transform: uppercase; }
.dv-tl-title { font-family: 'Spectral', serif; font-size: 18px; color: var(--slate); margin: 2px 0 4px; }
.dv-tl-desc { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--slate-2); margin: 0; }

/* -------------------------------- Orações --------------------------------- */
.dv-prayers { display: grid; gap: 14px; max-width: 820px; }
.dv-prayer { border: 1px solid var(--gold-line); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--gold-soft), #fff); }
.dv-prayer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; }
.dv-prayer-head h3 { font-family: 'Spectral', serif; font-weight: 500; font-size: 19px; color: var(--slate); margin: 0; }
.dv-prayer-tipo { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); }
.dv-prayer-toggle { font-size: 20px; color: var(--gold-mid); line-height: 1; transition: transform .2s ease; }
.dv-prayer.open .dv-prayer-toggle { transform: rotate(45deg); }
.dv-prayer-body { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; }
.dv-prayer.open .dv-prayer-body { padding: 0 20px 20px; max-height: 1200px; }
.dv-prayer-text { font-family: 'Spectral', serif; font-size: 16px; line-height: 1.7; color: var(--slate-2); white-space: pre-line; margin: 0; }
.dv-prayer-meta { font-family: var(--sans); font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.dv-prayer-meta a { color: var(--gold-deep); }

/* --------------------------- Galeria + lightbox --------------------------- */
.dv-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin: 8px 0 24px; }
.dv-gallery-grid .st-img-frame { cursor: zoom-in; }
.dv-gallery-grid .st-img-frame::after { content: '⤢'; position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 8px; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: opacity .15s ease; }
.dv-gallery-grid .st-img-frame:hover::after { opacity: 1; }

.dv-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(15,18,30,0.93); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5vh 4vw; }
.dv-lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.dv-lightbox-cap { color: #e9edf6; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; margin-top: 18px; text-align: center; max-width: 72ch; }
.dv-lightbox-close { position: fixed; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.15); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.dv-lightbox-close:hover { background: rgba(255,255,255,0.28); }

/* Crédito da capa quando vem da galeria (atribuição obrigatória) */
.dv-cover-credit { font-family: var(--sans); font-size: 11px; color: var(--muted); margin: 8px 2px 0; line-height: 1.4; }
.dv-cover-credit a { color: var(--gold-deep); }

/* Banner de pré-visualização de admin (registro inativo) */
.dv-admin-preview { background: #FEF3C7; border-bottom: 1px solid #FCD34D; color: #92400E; font-family: var(--sans); font-size: 13px; font-weight: 600; text-align: center; padding: 10px 16px; }

/* Conteúdo rico vindo do editor (Quill) */
.dv-prose ul, .dv-prose ol { margin: 0 0 16px; padding-left: 22px; }
.dv-prose h3 { font-family: 'Spectral', serif; font-weight: 500; font-size: 20px; color: var(--slate); margin: 22px 0 8px; }
.dv-prose blockquote { border-left: 3px solid var(--gold-line); margin: 0 0 16px; padding: 4px 0 4px 16px; color: var(--slate-2); font-style: italic; }
.dv-prose a { color: var(--gold-deep); text-decoration: underline; }

[x-cloak] { display: none !important; }

@media (max-width: 880px) {
    .dv-detail-grid { grid-template-columns: 1fr; }
    .dv-body { grid-template-columns: 1fr; }
    .dv-aside { position: static; }
    .dv-detail-head h1 { font-size: 32px; }
}