/* ==========================================================================
   Alphabetical Category Posts v2.0.1 – Frontend Styles
   ========================================================================== */

.acp-wrapper {
    --acp-font:               Georgia, 'Times New Roman', serif;
    --acp-font-mono:          'Courier New', Courier, monospace;

    --acp-color-bg:           #ffffff;
    --acp-color-surface:      #f5f5f3;
    --acp-color-border:       #e0deda;
    --acp-color-text:         #1a1a1a;
    --acp-color-muted:        #888880;
    --acp-color-accent:       #1a1a1a;
    --acp-color-accent-fg:    #ffffff;
    --acp-color-link:         #1a1a1a;
    --acp-color-link-hover:   #444440;
    --acp-color-ph-bg:        #e8e8e4;
    --acp-color-ph-fg:        #aaa;
    --acp-radius:             4px;
    --acp-gap:                1rem;
    --acp-cols:               5;

    font-family: var(--acp-font);
    color:       var(--acp-color-text);
    box-sizing:  border-box;
}

*, *::before, *::after { box-sizing: inherit; }

/* ── Navigation ────────────────────────────────────────────────────────── */
.acp-nav {
    display:       flex;
    flex-wrap:     wrap;
    gap:           3px;
    padding:       1rem 0 1.25rem;
    border-top:    2px solid var(--acp-color-accent);
    border-bottom: 1px solid var(--acp-color-border);
    margin-bottom: 1rem;
}

.acp-nav__item {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       2.1rem;
    height:          2.1rem;
    padding:         0 .35rem;
    font-family:     var(--acp-font-mono);
    font-size:       .75rem;
    font-weight:     700;
    letter-spacing:  .04em;
    background:      transparent;
    color:           var(--acp-color-text);
    border:          1px solid var(--acp-color-border);
    border-radius:   var(--acp-radius);
    cursor:          pointer;
    transition:      background .13s, color .13s, border-color .13s;
    position:        relative;
    line-height:     1;
}

.acp-nav__item:hover:not(:disabled),
.acp-nav__item:focus-visible {
    background:   var(--acp-color-accent);
    color:        var(--acp-color-accent-fg);
    border-color: var(--acp-color-accent);
    outline:      none;
}

.acp-nav__item.is-active {
    background:   var(--acp-color-accent);
    color:        var(--acp-color-accent-fg);
    border-color: var(--acp-color-accent);
}

.acp-nav__all {
    min-width:     3rem;
    font-size:     .65rem;
    letter-spacing:.08em;
}

.acp-nav__item.is-inactive {
    opacity: .35;
    cursor:  default;
}

.acp-nav__item.is-hidden {
    display: none;
}

.acp-nav__count {
    font-size:     .55em;
    font-weight:   400;
    vertical-align:super;
    margin-left:   1px;
    opacity:       .8;
}

/* ── Filter bar ────────────────────────────────────────────────────────── */
.acp-filter-bar {
    display:       flex;
    align-items:   center;
    gap:           .75rem;
    min-height:    2rem;
    margin-bottom: 1rem;
    font-family:   var(--acp-font-mono);
    font-size:     .78rem;
    color:         var(--acp-color-muted);
}

.acp-filter-bar[hidden] { display: none; }

.acp-filter-bar__text {
    font-style: italic;
}

.acp-filter-bar__clear {
    background:    transparent;
    border:        1px solid var(--acp-color-border);
    border-radius: var(--acp-radius);
    padding:       .2rem .6rem;
    font-family:   var(--acp-font-mono);
    font-size:     .7rem;
    color:         var(--acp-color-muted);
    cursor:        pointer;
    transition:    border-color .13s, color .13s;
}
.acp-filter-bar__clear:hover {
    border-color: var(--acp-color-text);
    color:        var(--acp-color-text);
}

/* ── Grid ──────────────────────────────────────────────────────────────── */
.acp-grid {
    list-style:           none;
    margin:               0;
    padding:              0;
    display:              grid;
    grid-template-columns:repeat( var(--acp-cols), 1fr );
    gap:                  var(--acp-gap);
    align-items:          start;
}

/* ── Letter divider — full-width row ───────────────────────────────────── */
.acp-divider {
    grid-column:      1 / -1;
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          .45rem 0 .4rem;
    margin-top:       1rem;
    border-bottom:    2px solid var(--acp-color-border);
    scroll-margin-top:5rem;
}

.acp-divider:first-child { margin-top: 0; }

.acp-divider__letter {
    font-family:   var(--acp-font-mono);
    font-size:     clamp(1.8rem, 4vw, 3rem);
    font-weight:   900;
    line-height:   1;
    letter-spacing:-.02em;
}

