/* ==========================================================================
   GRID — Sistema de tiles
   4 colunas, gap 32px, container max 1729px
   ========================================================================== */

.posts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-grid);
}

/* ==========================================================================
   TILES — Base compartilhada
   ========================================================================== */

.tile {
    position: relative;
    overflow: hidden;
    /* frame de conteúdo opaco: cobre a textura de pontos do body (Figma) */
    background-color: var(--color-bg);
}

.tile--image .tile__media,
.tile--imageSwitch .tile__media,
.tile--issue .tile__media {
    aspect-ratio: 1;
    overflow: hidden;
}

.tile__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.tile__media {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.tile__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.tile__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
}

.tile__label {
    font-size: var(--font-size-button);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.tile__title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: var(--font-size-h1);
    line-height: var(--line-height-default);
}

.tile__subtitle {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: var(--font-size-excerpt);
    line-height: var(--line-height-excerpt);
    color: var(--color-on-primary-70);
}

.tile__author,
.tile__date {
    font-size: var(--font-size-excerpt);
    color: var(--color-on-primary-60);
}

/* ==========================================================================
   TILE: image — expande no hover
   ========================================================================== */

.tile--image {
    transition: transform 0.3s ease;
    transform-origin: top center;
}

.tile--image:hover {
    transform: scale(1.03);
    z-index: 2;
}

/* ==========================================================================
   TILE: imageSwitch — troca imagem no hover
   ========================================================================== */

.tile--imageSwitch .tile__media--switch {
    position: relative;
}

.tile--imageSwitch .tile__img--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* só esconde a default no hover SE existir a imagem de hover (2ª do conteúdo);
   sem 2ª imagem o tile não "some" — mantém a default */
.tile--imageSwitch:has(.tile__img--hover):hover .tile__img--default {
    opacity: 0;
}

.tile--imageSwitch:hover .tile__img--hover {
    opacity: 1;
}

/* ==========================================================================
   TILE: text — aumenta gap no hover
   ========================================================================== */

.tile--text .tile__info--text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    justify-content: center;
    overflow: hidden; /* nunca deixa o conteúdo estourar a célula do grid */
}

.tile__quote {
    border-left: 2px solid var(--color-on-primary-40);
    padding-left: 12px;
    margin-left: 24px;
    transition: border-color 0.25s ease;
}

.tile--text:hover .tile__quote {
    border-color: var(--color-accent);
}

.tile__excerpt {
    font-family: var(--font-primary);
    font-size: var(--font-size-excerpt);
    line-height: var(--line-height-body);
    color: var(--color-on-primary-80);
    /* limita o texto do tile: mostra menos e nunca quebra o grid */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    overflow-wrap: break-word;
}

.tile__text-footer {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tile__text-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tile__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ==========================================================================
   TILE: imageStack — parallax + expand no hover
   JS controla o parallax via data-tile="imagestack"
   ========================================================================== */

.tile--imageStack {
    overflow: visible;
}

.tile--imageStack .tile__info {
    text-align: center;
}

.tile--imageStack .tile__stack {
    position: relative;
    aspect-ratio: 1;
}

.tile__stack-layer {
    position: absolute;
    width: 78%;
    height: 78%;
    top: 11%;
    left: 11%;
    will-change: transform;
    transition: transform 0.4s ease;
}

.tile__stack-layer .tile__img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.tile__stack-layer--1 { z-index: 3; transform: rotate(5deg); }
.tile__stack-layer--2 { z-index: 2; transform: rotate(-4deg); }
.tile__stack-layer--3 { z-index: 1; transform: rotate(-11deg); }

.tile--imageStack:hover .tile__stack-layer--1 { transform: rotate(8deg) translate(10px, -8px); }
.tile--imageStack:hover .tile__stack-layer--2 { transform: rotate(-2deg) translate(-12px, 4px); }
.tile--imageStack:hover .tile__stack-layer--3 { transform: rotate(-13deg) translate(4px, 10px); }

/* ==========================================================================
   TILE: issue — expande no hover (igual ao image)
   ========================================================================== */

.tile--issue {
    transition: transform 0.3s ease;
    transform-origin: top center;
}

.tile--issue:hover {
    transform: scale(1.03);
    z-index: 2;
}

.tile__label--year {
    color: var(--color-on-primary-60);
    font-weight: 400;
    text-transform: none;
}

/* ==========================================================================
   TILE: logo — ocupa 2 colunas, canto superior esquerdo
   ========================================================================== */

.tile--logo {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    min-height: 320px;
}

.tile__logo-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tile__logo-img {
    width: 84%;
    height: auto;
    display: block;
}

.tile__logo-edicao {
    font-family: var(--font-primary);
    font-size: var(--font-size-button);
    font-weight: 400;
    color: var(--color-on-primary-50);
    white-space: nowrap;
}

/* ==========================================================================
   TAMANHOS VARIÁVEIS — só no grid da Zine (home). Volumes/tag: inalterados.
   dense = posts menores posteriores tapam buracos; a ordem numérica segue
   sendo o critério de sequência. aspect-ratio por span mantém as rows alinhadas
   (media 2×larga = metade da altura; 1×2 = dobro; 2×2 = quadrado grande).
   ========================================================================== */

.home-grid {
    grid-auto-flow: row dense;
    /* ponytail: rows por conteúdo (auto), não fixas. Alinhamento perfeito exigiria
       masonry (sem suporte estável) — com info-block de altura variável + colunas
       fluidas, um span vertical pode deixar ~1 info-block de vão. dense tapa as
       CÉLULAS vazias; para rows cravadas, migrar a info p/ overlay sobre a media. */
}

.home-grid .tile--w2  { grid-column: span 2; }
.home-grid .tile--h2  { grid-row: span 2; }
.home-grid .tile--big { grid-column: span 2; grid-row: span 2; }

.home-grid .tile--w2 .tile__media,
.home-grid .tile--w2 .tile__stack  { aspect-ratio: 2 / 1; }
.home-grid .tile--h2 .tile__media,
.home-grid .tile--h2 .tile__stack  { aspect-ratio: 1 / 2; }
.home-grid .tile--big .tile__media,
.home-grid .tile--big .tile__stack { aspect-ratio: 1 / 1; }

/* ==========================================================================
   PAGER — paginação da tag view (setas circulares, canto inferior esquerdo)
   ========================================================================== */

.pager {
    position: fixed;
    bottom: 24px;
    left: 24px;
    display: flex;
    gap: 8px;
    z-index: 50;
}

.pager a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-text);
    color: var(--color-surface);
    font-family: var(--font-primary);
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.pager a:hover {
    transform: scale(1.06);
    opacity: 0.9;
}

/* ==========================================================================
   RESPONSIVIDADE
   ========================================================================== */

@media (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .posts-grid {
        grid-template-columns: 1fr;
    }
    /* sem isto o span 2 do logo cria uma 2ª coluna implícita de 0px
       e metade dos posts (os que caem nela) fica com largura 0 = invisível */
    .tile--logo {
        grid-column: auto;
    }
    /* 1 coluna: tudo vira 1×1 de largura única — sem spans nem altura dupla */
    .home-grid .tile--w2,
    .home-grid .tile--h2,
    .home-grid .tile--big {
        grid-column: auto;
        grid-row: auto;
    }
    .home-grid .tile--w2 .tile__media, .home-grid .tile--w2 .tile__stack,
    .home-grid .tile--h2 .tile__media, .home-grid .tile--h2 .tile__stack,
    .home-grid .tile--big .tile__media, .home-grid .tile--big .tile__stack {
        aspect-ratio: 1 / 1;
    }
}