/* ==========================================================
   DRIVE GALLERY — Edições passadas (v1.42.0)

   Estrutura:
   1. Layouts da seção edições (grid | carousel | timeline | masonry)
   2. Galeria inline expansível (grid de fotos com lazy load)
   3. Lightbox custom (full screen, swipe, nav)

   Performance:
   - Lazy load via IntersectionObserver (JS)
   - Animações com transform/opacity (GPU)
   - Skeleton loading
   ========================================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━ LAYOUTS DA SEÇÃO ━━━━━━━━━━━━━━━━━━━━━━ */

/* Layout: GRID (clássico — atual default) */
.edicoes-drive--grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Layout: CAROUSEL (scroll horizontal estilo Netflix) */
.edicoes-drive--carousel{
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 24px;
    padding: 4px 24px 16px;
    max-width: 100%;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(166,223,0,.5) transparent;
}
.edicoes-drive--carousel::-webkit-scrollbar{ height: 8px; }
.edicoes-drive--carousel::-webkit-scrollbar-track{ background: transparent; }
.edicoes-drive--carousel::-webkit-scrollbar-thumb{
    background: rgba(166,223,0,.4);
    border-radius: 8px;
}
.edicoes-drive--carousel::-webkit-scrollbar-thumb:hover{
    background: rgba(166,223,0,.7);
}
.edicoes-drive--carousel > .edicao-card{
    flex: 0 0 320px;
    scroll-snap-align: start;
}

