/* ============================================================
   ALBUM TEMPLATES — CSS de todos os templates de exibição
   Carregado dinamicamente em album.php
   Fase 1: masonry, magazine, compact, polaroid
   ============================================================ */

/* ============ LIGHTBOX (visualização ampliada) ============ */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}
.lightbox.active { display: flex; }

/* Foto ampliada — usa background-image (impede "Salvar imagem como...") */
.lightbox-img {
    width: 90vw;
    height: 85vh;
    max-width: 1400px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 4px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: rgba(212, 175, 90, 0.15);
    border: 1px solid rgba(212, 175, 90, 0.5);
    color: #d4af5a;
    font-size: 1.5rem;
    cursor: pointer;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
    font-family: inherit;
    line-height: 1;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: #d4af5a;
    color: #0d2453;
    transform: scale(1.05);
}
.lightbox-close { top: 1.5rem; right: 1.5rem; font-size: 1.8rem; }
.lightbox-prev  { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.05); }

.lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    color: #d4af5a;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.5);
    padding: .35rem .85rem;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 90, 0.3);
    pointer-events: none;
}

@media (max-width: 720px) {
    .lightbox-img { width: 95vw; height: 70vh; }
    .lightbox-close, .lightbox-prev, .lightbox-next { width: 44px; height: 44px; font-size: 1.2rem; }
    .lightbox-close { top: .85rem; right: .85rem; }
    .lightbox-prev { left: .85rem; }
    .lightbox-next { right: .85rem; }
}


/* === Estilos comuns a todos === */
.album-galeria figure,
[class*="album-tpl-"] figure {
    cursor: zoom-in;                  /* sugere "clica que abre maior" */
    margin: 0;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    position: relative;
}
.album-galeria figure img,
[class*="album-tpl-"] figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

/* === Proteção contra salvar/arrastar nas fotos dos álbuns === */
.img-protegida {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;       /* iOS: sem menu "Salvar imagem" */
    pointer-events: none;              /* clique passa direto pra figure */
}

/* === Indicador visual de clicável (ícone lupa no hover) === */
.album-galeria figure::after,
[class*="album-tpl-"] figure::after {
    content: '⊕';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.5);
    width: 56px; height: 56px;
    background: rgba(212, 175, 90, .95);
    color: #0d2453;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 900;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.album-galeria figure:hover::after,
[class*="album-tpl-"] figure:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
/* Não mostrar o ícone na thumb do polaroid (já tem visual próprio) */
.album-tpl-polaroid figure::after {
    display: none;
}

/* ============ TEMPLATE 1 · MASONRY ============ */
.album-tpl-masonry {
    column-count: 3;
    column-gap: 1rem;
}
.album-tpl-masonry figure {
    margin: 0 0 1rem;
    break-inside: avoid;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    background: #1a1a1a;
}
.album-tpl-masonry figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(13,36,83,.18);
}
.album-tpl-masonry figure:hover img {
    transform: scale(1.04);
}
@media (max-width: 900px) { .album-tpl-masonry { column-count: 2; } }
@media (max-width: 540px) { .album-tpl-masonry { column-count: 1; } }


/* ============ TEMPLATE 2 · MAGAZINE ============ */
.album-tpl-magazine .hero-foto {
    width: 100%;
    aspect-ratio: 21/9;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    background: #1a1a1a;
}
.album-tpl-magazine .hero-foto:hover img {
    transform: scale(1.02);
}
.album-tpl-magazine .badge-destaque {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    background: rgba(212,175,90,.95);
    color: var(--navy);
    padding: .4rem .9rem;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    z-index: 2;
}
.album-tpl-magazine .grid-uniforme {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.album-tpl-magazine .grid-uniforme figure {
    aspect-ratio: 1/1;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    background: #1a1a1a;
}
.album-tpl-magazine .grid-uniforme figure:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(13,36,83,.18);
}
.album-tpl-magazine .grid-uniforme figure:hover img { transform: scale(1.06); }
@media (max-width: 720px) {
    .album-tpl-magazine .grid-uniforme { grid-template-columns: repeat(2, 1fr); }
}


