/* AI Album: the P O U R blocks, the principle song lists, and the course call
   to action at the end of every album page (2026-10-20). Loaded by base.njk
   wherever `ee-album-` appears in the content.

   The blocks are the Equalizer design (Thomas, 2026-10-21): music made
   visible, a bold letter over a row of sound bars scaled to the song count.
   Text on every block passes 4.5:1: white on Signal Blue 9.16:1, navy on Amp
   Yellow 12.01:1, white on Burnt Orange 5.18:1, white on Midnight 18.01:1.
   The bars are decoration (3:1 target, lowest 3.98:1). Amp Yellow is 1.43:1
   against the white page, so it has a 2px dark gold edge (4.87:1, WCAG
   1.4.11). Space Grotesk and Atkinson Hyperlegible are used only here. */

/* ---- P O U R blocks ------------------------------------------------------ */

/* Up to 1200px wide, the gray band's own width, so the blocks line up with
   its gutter and a block is wide enough for "Understandable" at 26px. Wider
   than the 720px reading column on /album/, and centered on it. The
   .entry-content selectors outrank the page's own list rules (a 720px cap,
   and a left margin on every item). */
.ee-album-pour,
.entry-content .ee-album-pour {
    --pour-width: min(1200px, 100vw - 40px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    width: var(--pour-width);
    max-width: none;
    margin: 0 0 56px calc((100% - var(--pour-width)) / 2);
    padding: 0;
    list-style: none;
}

/* Each item is the size container, so the letter and name scale with the
   block's width (cqi), and "Understandable" fits on one line at any width. */
.ee-album-pour > li,
.entry-content .ee-album-pour > li,
.entry-content ul.ee-album-pour > li + li {
    container-type: inline-size;
    margin: 0;
    padding: 0;
}

/* Letter at the top, bars in the middle, name and count at the foot. Every
   block has a 2px edge, transparent except on Amp Yellow, so all four keep
   the same size. */
.ee-album-block {
    --eq-bar: currentColor;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 280px;
    padding: min(28px, 12cqi);
    border: 2px solid transparent;
    border-radius: 12px;
    font-family: 'Atkinson Hyperlegible', 'Lato', sans-serif;
    text-decoration: none;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}

.ee-album-block--perceivable { background: #2B3BA8; color: #FFFFFF; --eq-bar: #FFD400; }
.ee-album-block--operable { background: #FFD400; color: #14183A; --eq-bar: #14183A; border-color: #8A6E00; }
.ee-album-block--understandable { background: #C2410C; color: #FFFFFF; --eq-bar: #FFE14D; }
.ee-album-block--robust { background: #1A1033; color: #FFFFFF; --eq-bar: #C6FF3D; }

.ee-album-letter {
    font-family: 'Space Grotesk', 'Lato', sans-serif;
    font-size: min(130px, 56cqi);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
}

/* Twelve bars standing on one baseline in a 90px zone. Each bar's height
   comes from the eqBars filter; the bars narrow on a small block rather
   than overflow it. */
.ee-album-eq {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 90px;
}

.ee-album-eq > span {
    flex: 0 1 10px;
    min-width: 3px;
    border-radius: 3px;
    background: var(--eq-bar);
    transform-origin: bottom;
}

/* The name and count sit at the foot of the block, flush left. */
.ee-album-name {
    margin-top: auto;
    font-size: min(26px, 9.5cqi);
    font-weight: 700;
    line-height: 1.3;
}

/* Close under the name, not the block's 16px gap. */
.ee-album-count {
    margin-top: -12px;
    font-size: min(18px, 7cqi);
    line-height: 1.5;
}

/* "Now playing": the bars pulse only while a block is hovered or focused,
   never on their own (WCAG 2.2.2), rippling left to right. */
@keyframes ee-eq-pulse {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.55); }
}

.ee-album-block:hover .ee-album-eq > span,
.ee-album-block:focus-visible .ee-album-eq > span {
    animation: ee-eq-pulse 1.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.13s);
}

.ee-album-block:hover .ee-album-name,
.ee-album-block:focus-visible .ee-album-name {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* A deep navy ring 4px out, on the white page, so it shows the same around
   every block color (17.19:1). */
.ee-album-block:focus-visible {
    outline: 4px solid #14183A;
    outline-offset: 4px;
}

/* The principle whose page this is: a heavy rule under its block. */
.ee-album-block[aria-current="page"] {
    box-shadow: 0 8px 0 #14183A;
}

@media (prefers-reduced-motion: reduce) {
    .ee-album-block .ee-album-eq > span {
        animation: none;
    }
}

@media (forced-colors: active) {
    .ee-album-block {
        border: 2px solid LinkText;
    }

    .ee-album-eq > span {
        background: CanvasText;
    }
}

@media (max-width: 900px) {
    .ee-album-pour,
    .entry-content .ee-album-pour {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .ee-album-pour,
    .entry-content .ee-album-pour {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* ---- /album/<principle>/ ------------------------------------------------- */

.ee-album-principle {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 20px 0;
}

.album-masthead .album-criterion a {
    color: inherit;
}

.ee-album-songs {
    margin: 0 0 64px;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--ee-black);
}

.ee-album-songs > li {
    margin: 0;
    border-bottom: 1px solid var(--bg-light-gray-2);
}

.ee-album-songs a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4px 32px;
    align-items: baseline;
    padding: 16px 0;
    font-family: 'Lato', sans-serif;
    text-decoration: none;
    color: var(--ee-black);
}

.ee-album-song-name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ee-blue);
}

.ee-album-song-meta {
    font-size: 16px;
    line-height: 1.4;
    color: var(--ee-dark-gray);
}

.ee-album-songs a:hover .ee-album-song-name,
.ee-album-songs a:focus-visible .ee-album-song-name {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.ee-album-songs a:focus-visible {
    outline: 3px solid var(--ee-blue);
    outline-offset: 2px;
}

.ee-album-pour-title {
    margin: 0 0 20px;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ee-dark-gray);
}

@media (max-width: 640px) {
    .ee-album-songs a {
        grid-template-columns: minmax(0, 1fr);
    }

    .ee-album-song-name {
        font-size: 18px;
    }
}

/* ---- The course, at the end of every album page --------------------------- */

/* Brand blue, so it reads as its own band above the light gray newsletter
   band that follows on most pages. White text on brand blue is 10.9:1; the
   yellow button's focus ring keeps its white gap on blue (ee-btn.css). */
.ee-album-cta {
    margin-top: 56px;
    background: var(--ee-blue);
}

.ee-album-cta-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 48px 20px 56px;
}

.ee-album-cta h2 {
    margin: 0 0 12px;
    font-family: 'Lato', sans-serif;
    font-size: clamp(26px, 3.2vw, 34px);
    font-weight: 700;
    line-height: 1.25;
    text-align: start;
    color: #fff;
}

.ee-album-cta p {
    max-width: 62ch;
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.6;
    color: #fff;
}

/* On a principle page the blocks follow the song list, flush left at the
   page's full width rather than centered at 1200px. */
.ee-album-principle .ee-album-pour {
    --pour-width: 100%;
    margin-left: 0;
}

/* ---- A correction on a song's page (src/_data/songCorrections.js) -------- */

.ee-album-correction {
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 20px 24px;
    border-left: 6px solid var(--btn-yellow, #FFE100);
    background: var(--bg-light-gray);
    font-family: 'Lato', sans-serif;
}

.ee-album-correction h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: start;
    color: var(--ee-black);
}

.ee-album-correction p {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--ee-black);
}

@media (max-width: 680px) {
    .ee-album-correction {
        margin-inline: 20px;
    }
}