.acp-back-to-top {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:  2rem;
    height: 2rem;
    font-size:       .85rem;
    color:           var(--acp-color-muted);
    text-decoration: none;
    border:          1px solid var(--acp-color-border);
    border-radius:   50%;
    flex-shrink:     0;
    transition:      border-color .13s, color .13s;
}
.acp-back-to-top:hover {
    color:        var(--acp-color-text);
    border-color: var(--acp-color-text);
}

/* ── Post card ─────────────────────────────────────────────────────────── */
.acp-card {
    display:       flex;
    flex-direction:column;
}

.acp-card__link {
    display:        flex;
    flex-direction: column;
    text-decoration:none;
    color:          inherit;
    border-radius:  var(--acp-radius);
    overflow:       hidden;
    transition:     transform .18s, box-shadow .18s;
    height:         100%;
}

.acp-card__link:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
}

/* Square image via padding-top trick */
.acp-card__image {
    position:    relative;
    width:       100%;
    padding-top: 100%;
    overflow:    hidden;
    background:  var(--acp-color-ph-bg);
    margin:      0;
    flex-shrink: 0;
}

.acp-card__image img {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center;
    display:         block;
    transition:      transform .3s ease;
}

.acp-card__link:hover .acp-card__image img {
    transform: scale(1.05);
}

.acp-card__placeholder {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--acp-font-mono);
    font-size:       clamp(1.5rem, 3vw, 2.5rem);
    font-weight:     900;
    color:           var(--acp-color-ph-fg);
    background:      var(--acp-color-ph-bg);
    user-select:     none;
}

.acp-card__body {
    display:        flex;
    flex-direction: column;
    gap:            .2rem;
    padding:        .5rem .5rem .55rem;
    background:     var(--acp-color-bg);
    border:         1px solid var(--acp-color-border);
    border-top:     none;
    flex:           1;
}

.acp-card__title {
    font-family:        var(--acp-font);
    font-size:          .78rem;
    font-weight:        600;
    line-height:        1.35;
    color:              var(--acp-color-link);
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

.acp-card__link:hover .acp-card__title {
    color: var(--acp-color-link-hover);
}

.acp-card__date {
    font-family:   var(--acp-font-mono);
    font-size:     .62rem;
    color:         var(--acp-color-muted);
    letter-spacing:.02em;
}

.acp-card__excerpt {
    margin:             .25rem 0 0;
    font-size:          .7rem;
    line-height:        1.45;
    color:              var(--acp-color-muted);
    display:            -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* ── Loader ────────────────────────────────────────────────────────────── */
.acp-sentinel {
    height:     1px;
    margin-top: 1rem;
}

.acp-loader {
    display:         flex;
    justify-content: center;
    gap:             .5rem;
    padding:         1.75rem 0;
}

.acp-loader[hidden] { display: none; }

.acp-loader__dot {
    width:         .55rem;
    height:        .55rem;
    border-radius: 50%;
    background:    var(--acp-color-border);
    animation:     acp-bounce 1.1s ease-in-out infinite;
}
.acp-loader__dot:nth-child(2) { animation-delay: .18s; }
.acp-loader__dot:nth-child(3) { animation-delay: .36s; }

@keyframes acp-bounce {
    0%, 80%, 100% { transform: scale(.65); opacity: .35; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* ── End message ───────────────────────────────────────────────────────── */
.acp-end-msg {
    text-align:    center;
    font-family:   var(--acp-font-mono);
    font-size:     .72rem;
    color:         var(--acp-color-muted);
    letter-spacing:.05em;
    padding:       1.5rem 0 .5rem;
    margin:        0;
}
.acp-end-msg[hidden] { display: none; }

/* ── Smooth scroll ─────────────────────────────────────────────────────── */
html:has(.acp-wrapper) { scroll-behavior: smooth; }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════*/

@media (max-width: 1100px) { .acp-wrapper { --acp-cols: 4; } }
@media (max-width: 780px)  { .acp-wrapper { --acp-cols: 3; } }

@media (max-width: 520px) {
    .acp-wrapper {
        --acp-cols: 2;
        --acp-gap:  .6rem;
    }
    .acp-nav__item { min-width: 1.8rem; height: 1.8rem; font-size: .65rem; }
    .acp-nav__all  { min-width: 2.4rem; }
}

/* ── Dark mode ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .acp-wrapper {
        --acp-color-bg:        #111110;
        --acp-color-surface:   #1b1b1a;
        --acp-color-border:    #2c2c2a;
        --acp-color-text:      #e6e6e2;
        --acp-color-muted:     #6a6a65;
        --acp-color-accent:    #e6e6e2;
        --acp-color-accent-fg: #111110;
        --acp-color-link:      #e6e6e2;
        --acp-color-link-hover:#b0b0a8;
        --acp-color-ph-bg:     #222220;
        --acp-color-ph-fg:     #555550;
    }
}