/* =====================================================
   AJAX Posts Grid — grid.css
   Tres skins: card (default), minimal, magazine
   ===================================================== */

/* ── Variables ── */
.apg-wrapper {
    --apg-accent:      #d8c496;
    --apg-accent-h:    #c9b07e;
    --apg-accent-lt:   #ebe4d8;
    --apg-radius:      3px;
    --apg-radius-sm:   2px;
    --apg-thumb-ar:    56%;
    --apg-gap:         1.5rem;
    --apg-card-bg:     #fafafa;
    --apg-card-border: #ebe4d8;
    --apg-text:        #262726;
    --apg-muted:       #7a7468;
    --apg-trans:       .22s ease;
    position:          relative;
    transition:        opacity .2s;
}

/* ── Estado de carga ── */
.apg-wrapper.apg-loading { pointer-events: none; }
.apg-wrapper.apg-loading .apg-grid,
.apg-wrapper.apg-loading .apg-pagination { opacity: .4; }

.apg-loader-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             .75rem;
    background:      rgba(250,250,250,.72);
    backdrop-filter: blur(2px);
    z-index:         10;
    border-radius:   var(--apg-radius);
    animation:       apgFadeIn .2s ease;
}

.apg-spinner {
    width:            32px;
    height:           32px;
    border:           2px solid var(--apg-accent-lt);
    border-top-color: var(--apg-accent);
    border-radius:    50%;
    animation:        apgSpin .8s linear infinite;
}

.apg-loader-text {
    font-size:  .78rem;
    color:      var(--apg-muted);
    font-style: italic;
    letter-spacing: .02em;
}

@keyframes apgSpin   { to { transform: rotate(360deg); } }
@keyframes apgFadeIn { from { opacity:0 } to { opacity:1 } }

/* ── Sin resultados ── */
.apg-no-posts {
    padding:    2rem;
    text-align: center;
    color:      var(--apg-muted);
}

/* ==============================================
   GRILLA
   ============================================== */
.apg-grid {
    display:               grid;
    gap:                   var(--apg-gap);
    grid-template-columns: repeat(1, 1fr);
    margin-bottom:         var(--apg-gap);
    animation:             apgFadeIn .3s ease;
}

@media (min-width: 640px) {
    .apg-cols-2, .apg-cols-3, .apg-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 900px) {
    .apg-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .apg-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==============================================
   SKIN: CARD (default)
   ============================================== */
.apg-skin-card .apg-card {
    background:     var(--apg-card-bg);
    border:         1px solid var(--apg-card-border);
    border-radius:  var(--apg-radius);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     box-shadow var(--apg-trans), border-color var(--apg-trans);
}
.apg-skin-card .apg-card:hover {
    box-shadow:   0 4px 20px rgba(38,39,38,.08);
    border-color: var(--apg-accent);
}

.apg-skin-card .apg-thumb {
    display:     block;
    overflow:    hidden;
    padding-top: var(--apg-thumb-ar);
    position:    relative;
}
.apg-skin-card .apg-thumb img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.apg-skin-card .apg-card:hover .apg-thumb img { transform: scale(1.03); }

.apg-skin-card .apg-body {
    padding:        1.1rem 1.2rem 1.25rem;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
}

/* ==============================================
   SKIN: MINIMAL
   ============================================== */
.apg-skin-minimal .apg-card {
    border-bottom:  1px solid var(--apg-card-border);
    padding-bottom: 1.2rem;
}
.apg-skin-minimal .apg-thumb {
    display:       block;
    overflow:      hidden;
    border-radius: var(--apg-radius);
    margin-bottom: .7rem;
}
.apg-skin-minimal .apg-thumb img {
    width:        100%;
    aspect-ratio: 16/9;
    object-fit:   cover;
    display:      block;
    transition:   filter .3s;
}
.apg-skin-minimal .apg-card:hover .apg-thumb img { filter: brightness(.94); }
.apg-skin-minimal .apg-body { gap: .35rem; }

/* ==============================================
   SKIN: MAGAZINE
   ============================================== */
.apg-skin-magazine .apg-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .apg-skin-magazine .apg-grid {
        grid-template-columns: 1fr 1fr;
    }
    .apg-skin-magazine .apg-card:first-child {
        grid-column: span 2;
    }
    .apg-skin-magazine .apg-card:first-child .apg-thumb {
        padding-top: 40%;
    }
}