/* Layout: TIMELINE (vertical com linha do tempo) */
.edicoes-drive--timeline{
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding-left: 32px;
}
.edicoes-drive--timeline::before{
    content: '';
    position: absolute;
    top: 8px; bottom: 8px;
    left: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--lime, #a6df00) 0%, rgba(166,223,0,.2) 100%);
}
.edicoes-drive--timeline > .edicao-card{
    position: relative;
    margin-bottom: 32px;
    margin-left: 0;
}
.edicoes-drive--timeline > .edicao-card::before{
    content: '';
    position: absolute;
    top: 24px;
    left: -33px;
    width: 16px; height: 16px;
    background: var(--lime, #a6df00);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--lime, #a6df00);
    z-index: 2;
}

/* Layout: MASONRY (Pinterest-style, alturas variáveis) */
.edicoes-drive--masonry{
    columns: 3 280px;
    column-gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}
.edicoes-drive--masonry > .edicao-card{
    break-inside: avoid;
    margin-bottom: 18px;
    display: inline-block;
    width: 100%;
}
.edicoes-drive--masonry .edicao-card__cover{
    height: auto;
    aspect-ratio: 4 / 3;
}
.edicoes-drive--masonry > .edicao-card:nth-child(3n) .edicao-card__cover{ aspect-ratio: 3 / 4; }
.edicoes-drive--masonry > .edicao-card:nth-child(5n) .edicao-card__cover{ aspect-ratio: 1 / 1; }

@media (max-width: 680px){
    .edicoes-drive--masonry{ columns: 1; }
    .edicoes-drive--timeline{ padding-left: 24px; }
    .edicoes-drive--timeline > .edicao-card::before{ left: -25px; width: 12px; height: 12px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━ GALERIA INLINE (Drive) ━━━━━━━━━━━━━━━━━━━━━ */

.drive-gallery{
    grid-column: 1 / -1;       /* ocupa toda a linha no layout grid */
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #ebebeb);
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
    opacity: 0;
}
.drive-gallery.is-open{
    max-height: 5000px;        /* truque pra animar de altura desconhecida */
    opacity: 1;
}
.drive-gallery[hidden]{ display: none; }

/* v1.60.7 — Layout MASONRY (CSS columns): cada foto mantém o aspect ratio REAL
   (definido inline via JS a partir do metadata width/height do Drive), então
   NADA é cortado — retrato, paisagem e quadrada aparecem inteiras. */
.drive-gallery__grid{
    column-width: 200px;
    column-gap: 8px;
    padding: 4px 0 16px;
}

.drive-gallery__item{
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 8px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    background: #f0f0ec;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
    padding: 0;
}
/* Reserva de altura até o JS definir o aspect real (e p/ os skeletons). */
.drive-gallery__item--skel{ aspect-ratio: 3 / 4; }
.drive-gallery__item:hover{
    transform: scale(1.04);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
    z-index: 1;
}
.drive-gallery__item img{
    /* v1.59.4 — BUG CRÍTICO da galeria: o .drive-gallery__skeleton é
       position:absolute e, pela ordem de pintura do CSS, ficava SEMPRE acima do
       <img> (que era estático). Resultado: a imagem carregava mas o skeleton
       cinza a cobria pra sempre. Posicionamos o img absoluto com z-index acima
       do skeleton — quando carrega (opacity:1) ele cobre o skeleton. */
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity .35s ease;
}
.drive-gallery__item img.is-loaded{ opacity: 1; }

.drive-gallery__skeleton{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f0f0ec 0%, #f7f7f3 50%, #f0f0ec 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer{
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.drive-gallery__empty,
.drive-gallery__error{
    text-align: center;
    padding: 32px 20px;
    color: var(--mid-gray, #888);
    font-size: 14px;
}
.drive-gallery__error{
    background: rgba(230, 57, 70, .06);
    border: 1px solid rgba(230, 57, 70, .25);
    border-radius: 10px;
    color: #B71C1C;
}
.drive-gallery__error i{
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

/* Botão de toggle (toggle de chevron quando aberto) */
.edicao-card__btn.is-open .ti-photo::before{ content: "\eafe"; /* ti-chevron-up tabler */ }

@media (max-width: 480px){
    .drive-gallery__grid{
        column-width: 110px;
        column-gap: 6px;
    }
    .drive-gallery__item{ margin-bottom: 6px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━ v1.45.2 — OVERLAY FULL-SCREEN DA GALERIA ━━━━━━━━━━━━━━━━━━━━━━━
   Substitui o expand inline antigo. Click "Ver fotos" → overlay full-screen
   com header (título + count + close) + grid. Click numa foto → lightbox single. */

.drive-gallery-overlay{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}
.drive-gallery-overlay[hidden]{ display: none; }

.drive-gallery-overlay__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, .85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity .3s ease;
    cursor: pointer;
}
.drive-gallery-overlay.is-open .drive-gallery-overlay__backdrop{ opacity: 1; }

.drive-gallery-overlay__box{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-body, #fff);
    transform: translateY(24px);
    opacity: 0;
    transition: transform .4s cubic-bezier(.22,1.18,.36,1), opacity .35s ease;
}
.drive-gallery-overlay.is-open .drive-gallery-overlay__box{
    transform: translateY(0);
    opacity: 1;
}
[data-theme="dark"] .drive-gallery-overlay__box{ background: #0F0F12; color: #f0f0f0; }

.drive-gallery-overlay__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-bottom: 1px solid var(--border, #ebebeb);
    flex-shrink: 0;
}
[data-theme="dark"] .drive-gallery-overlay__head{ border-bottom-color: rgba(255,255,255,.08); }
.drive-gallery-overlay__title{
    margin: 0 0 4px;
    font-family: var(--font-display, 'Bangers', cursive);
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--text-primary, #1a1a1a);
}
[data-theme="dark"] .drive-gallery-overlay__title{ color: #fff; }
.drive-gallery-overlay__count{
    margin: 0;
    font-size: 13px;
    color: var(--mid-gray, #888);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
}
.drive-gallery-overlay__close{
    width: 42px;
    height: 42px;
    border: none;
    background: var(--bg-body, #fff);
    border: 1px solid var(--border, #ebebeb);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-primary, #1a1a1a);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s, color .2s;
}
.drive-gallery-overlay__close:hover{
    background: var(--text-primary, #1a1a1a);
    color: var(--bg-body, #fff);
    transform: rotate(90deg);
}
[data-theme="dark"] .drive-gallery-overlay__close{
    background: #1a1a1a;
    border-color: rgba(255,255,255,.1);
    color: #f0f0f0;
}
[data-theme="dark"] .drive-gallery-overlay__close:hover{
    background: #fff;
    color: #1a1a1a;
}

.drive-gallery-overlay__body{
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px 40px;
    -webkit-overflow-scrolling: touch;
}

/* Reusa o grid da galeria existente mas com colunas maiores no overlay */
.drive-gallery-overlay__body .drive-gallery__grid{
    column-width: 240px;
    column-gap: 12px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}
.drive-gallery-overlay__body .drive-gallery__item{ margin-bottom: 12px; }

@media (max-width: 720px){
    .drive-gallery-overlay__head{ padding: 14px 18px; }
    .drive-gallery-overlay__title{ font-size: 22px; }
    .drive-gallery-overlay__count{ font-size: 11.5px; }
    .drive-gallery-overlay__close{ width: 38px; height: 38px; }
    .drive-gallery-overlay__body{ padding: 16px 14px 24px; }
    .drive-gallery-overlay__body .drive-gallery__grid{
        column-width: 150px;
        column-gap: 6px;
    }
    .drive-gallery-overlay__body .drive-gallery__item{ margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce){
    .drive-gallery-overlay__backdrop,
    .drive-gallery-overlay__box,
    .drive-gallery-overlay__close{
        transition: none !important;
        transform: none !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━ LIGHTBOX FULL-SCREEN ━━━━━━━━━━━━━━━━━━━━━━━ */

.drive-lightbox{
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.92);
    animation: lb-fade-in .25s ease-out;
}
.drive-lightbox[hidden]{ display: none; }
@keyframes lb-fade-in{
    from { opacity: 0; }
    to   { opacity: 1; }
}

.drive-lightbox__overlay{
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.drive-lightbox__viewport{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
}

.drive-lightbox__img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(.96);
    transition: opacity .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    border-radius: 4px;
    pointer-events: auto;
}
.drive-lightbox__img.is-loaded{
    opacity: 1;
    transform: scale(1);
}

.drive-lightbox__spinner{
    position: absolute;
    top: 50%; left: 50%;
    width: 48px; height: 48px;
    margin: -24px 0 0 -24px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: var(--lime, #a6df00);
    border-radius: 50%;
    animation: lb-spin .8s linear infinite;
}
@keyframes lb-spin{ to { transform: rotate(360deg); } }

.drive-lightbox__close,
.drive-lightbox__nav{
    position: absolute;
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    z-index: 2;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.drive-lightbox__close:hover,
.drive-lightbox__nav:hover{
    background: rgba(255,255,255,.22);
    transform: scale(1.08);
}

.drive-lightbox__close{
    top: 18px; right: 18px;
    width: 48px; height: 48px;
}
.drive-lightbox__nav{
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
}
.drive-lightbox__nav:hover{ transform: translateY(-50%) scale(1.08); }
.drive-lightbox__nav--prev{ left: 18px; }
.drive-lightbox__nav--next{ right: 18px; }

.drive-lightbox__counter{
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 600;
    background: rgba(0,0,0,.4);
    padding: 8px 16px;
    border-radius: 50px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2;
}

@media (max-width: 640px){
    .drive-lightbox__viewport{ padding: 50px 16px; }
    .drive-lightbox__close{ width: 40px; height: 40px; top: 14px; right: 14px; }
    .drive-lightbox__nav{ width: 44px; height: 44px; }
    .drive-lightbox__nav--prev{ left: 10px; }
    .drive-lightbox__nav--next{ right: 10px; }
    .drive-lightbox__counter{ bottom: 16px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
    .drive-lightbox,
    .drive-lightbox__img,
    .drive-gallery,
    .drive-gallery__item img{
        animation: none !important;
        transition: none !important;
    }
}

/* ══════════════ SOCIAL (curtidas + comentários) — v1.60.0 ══════════════ */

/* Overlay de stats no card da grade */
/* v1.60.6 — Marcadores SEMPRE visíveis (não dependem de hover): permite
   identificar de relance as fotos mais curtidas/comentadas. O hover só
   intensifica levemente o gradiente. */
.drive-gallery__stats{
    position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 2; display: flex; gap: 6px; align-items: center;
    padding: 8px; transition: background .2s ease, opacity .2s ease;
    background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
    pointer-events: none;
}
/* Fotos com curtidas/comentários destacam (opacidade cheia); as sem engajamento
   ficam levemente atenuadas — continuam visíveis, mas as populares saltam. */
.drive-gallery__item:not(.has-engagement) .drive-gallery__stats{ opacity: .55; }
.drive-gallery__item:hover .drive-gallery__stats{
    opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
}

.drive-gallery__like, .drive-gallery__cc{
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 700; color: #fff; line-height: 1;
    pointer-events: auto;
}
.drive-gallery__cc{ color: #fff; opacity: .92; }
/* v1.60.4 — ícones SVG sempre crisp: não encolhem no flex + cantos arredondados. */
.drive-gallery__stats svg,
.drive-lightbox__bar svg,
.dg-top__likes svg{ display: block; flex: 0 0 auto; stroke-linejoin: round; stroke-linecap: round; }
.drive-gallery__like{
    background: rgba(0,0,0,.35); border: 0; cursor: pointer;
    padding: 5px 9px; border-radius: 50px; transition: transform .12s, background .15s;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.drive-gallery__like svg{ fill: rgba(255,255,255,.35); stroke: #fff; stroke-width: 1.6; }
.drive-gallery__like.is-liked svg{ fill: #ff3040; stroke: #ff3040; }
.drive-gallery__like:hover{ transform: scale(1.08); background: rgba(0,0,0,.5); }
.drive-gallery__like:active{ transform: scale(.92); }

/* Barra inferior do lightbox */
.drive-lightbox__bar{
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    z-index: 3; display: flex; gap: 10px; align-items: center;
}
.dg-lb-like, .dg-lb-cc-toggle{
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(20,20,20,.7); color: #fff; border: 1px solid rgba(255,255,255,.18);
    padding: 9px 16px; border-radius: 50px; cursor: pointer; font-size: 14px; font-weight: 700;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .12s, background .15s;
}
.dg-lb-like svg{ fill: rgba(255,255,255,.3); stroke: #fff; stroke-width: 1.4; }
.dg-lb-like.is-liked svg{ fill: #ff3040; stroke: #ff3040; }
.dg-lb-like:hover, .dg-lb-cc-toggle:hover{ background: rgba(40,40,40,.85); }
.dg-lb-like:active{ transform: scale(.93); }

/* Drawer de comentários (direita no desktop, fundo no mobile) */
.drive-lightbox__drawer{
    position: absolute; top: 0; right: 0; bottom: 0; width: 380px; max-width: 90vw;
    z-index: 4; background: var(--hp-card, #fff); color: var(--charcoal, #1a1a1a);
    display: flex; flex-direction: column;
    transform: translateX(105%); transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: -8px 0 28px rgba(0,0,0,.28);
}
.drive-lightbox__drawer.is-open{ transform: translateX(0); }
/* v1.60.5 — com o painel aberto (desktop), a foto desloca pra esquerda pra não
   ficar atrás do drawer; a barra de ações acompanha o centro da área da foto. */
@media (min-width: 641px){
    .drive-lightbox__viewport,
    .drive-lightbox__bar{ transition: padding .28s cubic-bezier(.4,0,.2,1), left .28s cubic-bezier(.4,0,.2,1); }
    .drive-lightbox.drawer-open .drive-lightbox__viewport{ padding-right: 396px; }
    .drive-lightbox.drawer-open .drive-lightbox__bar{ left: calc(50% - 190px); }
}
.dg-drawer__head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--hp-border, #ececec); flex: 0 0 auto;
}
.dg-drawer__head strong{ font-size: 16px; }
.dg-drawer__close{ background: transparent; border: 0; cursor: pointer; color: inherit; padding: 4px; line-height: 0; }

.dg-comments{ flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.dg-comments__empty, .dg-comments__loading{ color: var(--mid-gray, #777); font-size: 14px; text-align: center; margin-top: 20px; }
.dg-comment{ display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.dg-comment__avatar{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.dg-comment__body{ flex: 1; min-width: 0; }
.dg-comment__head{ display: flex; align-items: center; gap: 8px; font-size: 13px; }
.dg-comment__head strong{ font-weight: 700; }
.dg-comment__time{ color: var(--mid-gray, #999); font-size: 11px; }
.dg-comment__del, .dg-comment__report{
    margin-left: auto; background: transparent; border: 0; cursor: pointer;
    color: var(--mid-gray, #999); font-size: 13px; line-height: 1; padding: 2px 4px;
}
.dg-comment__del:hover{ color: #d63638; }
.dg-comment__report:hover{ color: #FF8C42; }
.dg-comment__text{ margin: 3px 0 0; font-size: 14px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }

.dg-comment-form{ flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-start; padding: 12px 16px; border-top: 1px solid var(--hp-border, #ececec); }
.dg-cf-avatar{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.dg-comment-form textarea{
    flex: 1; resize: vertical; min-height: 40px; max-height: 140px;
    border: 1px solid var(--hp-border, #ddd); border-radius: 10px; padding: 9px 11px;
    font: inherit; font-size: 14px;
}
.dg-cf-send{
    background: var(--lime, #a6df00); color: var(--dark, #1a1a1a); border: 0; cursor: pointer;
    padding: 9px 16px; border-radius: 10px; font-weight: 700; align-self: stretch;
}
.dg-cf-send:disabled{ opacity: .6; cursor: default; }
.dg-comment-form--guest{ display: block; text-align: center; color: var(--mid-gray, #777); font-size: 14px; }
.dg-comment-form--guest a{ color: var(--lime-dark, #5B7A00); font-weight: 700; }

@media (max-width: 640px){
    .drive-lightbox__drawer{ width: 100%; max-width: 100%; top: auto; height: 78vh; border-radius: 18px 18px 0 0; transform: translateY(105%); }
    .drive-lightbox__drawer.is-open{ transform: translateY(0); }
    .drive-lightbox__bar{ bottom: 12px; }
}

/* ── Faixa "Mais curtidas" da edição (v1.60.1) ── */
.drive-gallery__top{ margin: 0 0 22px; }
.dg-top__title{
    font-family: var(--font-display, inherit); font-size: 16px; letter-spacing: .5px;
    margin: 0 0 10px; color: var(--charcoal, #1a1a1a);
}
.dg-top__row{
    display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.dg-top__item{
    position: relative; flex: 0 0 auto; width: 140px; aspect-ratio: 1/1;
    border: 0; padding: 0; cursor: pointer; border-radius: 14px; overflow: hidden;
    background: #f0f0ec; scroll-snap-align: start; transition: transform .15s, box-shadow .15s;
}
.dg-top__item:nth-child(1){ width: 168px; outline: 2px solid var(--lime, #a6df00); outline-offset: -2px; }
.dg-top__item img{ width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.dg-top__item:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.dg-top__crown{
    position: absolute; top: 6px; left: 6px; font-size: 16px; line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.dg-top__likes{
    position: absolute; bottom: 6px; right: 6px; z-index: 1;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700;
    padding: 3px 8px; border-radius: 50px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.dg-top__likes svg{ fill: #ff3040; }
@media (max-width: 640px){
    .dg-top__item{ width: 116px; }
    .dg-top__item:nth-child(1){ width: 132px; }
}