/* =============================================
   REVISTA CONFRARIA
   Mesmos tokens do tema (hero claro + cards) e leitor folheavel.
   ============================================= */

.rev-page { background: var(--white); }
.rev-page .btn-outline { margin-top: 0; }

/* ---------- Hero ---------- */
.rev-hero { text-align: center; padding: calc(var(--header-height) + 36px) 0 28px; }
.rev-hero-compact { padding: calc(var(--header-height) + 24px) 0 20px; }
.rev-back {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 14px; font-weight: 500; color: var(--pink-primary);
    margin-bottom: 14px; transition: opacity .2s;
}
.rev-back:hover { opacity: .7; }
.rev-hero-title { font-size: 36px; font-weight: 800; color: var(--dark); line-height: 1.2; margin-bottom: 8px; }
.rev-hero-title .highlight { color: var(--pink-primary); font-style: italic; }
.rev-hero-subtitle { font-size: 16px; color: var(--gray-500); max-width: 760px; margin: 0 auto; line-height: 1.6; }

.rev-meta {
    display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pink-primary); margin-bottom: 8px;
}

/* ---------- Listagem ---------- */
.rev-section { padding: 8px 0 80px; }

/* Destaque cabe na primeira dobra: a capa e limitada pela altura da tela. */
.rev-feature {
    --capa-h: clamp(300px, calc(100svh - var(--header-height) - 250px), 560px);
    display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center;
    max-width: 1080px; margin: 0 auto;
    background: var(--pink-lighter); border-radius: var(--radius-xl); padding: 36px 48px;
}
.rev-feature-cover {
    display: block; height: var(--capa-h); aspect-ratio: 1059 / 1498;
    border-radius: var(--radius); overflow: hidden; background: var(--white);
    box-shadow: 0 24px 48px -12px rgba(27, 32, 40, .35);
    transform: rotate(-1.5deg); transition: transform .35s ease;
}
.rev-feature-cover:hover { transform: rotate(0) translateY(-4px); }
.rev-feature-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rev-tag {
    display: inline-block; background: var(--pink-primary); color: var(--white);
    font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-full); margin-bottom: 16px;
}
.rev-feature-title { font-size: 40px; font-weight: 800; color: var(--dark); line-height: 1.15; margin-bottom: 14px; }
.rev-feature-desc { font-size: 17px; color: var(--gray-600); line-height: 1.65; margin-bottom: 28px; }

.rev-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.rev-btn-big { font-size: 17px; padding: 16px 34px; }

.rev-section-title { font-size: 24px; font-weight: 800; color: var(--dark); text-align: center; margin: 64px 0 28px; }

.rev-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 28px; max-width: 1080px; margin: 0 auto;
}
.rev-card { color: inherit; display: flex; flex-direction: column; gap: 14px; }
.rev-card-cover {
    aspect-ratio: 1059 / 1498; border-radius: var(--radius); overflow: hidden;
    background: var(--gray-100); box-shadow: var(--shadow-md); transition: all .3s;
}
.rev-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rev-card:hover .rev-card-cover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.rev-card-body .rev-meta { margin-bottom: 4px; }
.rev-card-title { font-size: 16px; font-weight: 700; color: var(--dark); line-height: 1.35; }