.apg-skin-magazine .apg-card {
    position:      relative;
    overflow:      hidden;
    border-radius: var(--apg-radius);
    cursor:        pointer;
    background:    #262726;
}
.apg-skin-magazine .apg-thumb {
    display:     block;
    overflow:    hidden;
    padding-top: 62%;
    position:    relative;
}
.apg-skin-magazine .apg-thumb img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    .65;
    transition: opacity .4s, transform .5s;
}
.apg-skin-magazine .apg-card:hover .apg-thumb img {
    opacity:   .5;
    transform: scale(1.03);
}
.apg-skin-magazine .apg-body {
    position:       absolute;
    inset:          0;
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:        1.25rem;
    gap:            .3rem;
    color:          #fafafa;
}
.apg-skin-magazine .apg-title a    { color: #fafafa !important; }
.apg-skin-magazine .apg-excerpt,
.apg-skin-magazine .apg-meta       { color: rgba(250,250,250,.75); }
.apg-skin-magazine .apg-cat-label  {
    background:   rgba(216,196,150,.2);
    color:        var(--apg-accent) !important;
    border-color: var(--apg-accent);
}

/* ==============================================
   ELEMENTOS INTERNOS (todos los skins)
   ============================================== */
.apg-cats {
    display:  flex;
    flex-wrap: wrap;
    gap:       .35rem;
}

.apg-cat-label {
    display:         inline-block;
    font-size:       .68rem;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  .08em;
    padding:         .2em .7em;
    border-radius:   var(--apg-radius-sm);
    border:          1px solid var(--apg-accent);
    color:           var(--apg-text);
    text-decoration: none;
    transition:      background var(--apg-trans), color var(--apg-trans);
    line-height:     1.5;
}
.apg-cat-label:hover {
    background: var(--apg-accent);
    color:      var(--apg-text);
}

.apg-title {
    font-size:   1.05rem;
    font-weight: 700;
    margin:      0;
    line-height: 1.3;
}
.apg-title a {
    color:           var(--apg-text);
    text-decoration: none;
    transition:      color var(--apg-trans);
}
.apg-title a:hover { color: var(--apg-accent-h); }

.apg-excerpt {
    font-size:   .875rem;
    color:       var(--apg-muted);
    margin:      0;
    line-height: 1.6;
    flex:        1;
}

.apg-meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         .5rem;
    align-items: center;
    margin-top:  auto;
    padding-top: .5rem;
    font-size:   .75rem;
    color:       var(--apg-muted);
    letter-spacing: .01em;
}

.apg-date, .apg-author { white-space: nowrap; }
.apg-author::before { content: '·'; margin-right: .4rem; }

/* ==============================================
   PAGINACIÓN
   ============================================== */
.apg-pagination {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .75rem;
    margin-top:     1.75rem;
    animation:      apgFadeIn .3s ease;
}

.apg-page-info {
    font-size:      .75rem;
    color:          var(--apg-muted);
    letter-spacing: .02em;
}

.apg-pages {
    display:         flex;
    flex-wrap:       wrap;
    gap:             .25rem;
    align-items:     center;
    justify-content: center;
}

.apg-page-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       34px;
    height:          34px;
    padding:         0 .6rem;
    border:          1px solid var(--apg-card-border);
    border-radius:   var(--apg-radius-sm);
    background:      var(--apg-card-bg);
    color:           var(--apg-text);
    font-size:       .85rem;
    cursor:          pointer;
    transition:      background var(--apg-trans), border-color var(--apg-trans), color var(--apg-trans);
    font-family:     inherit;
    letter-spacing:  .01em;
}
.apg-page-btn:hover:not(.apg-page-active) {
    border-color: var(--apg-accent);
    background:   var(--apg-accent-lt);
    color:        var(--apg-text);
}
.apg-page-btn.apg-page-active {
    background:   var(--apg-accent);
    border-color: var(--apg-accent);
    color:        var(--apg-text);
    font-weight:  600;
    cursor:       default;
}

.apg-prev, .apg-next { font-size: 1rem; }

.apg-ellipsis {
    color:       var(--apg-muted);
    user-select: none;
    padding:     0 .2rem;
    font-size:   .85rem;
}

/* ==============================================
   MODO OSCURO
   ============================================== */
@media (prefers-color-scheme: dark) {
    .apg-wrapper {
        --apg-card-bg:     #1c1b1a;
        --apg-card-border: #332f29;
        --apg-text:        #fafafa;
        --apg-muted:       #a09880;
        --apg-accent:      #d8c496;
        --apg-accent-h:    #ebe4d8;
        --apg-accent-lt:   #2a2620;
    }
    .apg-loader-overlay { background: rgba(28,27,26,.72); }
}

/* ==============================================
   ACCESIBILIDAD
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    .apg-card,
    .apg-thumb img,
    .apg-page-btn   { transition: none !important; }
    .apg-spinner    { animation: none; border-top-color: transparent; }
    .apg-grid,
    .apg-pagination { animation: none; }
}

.apg-page-btn:focus-visible {
    outline:        2px solid var(--apg-accent);
    outline-offset: 2px;
}