/* ============ TEMPLATE 3 · COMPACT ============ */
.album-tpl-compact {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .35rem;
}
.album-tpl-compact figure {
    aspect-ratio: 1/1;
    transition: opacity .2s ease;
}
.album-tpl-compact figure:hover {
    opacity: .75;
    transform: scale(.98);
}
@media (max-width: 900px) { .album-tpl-compact { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .album-tpl-compact { grid-template-columns: repeat(3, 1fr); } }


/* ============ TEMPLATE 4 · POLAROID ============ */
.album-tpl-polaroid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2.5rem;
    padding: 1rem 0;
}
.album-tpl-polaroid .polaroid-card {
    background: #fff;
    padding: 12px 12px 50px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    position: relative;
    text-align: center;
    transition: transform .3s ease, box-shadow .3s ease;
    border-radius: 0;
}
.album-tpl-polaroid .polaroid-card:nth-child(3n+1) { transform: rotate(-1.5deg); }
.album-tpl-polaroid .polaroid-card:nth-child(3n+2) { transform: rotate(1deg); }
.album-tpl-polaroid .polaroid-card:nth-child(3n+3) { transform: rotate(-.5deg); }
.album-tpl-polaroid .polaroid-card:hover {
    transform: rotate(0) scale(1.04);
    z-index: 5;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
.album-tpl-polaroid .polaroid-card img {
    aspect-ratio: 4/5;
    object-fit: cover;
}
.album-tpl-polaroid .scrapbook-tape {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 70px;
    height: 14px;
    background: rgba(212,175,90,.6);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.album-tpl-polaroid .polaroid-legenda {
    font-family: 'Caveat', 'Comic Sans MS', cursive;
    color: #1a1a1a;
    margin-top: 12px;
    font-size: 1.05rem;
    font-weight: 500;
}


/* ============ TEMPLATE 5 · MOSAICO (grid irregular dark) ============ */
.album-tpl-mosaico {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 140px;
    gap: .55rem;
    background: #1a1a1a;
    padding: 1rem;
    border-radius: 8px;
    margin: 0 -1rem;
}
.album-tpl-mosaico figure {
    border-radius: 3px;
    background: #0a0a0a;
}
.album-tpl-mosaico figure:hover { transform: scale(1.03); z-index: 2; }
.album-tpl-mosaico figure:hover img { transform: scale(1.05); }
.album-tpl-mosaico .mos-big   { grid-column: span 3; grid-row: span 2; }
.album-tpl-mosaico .mos-med   { grid-column: span 2; grid-row: span 2; }
.album-tpl-mosaico .mos-wide  { grid-column: span 4; grid-row: span 1; }
.album-tpl-mosaico .mos-tall  { grid-column: span 1; grid-row: span 2; }
.album-tpl-mosaico .mos-small { grid-column: span 1; grid-row: span 1; }
@media (max-width: 720px) {
    .album-tpl-mosaico { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
    .album-tpl-mosaico .mos-big,
    .album-tpl-mosaico .mos-med,
    .album-tpl-mosaico .mos-wide,
    .album-tpl-mosaico .mos-tall,
    .album-tpl-mosaico .mos-small { grid-column: span 1; grid-row: span 1; }
    .album-tpl-mosaico .mos-big { grid-column: span 2; grid-row: span 2; }
}


/* ============ TEMPLATE 6 · STORYTELLING (narrativa alternada) ============ */
.album-tpl-storytelling .story-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 3rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.album-tpl-storytelling .story-chapter.reverse {
    grid-template-areas: "txt img";
}
.album-tpl-storytelling .story-chapter.reverse .story-img { grid-area: img; }
.album-tpl-storytelling .story-chapter.reverse .story-txt { grid-area: txt; }

.album-tpl-storytelling .story-img {
    aspect-ratio: 4/3;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(13, 36, 83, 0.18);
    margin: 0;
    cursor: zoom-in;
}
.album-tpl-storytelling .story-img:hover img { transform: scale(1.04); }

.album-tpl-storytelling .story-txt {
    padding: 0 1rem;
}
.album-tpl-storytelling .story-eyebrow {
    color: #d4af5a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin: 0 0 .5rem;
}
.album-tpl-storytelling .story-numero {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(3rem, 6vw, 5rem);
    color: #0d2453;
    font-weight: 900;
    line-height: 1;
    margin: 0 0 .85rem;
}
.album-tpl-storytelling .story-desc {
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
    font-style: italic;
}

@media (max-width: 720px) {
    .album-tpl-storytelling .story-chapter,
    .album-tpl-storytelling .story-chapter.reverse {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        gap: 1.25rem;
    }
    .album-tpl-storytelling .story-chapter.reverse .story-img,
    .album-tpl-storytelling .story-chapter.reverse .story-txt {
        grid-area: auto;
    }
    .album-tpl-storytelling .story-txt { padding: 0; }
}


/* ============ TEMPLATE 7 · TIMELINE (cronológico vertical) ============ */
.album-tpl-timeline {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem 0;
}
.album-tpl-timeline .timeline-line {
    position: relative;
    padding-left: 4rem;
}
.album-tpl-timeline .timeline-line::before {
    content: '';
    position: absolute;
    left: 1.65rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #d4af5a, rgba(212, 175, 90, 0.2));
}
.album-tpl-timeline .timeline-item {
    position: relative;
    margin-bottom: 2.5rem;
}
.album-tpl-timeline .timeline-num {
    position: absolute;
    left: -4rem;
    top: 0;
    width: 56px;
    height: 56px;
    background: #d4af5a;
    color: #0d2453;
    border: 4px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(13, 36, 83, 0.15);
    z-index: 2;
}
.album-tpl-timeline .timeline-content {
    background: #fff;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-left: 3px solid #d4af5a;
}
.album-tpl-timeline .timeline-eyebrow {
    color: #d4af5a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 .85rem;
}
.album-tpl-timeline figure {
    aspect-ratio: 16/9;
    border-radius: 6px;
    margin: 0;
    cursor: zoom-in;
}
.album-tpl-timeline figure:hover img { transform: scale(1.04); }


/* ============ TEMPLATE 8 · HEXAGONAL (honeycomb) ============ */
.album-tpl-hexagonal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}
.album-tpl-hexagonal .hex-cell {
    width: 160px;
    height: 184px;
    margin: -22px 5px 0;
    cursor: zoom-in;
    transition: transform .3s ease;
}
.album-tpl-hexagonal .hex-cell:hover { transform: scale(1.08); z-index: 5; }
.album-tpl-hexagonal .hex-inner {
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #1a1a1a;
    transition: filter .3s ease;
}
.album-tpl-hexagonal .hex-cell:hover .hex-inner { filter: brightness(1.1); }
.album-tpl-hexagonal .hex-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Stagger: a cada 5ª célula, deslocar pra criar a colmeia */
.album-tpl-hexagonal .hex-cell:nth-child(10n+6) { margin-left: 85px; }
@media (max-width: 720px) {
    .album-tpl-hexagonal .hex-cell { width: 120px; height: 138px; }
    .album-tpl-hexagonal .hex-cell:nth-child(10n+6) { margin-left: 65px; }
}

/* No hexagonal e mosaico, esconder o ícone de zoom centralizado (visual já marcante) */
.album-tpl-hexagonal figure::after,
.album-tpl-mosaico figure::after {
    display: none;
}


/* ============================================================
   THUMBNAILS DO ADMIN (mini-previews dos templates)
   Usados em admin/album-edit.php seção "Modelo de exibição"
   ============================================================ */

/* base */
.tpl-card { background: #fff; border: 2px solid #e5e5e5; border-radius: 10px; overflow: hidden; cursor: pointer; transition: all .2s ease; position: relative; }
.tpl-card:hover { border-color: #d4af5a; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(13,36,83,.1); }
.tpl-card.selected { border-color: #d4af5a; box-shadow: 0 0 0 4px rgba(212,175,90,.3); }
.tpl-card.selected::after { content: '✓'; position: absolute; top: .85rem; right: .85rem; background: #d4af5a; color: #0d2453; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; z-index: 5; }
.tpl-card.em-breve { opacity: 0.55; cursor: not-allowed; }
.tpl-card.em-breve:hover { transform: none; border-color: #e5e5e5; box-shadow: none; }
.tpl-thumbnail { height: 160px; background: #f0f0f0; padding: 12px; position: relative; overflow: hidden; }
.tpl-body { padding: .85rem 1rem 1rem; background: #fff; border-top: 1px solid #f0f0f0; }
.tpl-body h4 { color: #0d2453; font-size: .92rem; font-weight: 800; margin-bottom: .25rem; display: flex; align-items: center; gap: .35rem; }
.tpl-body h4 .num-pill { background: #d4af5a; color: #0d2453; font-size: .68rem; padding: .15rem .45rem; border-radius: 3px; font-weight: 900; }
.tpl-body h4 .em-breve-tag { background: #888; color: #fff; font-size: .62rem; padding: .15rem .45rem; border-radius: 3px; font-weight: 700; margin-left: auto; }
.tpl-body p { color: #777; font-size: .78rem; line-height: 1.45; }

/* thumbnails specific */
.thumb-masonry { column-count: 3; column-gap: 4px; }
.thumb-masonry div { background: linear-gradient(135deg, #0d2453, #234ba3); margin-bottom: 4px; border-radius: 2px; break-inside: avoid; }
.thumb-masonry div:nth-child(1) { height: 60px; }
.thumb-masonry div:nth-child(2) { height: 40px; }
.thumb-masonry div:nth-child(3) { height: 50px; }
.thumb-masonry div:nth-child(4) { height: 40px; }
.thumb-masonry div:nth-child(5) { height: 60px; }
.thumb-masonry div:nth-child(6) { height: 45px; }
.thumb-masonry div:nth-child(7) { height: 40px; }
.thumb-masonry div:nth-child(8) { height: 50px; }
.thumb-masonry div:nth-child(9) { height: 35px; }
.thumb-masonry div:nth-child(2n) { background: linear-gradient(135deg, #d4af5a, #b8924a); }
.thumb-masonry div:nth-child(3n) { background: linear-gradient(135deg, #234ba3, #14306b); }

.thumb-magazine { display: flex; flex-direction: column; gap: 4px; }
.thumb-magazine .hero { height: 70px; background: linear-gradient(135deg, #0d2453, #234ba3); border-radius: 3px; }
.thumb-magazine .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.thumb-magazine .row div { aspect-ratio: 1/1; background: linear-gradient(135deg, #d4af5a, #b8924a); border-radius: 2px; }
.thumb-magazine .row div:nth-child(2n) { background: linear-gradient(135deg, #234ba3, #14306b); }

.thumb-compact { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.thumb-compact div { aspect-ratio: 1/1; background: linear-gradient(135deg, #0d2453, #234ba3); }
.thumb-compact div:nth-child(2n) { background: linear-gradient(135deg, #d4af5a, #b8924a); }
.thumb-compact div:nth-child(3n) { background: linear-gradient(135deg, #234ba3, #14306b); }

.thumb-polaroid { background: #f0e8d8; height: 100%; padding: 8px; border-radius: 4px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.thumb-polaroid > div { background: #fff; padding: 3px 3px 10px; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.thumb-polaroid > div:nth-child(1) { transform: rotate(-3deg); }
.thumb-polaroid > div:nth-child(2) { transform: rotate(2deg); }
.thumb-polaroid > div:nth-child(3) { transform: rotate(-1deg); }
.thumb-polaroid > div span { display: block; width: 36px; height: 32px; background: linear-gradient(135deg, #0d2453, #234ba3); }
.thumb-polaroid > div:nth-child(2) span { background: linear-gradient(135deg, #d4af5a, #b8924a); }

/* Thumbnails dos templates da Fase 2 — implementados */
.thumb-mosaic { background: #2a2a2a; height: 100%; padding: 5px; border-radius: 4px; }
.thumb-mosaic .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 30px; gap: 3px; }
.thumb-mosaic .grid div { background: linear-gradient(135deg, #0d2453, #234ba3); border-radius: 2px; }
.thumb-mosaic .big { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #d4af5a, #b8924a) !important; }
.thumb-mosaic .wide { grid-column: span 2; background: linear-gradient(135deg, #234ba3, #14306b) !important; }
.thumb-mosaic .tall { grid-row: span 2; }

.thumb-story { background: #faf8f4; height: 100%; padding: 8px; border-radius: 4px; }
.thumb-story .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; align-items: center; }
.thumb-story .row .img { height: 28px; background: linear-gradient(135deg, #0d2453, #234ba3); border-radius: 2px; }
.thumb-story .row .txt { display: flex; flex-direction: column; gap: 2px; }
.thumb-story .row .txt b { background: #d4af5a; height: 4px; width: 20px; border-radius: 1px; }
.thumb-story .row .txt span { background: #888; height: 2px; border-radius: 1px; }
.thumb-story .row .txt span:nth-child(2) { width: 80%; }
.thumb-story .row .txt span:nth-child(3) { width: 60%; }
.thumb-story .row:nth-child(odd) .img { order: 2; }

.thumb-timeline { background: #fff; height: 100%; padding: 8px 8px 8px 24px; border-radius: 4px; position: relative; }
.thumb-timeline::before { content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px; background: #d4af5a; }
.thumb-timeline .item { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; position: relative; }
.thumb-timeline .item::before { content: ''; position: absolute; left: -14px; width: 6px; height: 6px; background: #d4af5a; border-radius: 50%; }
.thumb-timeline .item .time { background: #888; height: 4px; width: 30px; border-radius: 1px; }
.thumb-timeline .item .pic { background: linear-gradient(135deg, #0d2453, #234ba3); height: 16px; flex: 1; border-radius: 2px; }

.thumb-hexa { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px; background: #fef9f0; border-radius: 4px; gap: 0; flex-wrap: wrap; }
.thumb-hexa .hex {
    width: 32px; height: 37px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: linear-gradient(135deg, #0d2453, #234ba3);
    margin: -3px 1px;
}
.thumb-hexa .hex:nth-child(2n) { background: linear-gradient(135deg, #d4af5a, #b8924a); }
.thumb-hexa .hex:nth-child(3n) { background: linear-gradient(135deg, #234ba3, #14306b); }
.thumb-hexa .hex:nth-child(4) { margin-left: 18px; }

/* ============ TEMPLATE 6 · STORYTELLING (narrativa alternada) ============ */
.album-tpl-storytelling .story-chapter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 3rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.album-tpl-storytelling .story-chapter.reverse {
    grid-template-areas: "txt img";
}
.album-tpl-storytelling .story-chapter.reverse .story-img { grid-area: img; }
.album-tpl-storytelling .story-chapter.reverse .story-txt { grid-area: txt; }

.album-tpl-storytelling .story-img {
    aspect-ratio: 4/3;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(13, 36, 83, 0.18);
    margin: 0;
    cursor: zoom-in;
}
.album-tpl-storytelling .story-img:hover img { transform: scale(1.04); }

.album-tpl-storytelling .story-txt { padding: 0 1rem; }
.album-tpl-storytelling .story-eyebrow {
    color: #d4af5a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin: 0 0 .5rem;
}
.album-tpl-storytelling .story-numero {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(3rem, 6vw, 5rem);
    color: #0d2453;
    font-weight: 900;
    line-height: 1;
    margin: 0 0 .85rem;
}
.album-tpl-storytelling .story-desc {
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
    font-style: italic;
}

@media (max-width: 720px) {
    .album-tpl-storytelling .story-chapter,
    .album-tpl-storytelling .story-chapter.reverse {
        grid-template-columns: 1fr;
        grid-template-areas: none;
        gap: 1.25rem;
    }
    .album-tpl-storytelling .story-chapter.reverse .story-img,
    .album-tpl-storytelling .story-chapter.reverse .story-txt {
        grid-area: auto;
    }
    .album-tpl-storytelling .story-txt { padding: 0; }
}


/* ============ TEMPLATE 7 · TIMELINE (cronológico vertical) ============ */
.album-tpl-timeline { max-width: 800px; margin: 0 auto; padding: 1rem 0; }
.album-tpl-timeline .timeline-line { position: relative; padding-left: 4rem; }
.album-tpl-timeline .timeline-line::before {
    content: '';
    position: absolute;
    left: 1.65rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #d4af5a, rgba(212, 175, 90, 0.2));
}
.album-tpl-timeline .timeline-item { position: relative; margin-bottom: 2.5rem; }
.album-tpl-timeline .timeline-num {
    position: absolute;
    left: -4rem;
    top: 0;
    width: 56px;
    height: 56px;
    background: #d4af5a;
    color: #0d2453;
    border: 4px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(13, 36, 83, 0.15);
    z-index: 2;
}
.album-tpl-timeline .timeline-content {
    background: #fff;
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-left: 3px solid #d4af5a;
}
.album-tpl-timeline .timeline-eyebrow {
    color: #d4af5a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 .85rem;
}
.album-tpl-timeline figure {
    aspect-ratio: 16/9;
    border-radius: 6px;
    margin: 0;
    cursor: zoom-in;
}
.album-tpl-timeline figure:hover img { transform: scale(1.04); }


/* ============ TEMPLATE 8 · HEXAGONAL (honeycomb) ============ */
.album-tpl-hexagonal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}
.album-tpl-hexagonal .hex-cell {
    width: 160px;
    height: 184px;
    margin: -22px 5px 0;
    cursor: zoom-in;
    transition: transform .3s ease;
}
.album-tpl-hexagonal .hex-cell:hover { transform: scale(1.08); z-index: 5; }
.album-tpl-hexagonal .hex-inner {
    width: 100%;
    height: 100%;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: #1a1a1a;
    transition: filter .3s ease;
}
.album-tpl-hexagonal .hex-cell:hover .hex-inner { filter: brightness(1.1); }
.album-tpl-hexagonal .hex-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.album-tpl-hexagonal .hex-cell:nth-child(10n+6) { margin-left: 85px; }
@media (max-width: 720px) {
    .album-tpl-hexagonal .hex-cell { width: 120px; height: 138px; }
    .album-tpl-hexagonal .hex-cell:nth-child(10n+6) { margin-left: 65px; }
}

.album-tpl-hexagonal figure::after,
.album-tpl-mosaico figure::after { display: none; }


/* ============================================================
   THUMBNAILS DO ADMIN (mini-previews dos templates)
   ============================================================ */

.tpl-card { background: #fff; border: 2px solid #e5e5e5; border-radius: 10px; overflow: hidden; cursor: pointer; transition: all .2s ease; position: relative; }
.tpl-card:hover { border-color: #d4af5a; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(13,36,83,.1); }
.tpl-card.selected { border-color: #d4af5a; box-shadow: 0 0 0 4px rgba(212,175,90,.3); }
.tpl-card.selected::after { content: '✓'; position: absolute; top: .85rem; right: .85rem; background: #d4af5a; color: #0d2453; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; z-index: 5; }
.tpl-card.em-breve { opacity: 0.55; cursor: not-allowed; }
.tpl-card.em-breve:hover { transform: none; border-color: #e5e5e5; box-shadow: none; }
.tpl-thumbnail { height: 160px; background: #f0f0f0; padding: 12px; position: relative; overflow: hidden; }
.tpl-body { padding: .85rem 1rem 1rem; background: #fff; border-top: 1px solid #f0f0f0; }
.tpl-body h4 { color: #0d2453; font-size: .92rem; font-weight: 800; margin-bottom: .25rem; display: flex; align-items: center; gap: .35rem; }
.tpl-body h4 .num-pill { background: #d4af5a; color: #0d2453; font-size: .68rem; padding: .15rem .45rem; border-radius: 3px; font-weight: 900; }
.tpl-body h4 .em-breve-tag { background: #888; color: #fff; font-size: .62rem; padding: .15rem .45rem; border-radius: 3px; font-weight: 700; margin-left: auto; }
.tpl-body p { color: #777; font-size: .78rem; line-height: 1.45; }

/* --- Thumbnails específicas (Fase 1) --- */
.thumb-masonry { column-count: 3; column-gap: 4px; height: 100%; }
.thumb-masonry > div { background: linear-gradient(135deg, #0d2453, #234ba3); margin-bottom: 4px; border-radius: 2px; break-inside: avoid; }
.thumb-masonry > div:nth-child(1) { height: 60px; }
.thumb-masonry > div:nth-child(2) { height: 40px; }
.thumb-masonry > div:nth-child(3) { height: 50px; }
.thumb-masonry > div:nth-child(4) { height: 40px; }
.thumb-masonry > div:nth-child(5) { height: 60px; }
.thumb-masonry > div:nth-child(6) { height: 45px; }
.thumb-masonry > div:nth-child(7) { height: 40px; }
.thumb-masonry > div:nth-child(8) { height: 50px; }
.thumb-masonry > div:nth-child(9) { height: 35px; }
.thumb-masonry > div:nth-child(2n) { background: linear-gradient(135deg, #d4af5a, #b8924a); }
.thumb-masonry > div:nth-child(3n) { background: linear-gradient(135deg, #234ba3, #14306b); }

.thumb-magazine { display: flex; flex-direction: column; gap: 4px; height: 100%; }
.thumb-magazine .hero { height: 70px; background: linear-gradient(135deg, #0d2453, #234ba3); border-radius: 3px; }
.thumb-magazine .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.thumb-magazine .row > div { aspect-ratio: 1/1; background: linear-gradient(135deg, #d4af5a, #b8924a); border-radius: 2px; }
.thumb-magazine .row > div:nth-child(2n) { background: linear-gradient(135deg, #234ba3, #14306b); }

.thumb-compact { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; height: 100%; }
.thumb-compact > div { aspect-ratio: 1/1; background: linear-gradient(135deg, #0d2453, #234ba3); }
.thumb-compact > div:nth-child(2n) { background: linear-gradient(135deg, #d4af5a, #b8924a); }
.thumb-compact > div:nth-child(3n) { background: linear-gradient(135deg, #234ba3, #14306b); }

.thumb-polaroid { background: #f0e8d8; height: 100%; padding: 8px; border-radius: 4px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.thumb-polaroid > div { background: #fff; padding: 3px 3px 10px; box-shadow: 0 2px 4px rgba(0,0,0,.15); }
.thumb-polaroid > div:nth-child(1) { transform: rotate(-3deg); }
.thumb-polaroid > div:nth-child(2) { transform: rotate(2deg); }
.thumb-polaroid > div:nth-child(3) { transform: rotate(-1deg); }
.thumb-polaroid > div span { display: block; width: 36px; height: 32px; background: linear-gradient(135deg, #0d2453, #234ba3); }
.thumb-polaroid > div:nth-child(2) span { background: linear-gradient(135deg, #d4af5a, #b8924a); }

/* --- Thumbnails específicas (Fase 2) --- */
.thumb-mosaic { background: #2a2a2a; height: 100%; padding: 5px; border-radius: 4px; }
.thumb-mosaic .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 30px; gap: 3px; }
.thumb-mosaic .grid > div { background: linear-gradient(135deg, #0d2453, #234ba3); border-radius: 2px; }
.thumb-mosaic .big { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, #d4af5a, #b8924a) !important; }
.thumb-mosaic .wide { grid-column: span 2; background: linear-gradient(135deg, #234ba3, #14306b) !important; }
.thumb-mosaic .tall { grid-row: span 2; }

.thumb-story { background: #faf8f4; height: 100%; padding: 8px; border-radius: 4px; }
.thumb-story .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; align-items: center; }
.thumb-story .row .img { height: 28px; background: linear-gradient(135deg, #0d2453, #234ba3); border-radius: 2px; }
.thumb-story .row .txt { display: flex; flex-direction: column; gap: 2px; }
.thumb-story .row .txt b { background: #d4af5a; height: 4px; width: 20px; border-radius: 1px; }
.thumb-story .row .txt span { background: #888; height: 2px; border-radius: 1px; }
.thumb-story .row .txt span:nth-child(2) { width: 80%; }
.thumb-story .row .txt span:nth-child(3) { width: 60%; }
.thumb-story .row:nth-child(odd) .img { order: 2; }

.thumb-timeline { background: #fff; height: 100%; padding: 8px 8px 8px 24px; border-radius: 4px; position: relative; }
.thumb-timeline::before { content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 2px; background: #d4af5a; }
.thumb-timeline .item { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; position: relative; }
.thumb-timeline .item::before { content: ''; position: absolute; left: -14px; width: 6px; height: 6px; background: #d4af5a; border-radius: 50%; }
.thumb-timeline .item .time { background: #888; height: 4px; width: 30px; border-radius: 1px; }
.thumb-timeline .item .pic { background: linear-gradient(135deg, #0d2453, #234ba3); height: 16px; flex: 1; border-radius: 2px; }

.thumb-hexa { display: flex; align-items: center; justify-content: center; height: 100%; padding: 8px; background: #fef9f0; border-radius: 4px; gap: 0; flex-wrap: wrap; }
.thumb-hexa .hex {
    width: 32px; height: 37px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    background: linear-gradient(135deg, #0d2453, #234ba3);
    margin: -3px 1px;
}
.thumb-hexa .hex:nth-child(2n) { background: linear-gradient(135deg, #d4af5a, #b8924a); }
.thumb-hexa .hex:nth-child(3n) { background: linear-gradient(135deg, #234ba3, #14306b); }
.thumb-hexa .hex:nth-child(4) { margin-left: 18px; }

/* ============================================================
   FASE 2.5 · Templates que precisam quebrar o container-narrow
   ============================================================ */
.album-tpl-mosaico,
.album-tpl-hexagonal {
    width: calc(100vw - 3rem);
    max-width: 1240px;
    margin-left: 50%;
    transform: translateX(-50%);
    position: relative;
}
@media (max-width: 720px) {
    .album-tpl-mosaico,
    .album-tpl-hexagonal {
        width: 100%;
        margin-left: 0;
        transform: none;
    }
}

/* === Estilos adicionais pra legendas em templates === */
.album-tpl-timeline .timeline-legenda {
    color: #0d2453;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .65rem;
    line-height: 1.35;
}

/* ============================================================
   FASE 3 · Lookbook · Mood Board · Cinema · Fullscreen
   ============================================================ */

/* === Lookbook === */
.album-tpl-lookbook {
    width: calc(100vw - 3rem);
    max-width: 1240px;
    margin-left: 50%;
    transform: translateX(-50%);
    position: relative;
}
.album-tpl-lookbook .lookbook-page {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0;
    min-height: 70vh;
    background: #f8f6f1;
    margin-bottom: 1rem;
}
.album-tpl-lookbook .lookbook-page.reverse { grid-template-columns: 2fr 3fr; }
.album-tpl-lookbook .lookbook-page.reverse .lookbook-img { order: 2; }
.album-tpl-lookbook .lookbook-page.reverse .lookbook-meta { order: 1; }
.album-tpl-lookbook .lookbook-img {
    margin: 0;
    height: 70vh;
    min-height: 480px;
    background: #1a1a1a;
}
.album-tpl-lookbook .lookbook-img img { width: 100%; height: 100%; object-fit: cover; }
.album-tpl-lookbook .lookbook-img:hover img { transform: scale(1.02); }
.album-tpl-lookbook .lookbook-meta {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.album-tpl-lookbook .lookbook-num {
    font-family: Georgia, serif;
    font-size: 4.5rem;
    color: #d4af5a;
    font-weight: 900;
    line-height: 1;
    margin-bottom: .85rem;
}
.album-tpl-lookbook .lookbook-eyebrow {
    color: #d4af5a;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.album-tpl-lookbook .lookbook-title {
    font-family: Georgia, serif;
    color: #0d2453;
    font-size: 1.65rem;
    line-height: 1.25;
    margin: 0 0 1.5rem;
}
.album-tpl-lookbook .lookbook-credits {
    color: #888;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-top: 1px solid #ddd;
    padding-top: 1.25rem;
    margin-top: 1.5rem;
}
.album-tpl-lookbook .lookbook-credits strong { color: #0d2453; }
@media (max-width: 720px) {
    .album-tpl-lookbook .lookbook-page,
    .album-tpl-lookbook .lookbook-page.reverse {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .album-tpl-lookbook .lookbook-page.reverse .lookbook-img,
    .album-tpl-lookbook .lookbook-page.reverse .lookbook-meta { order: 0; }
    .album-tpl-lookbook .lookbook-img { height: 50vh; min-height: 300px; }
    .album-tpl-lookbook .lookbook-meta { padding: 2rem 1.5rem; }
    .album-tpl-lookbook .lookbook-num { font-size: 3rem; }
}

/* === Mood Board === */
.album-tpl-moodboard {
    width: calc(100vw - 3rem);
    max-width: 1240px;
    margin-left: 50%;
    transform: translateX(-50%);
    position: relative;
}
.album-tpl-moodboard .mb-board {
    position: relative;
    height: 580px;
    background: #efe9dc;
    background-image: radial-gradient(rgba(192,184,156,.4) 1px, transparent 1px);
    background-size: 20px 20px;
    margin-bottom: 2rem;
    border-radius: 6px;
    overflow: hidden;
}
.album-tpl-moodboard .mb-piece {
    position: absolute;
    background: #fff;
    padding: 8px 8px 32px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transition: transform .3s ease, box-shadow .3s ease, z-index 0s .15s;
    cursor: zoom-in;
    margin: 0;
}
.album-tpl-moodboard .mb-piece:hover {
    transform: scale(1.1) rotate(0) !important;
    z-index: 10;
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
    transition: transform .3s ease, box-shadow .3s ease, z-index 0s 0s;
}
.album-tpl-moodboard .mb-piece img {
    width: 100%;
    height: calc(100% - 24px);
    object-fit: cover;
}
.album-tpl-moodboard .mb-pin {
    position: absolute;
    top: -7px; left: 50%;
    transform: translateX(-50%);
    width: 14px; height: 14px;
    background: radial-gradient(circle at 30% 30%, #e74c3c, #b03a2e);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
    z-index: 2;
}
.album-tpl-moodboard .mb-piece::after { display: none; }
@media (max-width: 720px) {
    .album-tpl-moodboard .mb-board {
        height: auto;
        padding: 1rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    .album-tpl-moodboard .mb-piece {
        position: static !important;
        width: 100% !important;
        height: 200px !important;
        transform: none !important;
    }
}

/* === Cinema === */
.album-tpl-cinema {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    background: #0a0a0a;
    padding: 0;
    color: #fff;
    border-radius: 0;
}
.album-tpl-cinema .cinema-header {
    padding: 1.75rem 2rem;
    background: #111;
    border-bottom: 1px solid #222;
    text-align: center;
}
.album-tpl-cinema .cinema-header h3 { color: #fff; font-size: 1.3rem; margin: 0; }
.album-tpl-cinema .cinema-header p { color: #d4af5a; font-size: .82rem; margin-top: .4rem; letter-spacing: .05em; }
.album-tpl-cinema .cinema-arrow { animation: cinemaArrow 1.5s infinite; display: inline-block; }
@keyframes cinemaArrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}
.album-tpl-cinema .cinema-perfs {
    background: #1a1a1a;
    padding: .5rem 0;
    display: flex;
    gap: .85rem;
    padding-left: 2rem;
    padding-right: 2rem;
    overflow: hidden;
}
.album-tpl-cinema .cinema-perfs span {
    width: 18px; height: 18px;
    background: #0a0a0a;
    border-radius: 2px;
    flex-shrink: 0;
}
.album-tpl-cinema .cinema-strip-wrap {
    background: #1a1a1a;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
.album-tpl-cinema .cinema-strip {
    display: flex;
    gap: 1rem;
    padding: 1.75rem 2rem;
    min-width: max-content;
}
.album-tpl-cinema .cinema-frame {
    flex-shrink: 0;
    margin: 0;
    cursor: zoom-in;
    text-align: center;
}
.album-tpl-cinema .cinema-frame img {
    width: 320px; height: 240px;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.5);
    transition: transform .3s ease;
}
.album-tpl-cinema .cinema-frame:hover img { transform: scale(1.04); }
.album-tpl-cinema .cinema-frame-num {
    color: #d4af5a;
    font-size: .72rem;
    margin-top: .6rem;
    letter-spacing: .15em;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}
.album-tpl-cinema .cinema-frame::after { display: none; }
@media (max-width: 720px) {
    .album-tpl-cinema .cinema-frame img { width: 240px; height: 180px; }
}

/* === Fullscreen === */
.album-tpl-fullscreen {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    background: #000;
    position: relative;
    overflow: hidden;
    height: 80vh;
    min-height: 500px;
}
.album-tpl-fullscreen .fs-stage {
    position: relative;
    width: 100%;
    height: 100%;
}
.album-tpl-fullscreen .fs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    cursor: default;
}
.album-tpl-fullscreen .fs-slide.active { opacity: 1; z-index: 2; }
.album-tpl-fullscreen .fs-slide img {
    width: 100%; height: 100%;
    object-fit: contain;
    background: #000;
}
.album-tpl-fullscreen .fs-info {
    position: absolute;
    bottom: 2.5rem;
    left: 2rem;
    max-width: 60%;
    z-index: 4;
    background: rgba(13,36,83,.65);
    backdrop-filter: blur(8px);
    padding: 1rem 1.25rem;
    border-radius: 6px;
    border-left: 3px solid #d4af5a;
}
.album-tpl-fullscreen .fs-eyebrow {
    color: #d4af5a;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 0 .35rem;
}
.album-tpl-fullscreen .fs-legenda { color: #fff; font-size: 1.2rem; margin: 0; line-height: 1.3; font-weight: 700; }
.album-tpl-fullscreen .fs-dots {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: .35rem;
    z-index: 5;
}
.album-tpl-fullscreen .fs-dots span {
    width: 28px; height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
    transition: all .3s;
    cursor: pointer;
}
.album-tpl-fullscreen .fs-dots span.active {
    background: #d4af5a;
    width: 48px;
}
.album-tpl-fullscreen .fs-prev,
.album-tpl-fullscreen .fs-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    background: rgba(212,175,90,.15);
    border: 1px solid #d4af5a;
    color: #d4af5a;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 50%;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
    font-family: inherit;
}
.album-tpl-fullscreen .fs-prev:hover,
.album-tpl-fullscreen .fs-next:hover { background: #d4af5a; color: #0d2453; transform: translateY(-50%) scale(1.05); }
.album-tpl-fullscreen .fs-prev { left: 1.5rem; }
.album-tpl-fullscreen .fs-next { right: 1.5rem; }
.album-tpl-fullscreen .fs-counter {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    color: #d4af5a;
    font-size: .9rem;
    letter-spacing: .15em;
    font-weight: 700;
    z-index: 5;
    background: rgba(0,0,0,.5);
    padding: .35rem .85rem;
    border-radius: 16px;
    pointer-events: none;
}
.album-tpl-fullscreen .fs-slide::after { display: none; }
@media (max-width: 720px) {
    .album-tpl-fullscreen { height: 70vh; min-height: 400px; }
    .album-tpl-fullscreen .fs-prev, .album-tpl-fullscreen .fs-next { width: 42px; height: 42px; font-size: 1rem; }
    .album-tpl-fullscreen .fs-prev { left: .75rem; }
    .album-tpl-fullscreen .fs-next { right: .75rem; }
    .album-tpl-fullscreen .fs-info { max-width: 90%; left: 1rem; right: 1rem; bottom: 4rem; }
}


/* === Thumbnails do admin (Fase 3) === */
.thumb-lookbook { height: 100%; background: #f8f6f1; padding: 6px; border-radius: 4px; display: flex; gap: 4px; }
.thumb-lookbook .big { flex: 3; background: linear-gradient(135deg,#0d2453,#234ba3); border-radius: 2px; }
.thumb-lookbook .txt { flex: 2; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px; }
.thumb-lookbook .txt b { background: #d4af5a; height: 14px; width: 18px; border-radius: 1px; }
.thumb-lookbook .txt span { background: #888; height: 3px; border-radius: 1px; }
.thumb-lookbook .txt span:nth-child(2) { width: 70%; }

.thumb-moodboard { height: 100%; background: #efe9dc; padding: 6px; border-radius: 4px; position: relative; }
.thumb-moodboard .p {
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.thumb-moodboard .p:nth-child(1) { width: 32px; height: 38px; top: 8px; left: 12px; transform: rotate(-5deg); }
.thumb-moodboard .p:nth-child(2) { width: 28px; height: 32px; top: 12px; left: 50px; transform: rotate(3deg); }
.thumb-moodboard .p:nth-child(3) { width: 30px; height: 36px; top: 6px; right: 18px; transform: rotate(-2deg); }
.thumb-moodboard .p:nth-child(4) { width: 30px; height: 34px; bottom: 12px; left: 22px; transform: rotate(4deg); }
.thumb-moodboard .p:nth-child(5) { width: 28px; height: 32px; bottom: 16px; right: 14px; transform: rotate(-3deg); }
.thumb-moodboard .p::before {
    content: '';
    display: block;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #0d2453, #234ba3);
}
.thumb-moodboard .p:nth-child(2)::before { background: linear-gradient(135deg, #d4af5a, #b8924a); }
.thumb-moodboard .p:nth-child(4)::before { background: linear-gradient(135deg, #234ba3, #0d2453); }

.thumb-cinema { background: #0a0a0a; height: 100%; padding: 4px 4px; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; }
.thumb-cinema .perfs { display: flex; gap: 4px; padding: 3px 4px; background: #1a1a1a; }
.thumb-cinema .perfs span { width: 6px; height: 6px; background: #0a0a0a; border-radius: 1px; flex-shrink: 0; }
.thumb-cinema .strip { display: flex; gap: 4px; padding: 6px 4px; background: #1a1a1a; }
.thumb-cinema .strip div { width: 36px; height: 28px; border: 2px solid #fff; background: linear-gradient(135deg, #0d2453, #234ba3); flex-shrink: 0; }
.thumb-cinema .strip div:nth-child(2) { background: linear-gradient(135deg, #d4af5a, #b8924a); }
.thumb-cinema .strip div:nth-child(3) { background: linear-gradient(135deg, #234ba3, #14306b); }

.thumb-fullscreen { background: #000; height: 100%; padding: 6px; border-radius: 4px; position: relative; display: flex; align-items: center; justify-content: center; }
.thumb-fullscreen .big { width: 70%; height: 70%; background: linear-gradient(135deg, #0d2453, #234ba3); }
.thumb-fullscreen .dots { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; }
.thumb-fullscreen .dots span { width: 12px; height: 2px; background: rgba(255,255,255,.3); }
.thumb-fullscreen .dots span:first-child { background: #d4af5a; width: 20px; }

/* Remove o "Em breve" dos thumbs da Fase 3 (sobrescreve regra anterior) */
.thumb-lookbook::after,
.thumb-moodboard::after,
.thumb-cinema::after,
.thumb-fullscreen::after { content: none; }
/* E sobrescreve o background do placeholder */
.thumb-lookbook,
.thumb-moodboard,
.thumb-cinema,
.thumb-fullscreen { background-image: none; }

/* ============================================================
   FASE 4 · Coverflow 3D · Antes-Depois · Stories · Comic
   ============================================================ */

/* === Coverflow 3D === */
.album-tpl-coverflow {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    background: #1a1a1a;
    color: #fff;
    padding: 3rem 0 4rem;
    perspective: 1200px;
    position: relative;
}
.album-tpl-coverflow .cv-stage {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}
.album-tpl-coverflow .cv-photo {
    position: absolute;
    width: 280px; height: 350px;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0a0a;
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    transition: all .5s ease;
    cursor: pointer;
}
.album-tpl-coverflow .cv-photo img { width: 100%; height: 100%; object-fit: cover; }
.album-tpl-coverflow .cv-center { transform: translateX(0) scale(1.1); z-index: 5; }
.album-tpl-coverflow .cv-l1     { transform: translateX(-220px) rotateY(45deg) scale(.85); z-index: 3; }
.album-tpl-coverflow .cv-r1     { transform: translateX( 220px) rotateY(-45deg) scale(.85); z-index: 3; }
.album-tpl-coverflow .cv-l2     { transform: translateX(-380px) rotateY(50deg) scale(.65); z-index: 1; opacity: .5; }
.album-tpl-coverflow .cv-r2     { transform: translateX( 380px) rotateY(-50deg) scale(.65); z-index: 1; opacity: .5; }
.album-tpl-coverflow .cv-hidden { opacity: 0; transform: scale(.3) translateX(0); pointer-events: none; }
.album-tpl-coverflow .cv-photo::after { display: none; }
.album-tpl-coverflow .cv-info { text-align: center; padding: 1.5rem 1rem 0; }
.album-tpl-coverflow .cv-eyebrow { color: #d4af5a; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; }
.album-tpl-coverflow .cv-legenda { color: #fff; font-size: 1.15rem; margin-top: .35rem; min-height: 1.5em; }
.album-tpl-coverflow .cv-nav {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    align-items: center;
}
.album-tpl-coverflow .cv-nav button {
    width: 48px; height: 48px;
    background: rgba(212,175,90,.15);
    border: 1px solid #d4af5a;
    color: #d4af5a;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: inherit;
    transition: all .2s;
}
.album-tpl-coverflow .cv-nav button:hover { background: #d4af5a; color: #0d2453; }
.album-tpl-coverflow .cv-counter { color: #fff; letter-spacing: .15em; font-weight: 700; }
@media (max-width: 720px) {
    .album-tpl-coverflow .cv-stage { height: 320px; }
    .album-tpl-coverflow .cv-photo { width: 220px; height: 280px; }
    .album-tpl-coverflow .cv-l1, .album-tpl-coverflow .cv-r1 { display: none; }
    .album-tpl-coverflow .cv-l2, .album-tpl-coverflow .cv-r2 { display: none; }
}

/* === Antes/Depois === */
.album-tpl-antesdepois { max-width: 900px; margin: 0 auto; }
.album-tpl-antesdepois .ad-intro { text-align: center; color: #888; font-size: .9rem; margin-bottom: 1.5rem; font-style: italic; }
.album-tpl-antesdepois .ad-pair { margin-bottom: 2.5rem; }
.album-tpl-antesdepois .ad-titulo { color: #0d2453; font-size: 1.1rem; margin-bottom: .65rem; }
.album-tpl-antesdepois .ad-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    cursor: ew-resize;
    user-select: none;
    background: #1a1a1a;
}
.album-tpl-antesdepois .ad-img {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.album-tpl-antesdepois .ad-antes  { z-index: 1; }
.album-tpl-antesdepois .ad-depois { z-index: 2; clip-path: inset(0 50% 0 0); }
.album-tpl-antesdepois .ad-label {
    position: absolute;
    top: 1rem;
    padding: .35rem .85rem;
    background: rgba(0,0,0,.6);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-radius: 4px;
    z-index: 3;
    pointer-events: none;
}
.album-tpl-antesdepois .ad-label-antes  { left: 1rem; }
.album-tpl-antesdepois .ad-label-depois { right: 1rem; background: #d4af5a; color: #0d2453; }
.album-tpl-antesdepois .ad-divider {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 4px;
    background: #d4af5a;
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
}
.album-tpl-antesdepois .ad-divider::before {
    content: '↔';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    background: #d4af5a;
    color: #0d2453;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* ============================================================
   OVERRIDES DE TAMANHO POR FOTO
   Aplicados pelo dropdown 📏 no editor visual.
   ============================================================ */

/* ----- Masonry: alongada vira 2 linhas no grid ----- */
.album-tpl-masonry figure.mas-tall { grid-row: span 2; }
.album-tpl-masonry figure.mas-tall img { height: 100%; }

/* ----- Polaroid: variações de tamanho ----- */
.album-tpl-polaroid figure.polaroid-grande  { width: 320px; }
.album-tpl-polaroid figure.polaroid-grande img { height: 320px; }
.album-tpl-polaroid figure.polaroid-medio   { width: 240px; }
.album-tpl-polaroid figure.polaroid-medio  img { height: 240px; }
.album-tpl-polaroid figure.polaroid-pequeno { width: 170px; }
.album-tpl-polaroid figure.polaroid-pequeno img { height: 170px; }

/* ----- Compact: wide ocupa 2 colunas ----- */
.album-tpl-compact figure.cpt-wide { grid-column: span 2; }

/* ----- Hexagonal: hex grande/pequeno ----- */
.album-tpl-hexagonal figure.hex-grande  { transform: scale(1.4); z-index: 2; }
.album-tpl-hexagonal figure.hex-pequeno { transform: scale(0.7); }

/* ----- Moodboard: classe extra pro estilo ----- */
.album-tpl-moodboard figure.mb-grande  { z-index: 3; box-shadow: 0 12px 32px rgba(0,0,0,.25); }
.album-tpl-moodboard figure.mb-pequeno { z-index: 1; opacity: .9; }

/* ============================================================
   BADGE INFORMATIVA NO EDITOR
   ============================================================ */
.tamanho-info-badge {
    background: linear-gradient(135deg, #fff9e6, #f7eecc);
    border: 1px solid #d4af5a;
    border-radius: 6px;
    padding: .55rem .8rem;
    margin: 0 0 .9rem;
    font-size: .8rem;
    color: #0d2453;
    line-height: 1.45;
}
.tamanho-info-badge strong { color: #8a6f1f; }

/* Remove o "Em breve" dos thumbs da Fase 4 (sobrescreve regras anteriores)
   e também garante background limpo */
.thumb-coverflow::after,
.thumb-antesdepois::after,
.thumb-stories::after,
.thumb-comic::after { content: none; }

.thumb-coverflow,
.thumb-antesdepois,
.thumb-stories,
.thumb-comic { background-image: none; }

/* ============================================================
   THUMBS dos 6 templates Fase 4 + Bento/Postcard
   (representação visual em miniatura dos templates no admin)
   ============================================================ */

/* Container comum dos thumbs */
.thumb-coverflow, .thumb-antesdepois, .thumb-stories,
.thumb-comic, .thumb-bento, .thumb-postcard {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f7f7fa;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- Coverflow 3D ----- */
.thumb-coverflow {
    gap: 4px;
    background: #0d2453;
}
.thumb-coverflow .side {
    width: 18%; height: 50%;
    background: #4a6db5;
    transform: perspective(40px) rotateY(35deg);
    opacity: .55;
    border-radius: 2px;
}
.thumb-coverflow .side:last-child { transform: perspective(40px) rotateY(-35deg); }
.thumb-coverflow .center {
    width: 30%; height: 70%;
    background: #d4af5a;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* ----- Antes / Depois ----- */
.thumb-antesdepois { background: linear-gradient(to right, #234ba3 50%, #d4af5a 50%); }
.thumb-antesdepois .antes,
.thumb-antesdepois .depois { display: none; }
.thumb-antesdepois .div {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 3px; background: #fff;
    box-shadow: 0 0 4px rgba(0,0,0,.3);
}
.thumb-antesdepois .div::after {
    content: '↔'; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; color: #0d2453;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 900;
}

/* ----- Stories ----- */
.thumb-stories { flex-direction: column; gap: 4px; padding: 6px; background: #1a1a1a; }
.thumb-stories .prog { display: flex; gap: 3px; width: 100%; }
.thumb-stories .prog span {
    flex: 1; height: 3px;
    background: rgba(255,255,255,.3);
    border-radius: 2px;
}
.thumb-stories .prog .done   { background: #fff; }
.thumb-stories .prog .active { background: linear-gradient(to right, #fff 60%, rgba(255,255,255,.3) 60%); }
.thumb-stories .content {
    flex: 1; width: 100%;
    background: linear-gradient(135deg, #d4af5a, #8b6f2e);
    border-radius: 3px;
}

/* ----- Comic Strip ----- */
.thumb-comic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px; padding: 4px;
    background: #fff8e1;
}
.thumb-comic > div {
    background: #ffd54f;
    border: 1px solid #0d2453;
    border-radius: 2px;
}
.thumb-comic .wide { grid-column: span 2; background: #d4af5a; }

/* ----- Bento ----- */
.thumb-bento {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1.2fr 1fr 1fr;
    gap: 3px;
    padding: 4px;
    height: 100%;
    background: #f7f7fa;
}
.thumb-bento > div {
    background: linear-gradient(135deg, #0d2453, #234ba3);
    border-radius: 4px;
    min-height: 14px;
}
.thumb-bento .xl {
    grid-column: span 2;
    background: linear-gradient(135deg, #d4af5a, #8b6f2e);
}
.thumb-bento .md { grid-column: span 1; }
.thumb-bento .sm { grid-column: span 1; }

/* ----- Postcard ----- */
.thumb-postcard {
    display: flex; flex-direction: column;
    gap: 4px; padding: 6px;
    background: #f1ebd8;
}
.thumb-postcard > div {
    flex: 1; display: flex; gap: 4px;
    background: #fff;
    border-radius: 3px;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.thumb-postcard > div span {
    width: 30%;
    background: linear-gradient(135deg, #d4af5a, #8b6f2e);
    border-radius: 2px;
}
.thumb-postcard > div b,
.thumb-postcard > div i {
    display: block;
    background: #ddd;
    border-radius: 1px;
}
.thumb-postcard > div b { width: 60%; height: 4px; margin-top: 4px; }
.thumb-postcard > div i { width: 40%; height: 3px; margin-top: 3px; }