.rev-empty { text-align: center; padding: 60px 20px; color: var(--gray-400); }
.rev-empty svg { margin-bottom: 12px; }
.rev-empty .rev-spinner { margin: 0 auto 16px; }
.rev-empty-title { font-size: 20px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.rev-spinner {
    display: block; width: 36px; height: 36px; border-radius: 50%;
    border: 3px solid var(--pink-light); border-top-color: var(--pink-primary);
    animation: revSpin .8s linear infinite;
}
@keyframes revSpin { to { transform: rotate(360deg); } }

/* ---------- Leitor ---------- */
.rev-section-reader { padding-bottom: 64px; }

.rev-reader {
    position: relative; max-width: 1240px; margin: 0 auto;
    display: flex; flex-direction: column;
    background: radial-gradient(ellipse at 50% 0%, #3A2030 0%, #1B2028 62%);
    border-radius: var(--radius-xl); padding: 14px 16px 16px;
    box-shadow: 0 30px 60px -20px rgba(27, 32, 40, .45);
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.rev-reader img { -webkit-user-drag: none; pointer-events: none; }

.rev-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 2px 10px; }
.rev-counter {
    font-size: 13px; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .08); padding: 8px 14px; border-radius: var(--radius-full);
}
.rev-toolbar-actions { display: flex; gap: 8px; }
.rev-tool {
    width: 40px; height: 40px; border-radius: var(--radius-full); border: none; cursor: pointer; flex: none;
    background: rgba(255, 255, 255, .1); color: var(--white);
    display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.rev-tool:hover { background: var(--pink-primary); }
.rev-tool-close { display: none; }

/* Altura do palco: cabe inteiro na tela abaixo do cabecalho. */
.rev-stage {
    position: relative; height: clamp(380px, calc(100svh - var(--header-height) - 130px), 920px);
    display: flex; align-items: center; justify-content: center;
}
.rev-book-host { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.rev-book { margin: 0 auto; }
.rev-pg { background: var(--white); overflow: hidden; }
.rev-pg img { width: 100%; height: 100%; object-fit: cover; display: block; background: #F4F1EF; }

.rev-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 50px; height: 50px; border-radius: var(--radius-full); border: none; cursor: pointer;
    background: var(--pink-gradient); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(233, 30, 99, .45); transition: transform .2s, opacity .2s;
}
.rev-nav:hover { transform: translateY(-50%) scale(1.06); }
.rev-nav:disabled { opacity: 0; pointer-events: none; }
.rev-nav-prev { left: 4px; }
.rev-nav-next { right: 4px; }

.rev-open-cta {
    display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6;
    align-items: center; gap: 8px; white-space: nowrap;
    background: var(--pink-gradient); color: var(--white); border: none; cursor: pointer;
    font: 700 15px/1 var(--font-sans); padding: 14px 22px; border-radius: var(--radius-full);
    box-shadow: 0 10px 28px rgba(233, 30, 99, .5);
}

.rev-hint { text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .55); margin-top: 10px; }

/* Miniaturas */
.rev-thumbs {
    position: absolute; inset: 0; z-index: 20; border-radius: inherit;
    background: rgba(20, 22, 28, .97); display: flex; flex-direction: column; padding: 16px;
}
.rev-thumbs[hidden] { display: none; }
.rev-thumbs-head { display: flex; justify-content: space-between; align-items: center; color: var(--white); margin-bottom: 14px; font-size: 15px; }
.rev-thumbs-grid {
    flex: 1; overflow-y: auto; display: grid; gap: 14px; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); padding: 2px;
    -webkit-overflow-scrolling: touch;
}
.rev-thumb {
    border: 2px solid transparent; background: none; padding: 0; cursor: pointer; border-radius: 8px;
    display: flex; flex-direction: column; gap: 6px; color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600;
}
.rev-thumb img { width: 100%; aspect-ratio: 1059 / 1498; object-fit: cover; border-radius: 6px; background: #2A2E36; }
.rev-thumb.ativa { border-color: var(--pink-primary); color: var(--white); }

/* Lupa */
.rev-zoom { position: fixed; inset: 0; z-index: 100002; background: rgba(12, 13, 17, .96); }
.rev-zoom[hidden] { display: none; }
.rev-zoom-scroll { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; display: grid; place-items: start center; }
.rev-zoom-scroll img {
    pointer-events: auto; cursor: zoom-in; display: block;
    width: min(100vw, calc(100vh / 1.414)); max-width: none; margin: auto;
}
.rev-zoom-scroll img.ampliada { width: clamp(900px, 250vw, 1600px); cursor: zoom-out; }
.rev-zoom-close { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 2; background: rgba(255, 255, 255, .16); }

/* Modo imersivo (tela cheia propria; funciona tambem no iPhone, que nao tem fullscreen de elemento) */
html.rev-lock, html.rev-lock body { overflow: hidden; }
.rev-reader.rev-imersivo,
.rev-reader:fullscreen {
    position: fixed; inset: 0; z-index: 100001; max-width: none; margin: 0; border-radius: 0;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.rev-reader.rev-imersivo .rev-stage,
.rev-reader:fullscreen .rev-stage { height: auto; flex: 1; min-height: 0; }
.rev-reader.rev-imersivo .rev-tool-close { display: flex; }
.rev-reader.rev-imersivo .rev-tool-full { display: none; }
.rev-reader.rev-imersivo .rev-open-cta { display: none !important; }
.rev-reader.rev-imersivo .rev-hint { display: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 900px) {
    .rev-feature { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px; text-align: center; }
    .rev-feature { --capa-h: clamp(280px, 52svh, 460px); }
    .rev-feature-cover { margin: 0 auto; }
    .rev-feature-title { font-size: 30px; }
    .rev-actions { justify-content: center; }
    .rev-open-cta { display: inline-flex; }
    .rev-reader:not(.rev-imersivo) .rev-nav { display: none; }
    .rev-reader:not(.rev-imersivo) .rev-tool-full { display: none; }
    /* No celular as setas ficam abaixo da pagina, livres para o dedo puxar a borda. */
    .rev-reader.rev-imersivo .rev-stage { padding-bottom: 64px; }
    .rev-reader.rev-imersivo .rev-nav { top: auto; bottom: 6px; transform: none; }
    .rev-reader.rev-imersivo .rev-nav-prev { left: calc(50% - 60px); }
    .rev-reader.rev-imersivo .rev-nav-next { right: calc(50% - 60px); }
    .rev-reader.rev-imersivo .rev-nav:hover { transform: none; }
}
@media (max-width: 640px) {
    .rev-hero { padding: calc(var(--header-height) + 22px) 0 18px; }
    .rev-hero-compact { padding: calc(var(--header-height) + 16px) 0 14px; }
    .rev-hero-title { font-size: 26px; }
    .rev-hero-subtitle { font-size: 14.5px; }
    /* Celular: capa ao lado do titulo para o botao Ler agora caber na primeira tela. */
    .rev-feature {
        margin: 0 -4px; padding: 20px 18px 22px; text-align: left;
        grid-template-columns: 44% 1fr; grid-template-rows: 1fr auto 1fr; gap: 0 16px; align-items: start;
    }
    .rev-feature-cover { grid-column: 1; grid-row: 1 / span 3; height: auto; width: 100%; margin: 0; }
    .rev-feature-body { display: contents; }
    .rev-feature .rev-tag { grid-column: 2; grid-row: 1; align-self: end; justify-self: start; font-size: 11px; padding: 5px 11px; margin-bottom: 10px; }
    .rev-feature .rev-meta { grid-column: 2; grid-row: 2; font-size: 10.5px; margin-bottom: 6px; }
    .rev-feature-title { grid-column: 2; grid-row: 3; font-size: 21px; margin: 0; }
    .rev-feature-desc { grid-column: 1 / -1; font-size: 15px; margin: 18px 0 18px; }
    .rev-feature .rev-actions { grid-column: 1 / -1; }
    .rev-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .rev-reader { margin: 0 -12px; border-radius: var(--radius-lg); padding: 10px 8px 12px; }
    .rev-stage { height: clamp(360px, calc(100svh - var(--header-height) - 120px), 760px); }
    .rev-btn-big { width: 100%; justify-content: center; }
    .rev-nav { width: 42px; height: 42px; }
    .rev-nav-prev { left: 0; }
    .rev-nav-next { right: 0; }
}