/**
 * BookPressed — Archive Styles
 * Three layouts driven by post type, all in one stylesheet.
 * Enqueue on is_home() || is_archive() via functions.php.
 *
 *   .bk-*   → wpws_content    (book spines)
 *   .rc-*   → bprace_content  (race cards)
 *   .np-*   → WP posts        (newspaper)
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=Barlow+Condensed:wght@700;800;900&family=Barlow:wght@400;600&family=UnifrakturMaguntia&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   SHARED: reset the Olympus loop wrapper
   post-list / row → plain flex column so each layout controls itself
   ══════════════════════════════════════════════════════════════════════ */
.post-list,
.blog-wrap .row,
.blog-archive .row,
.sorting-container.row {
    display:        flex !important;
    flex-direction: column !important;
    gap:            0 !important;
    padding:        0 !important;
    background:     none !important;
    list-style:     none !important;
}

/* Remove pseudo-elements from previous bookshelf attempts */
.post-list::before, .post-list::after,
.blog-wrap .row::before, .blog-wrap .row::after { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   ██████╗  ██████╗  ██████╗ ██╗  ██╗
   ██╔══██╗██╔═══██╗██╔═══██╗██║ ██╔╝
   ██████╔╝██║   ██║██║   ██║█████╔╝
   ██╔══██╗██║   ██║██║   ██║██╔═██╗
   ██████╔╝╚██████╔╝╚██████╔╝██║  ██╗
   ╚═════╝  ╚═════╝  ╚═════╝ ╚═╝  ╚═╝

   BOOK SPINES — wpws_content
   Shelf sits inside its own wrapper that we inject around the
   bk-wrap elements using a little JS at the bottom of this file.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   BOOK SPINES — wpws_content
   
   When the loop contains books, override .post-list to be a flex ROW
   (wrapping) with align-items:flex-end so books grow UPWARD from bottom.
   Each visual wrap-row naturally sits on its own plank via the
   .bk-shelf-bg pseudo trick — we use a row-gap and background on the
   post-list itself.
   
   No JS needed for the basic layout. JS only adds the planks.
   ══════════════════════════════════════════════════════════════════════ */

/* When the list has books, switch to horizontal wrapping shelf layout */
.post-list:has(.bk-wrap),
.blog-wrap .row:has(.bk-wrap),
.blog-archive .row:has(.bk-wrap),
.sorting-container.row:has(.bk-wrap) {
    display:        flex !important;
    flex-direction: row !important;        /* HORIZONTAL — books side by side */
    flex-wrap:      wrap !important;       /* wrap to next row when full */
    align-items:    flex-end !important;   /* anchor bottoms → books grow UP */
    align-content:  flex-start !important;
    gap:            36px 3px !important;   /* row-gap=36px (plank space), col-gap=3px */
    padding:        24px 20px !important;
    background:     #ede2cc !important;
    background-image: repeating-linear-gradient(
        90deg, transparent, transparent 200px,
        rgba(160,120,70,0.07) 200px, rgba(160,120,70,0.07) 202px
    ) !important;
    position:       relative !important;
}

/* Planks are injected as .bk-plank divs by the JS between wrap-rows */
.bk-plank {
    width:         100%;
    height:        18px;
    flex-basis:    100%;    /* forces it to its own row */
    flex-shrink:   0;
    flex-grow:     0;
    background:
        repeating-linear-gradient(90deg, transparent, transparent 80px,
            rgba(0,0,0,0.06) 80px, rgba(0,0,0,0.06) 82px),
        linear-gradient(180deg, #d4a96a 0%, #b8864a 35%, #9a6c30 65%, #7a5020 100%);
    box-shadow:    0 5px 16px rgba(0,0,0,0.45), inset 0 2px 0 rgba(255,255,255,0.15);
    border-radius: 0 0 3px 3px;
    margin-top:    -32px;   /* pull up to sit directly under the row of books */
    margin-bottom: 12px;
    position:      relative;
    z-index:       5;
}

.bk-wrap {
    position:    relative;
    z-index:     1;
    display:     inline-block;
    width:       52px;
    height:      var(--bk-h, 230px);
    perspective: 800px;
    flex-shrink: 0;
    align-self:  flex-end;   /* each book anchors to bottom of its row */
}
.bk-wrap:hover { z-index: 200; }

.bk-book {
    display:          block;
    height:           100%;
    width:            52px;
    position:         relative;
    transform-style:  preserve-3d;
    transform-origin: left center;
    transition:       transform .45s cubic-bezier(.23,1,.32,1), box-shadow .45s ease;
    text-decoration:  none;
    cursor:           pointer;
    box-shadow: -3px 0 8px rgba(0,0,0,.4), 2px 0 4px rgba(0,0,0,.15);
}

.bk-spine {
    position:        absolute; inset: 0;
    background:      var(--bk-bg, #3b2a1a);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 6px;
    overflow:        hidden;
    border-top:    8px solid var(--bk-band, #7a5020);
    border-bottom: 5px solid var(--bk-band, #7a5020);
}
.bk-spine::after {
    content: ''; position: absolute; top: 0; right: 0;
    width: 4px; height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 60%, transparent 100%);
    pointer-events: none;
}

.bk-spine__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 13px; font-weight: 700;
    color: rgba(255,255,255,.95);
    writing-mode: vertical-rl; text-orientation: mixed;
    text-transform: uppercase; letter-spacing: .1em;
    line-height: 1.2; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; max-height: 150px;
    flex: 1; text-align: center;
}
.bk-spine__author {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,.7); writing-mode: vertical-rl;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-height: 80px; letter-spacing: .05em;
}
.bk-spine__year {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 9px; font-weight: 600;
    color: rgba(255,255,255,.5); writing-mode: vertical-rl;
    letter-spacing: .04em;
}

.bk-cover {
    position: absolute; top: 0; left: 52px;
    width: 0; height: 100%;
    overflow: hidden; background: var(--bk-bg, #3b2a1a);
    opacity: 0; display: flex; flex-direction: column;
    box-shadow: 6px 0 18px rgba(0,0,0,.35);
    transition: width 0s linear .45s, opacity .15s ease .35s;
}
.bk-cover__img { width: 100%; height: 120px; overflow: hidden; flex-shrink: 0; }
.bk-cover__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; }
.bk-cover__body {
    padding: 14px 16px 16px; flex: 1;
    display: flex; flex-direction: column; gap: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bk-bg) 0%, rgba(0,0,0,.2) 100%);
}
.bk-cover__cat {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
    color: var(--bk-band, #d4a96a); font-style: italic;
}
.bk-cover__level {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    padding: 2px 8px; border-radius: 2px;
    align-self: flex-start;
}
.bk-cover__level--beginner     { background: #c0392b; color: #fff; }
.bk-cover__level--intermediate { background: #b7770d; color: #fff; }
.bk-cover__level--advanced     { background: #1a5276; color: #fff; }

.bk-cover__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 17px; font-weight: 700; color: #fff;
    line-height: 1.3; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-cover__excerpt {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 14px; font-weight: 400; color: rgba(255,255,255,.82);
    line-height: 1.6; margin: 0; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-cover__cta {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .12em; color: var(--bk-band, #d4a96a);
    align-self: flex-end; margin-top: auto;
}

.bk-wrap:hover .bk-book {
    transform: rotateY(-20deg) translateX(8px);
    box-shadow: -8px 2px 20px rgba(0,0,0,.5), 8px 0 12px rgba(0,0,0,.2);
}
.bk-wrap:hover .bk-cover {
    width: 200px; opacity: 1;
    transition: width .42s cubic-bezier(.23,1,.32,1) .04s, opacity .28s ease .08s;
}

/* ══════════════════════════════════════════════════════════════════════
   ██████╗  █████╗  ██████╗███████╗
   ██╔══██╗██╔══██╗██╔════╝██╔════╝
   ██████╔╝███████║██║     █████╗
   ██╔══██╗██╔══██║██║     ██╔══╝
   ██║  ██║██║  ██║╚██████╗███████╗
   ╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝╚══════╝

   RACE CARDS — bprace_content
   ══════════════════════════════════════════════════════════════════════ */

/* ── Race action buttons ─────────────────────────────────────────────── */
/* Wrapper: override the old float layout from blog-template.php inline styles */
#main > * > [style*="width: 100%"]:first-child,
#main [style*="float: left"],
#main [style*="margin-left: 50%"] {
    float: none !important; width: auto !important;
    height: auto !important; margin: 0 !important;
}

.race-buttons-wrap,
#main [style*="width: 100%"]:first-child {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding: 20px 0 28px !important;
    background: none !important;
}

.race-clock,
.race-member {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        12px 28px;
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      17px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    border-radius:  50px;              /* pill shape — modern */
    cursor:         pointer;
    transition:     transform .18s, box-shadow .18s, background .18s;
    white-space:    nowrap;
    text-decoration: none;
}
.race-clock {
    background: #f5c800;
    color:      #1a1a1a;
    border:     none;
    box-shadow: 0 4px 14px rgba(245,200,0,.4);
}
.race-member {
    background: #fff;
    color:      #1a1a1a;
    border:     2px solid #ddd;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.race-clock:hover  { background: #ffd700; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,200,0,.5); }
.race-member:hover { background: #f5f5f5; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.18); }

/* ── Race card container ─────────────────────────────────────────────── */
.rc-card {
    margin-bottom: 10px;
    border-radius: 12px;
    overflow:      hidden;
    box-shadow:    0 2px 8px rgba(0,0,0,.1);
    transition:    transform .2s ease, box-shadow .2s ease;
    background:    #1e2530;
}
.rc-card:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.rc-card__link {
    display:         grid;
    grid-template-columns: 8px 1fr auto auto;
    align-items:     stretch;
    text-decoration: none;
    min-height:      80px;             /* keep cards compact */
}

/* Checkered accent stripe — left edge */
.rc-card__flag {
    background: repeating-linear-gradient(
        180deg,
        #f5c800 0px, #f5c800 10px,
        #1e2530 10px, #1e2530 20px
    );
    width: 8px; flex-shrink: 0;
    border-radius: 12px 0 0 12px;
}

/* No thumbnail — cleaner compact look */
.rc-card__thumb { display: none; }

/* Body */
.rc-card__body {
    padding:  13px 18px 13px 16px;
    display:  flex; flex-direction: column;
    justify-content: center;
    gap:      4px; flex: 1; overflow: hidden;
}

.rc-card__cat {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color:          #f5c800;
    align-self:     flex-start;
    display: none; /* hide — title is sufficient */
}

.rc-card__title {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      20px; font-weight: 800;
    letter-spacing: .03em; text-transform: uppercase;
    color:          #f0f0f0; line-height: 1.15; margin: 0;
    transition:     color .2s;
    /* Clamp to one line — keeps all cards the same height */
    white-space:    nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-card:hover .rc-card__title { color: #f5c800; }

.rc-card__meta {
    display: flex; gap: 12px; flex-wrap: wrap;
    font-family: 'Barlow', sans-serif;
    font-size: 12px; font-weight: 600; color: #7a8899;
    margin-top: 2px;
}
.rc-card__meta i { margin-right: 3px; color: #556070; }
.rc-card__time   { color: #a0b0c0; }

/* Hide excerpt — keeps cards short and consistent */
.rc-card__excerpt { display: none; }

/* Status badge — horizontal pill, highly visible */
.rc-card__status {
    display:     flex;
    align-items: center;
    padding:     0 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size:   11px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    border-left: 1px solid rgba(255,255,255,.06);
    white-space: nowrap;
    min-width:   80px;
    justify-content: center;
    writing-mode: horizontal-tb;       /* always horizontal */
}
.rc-card__status--open        { color: #1e2530; background: #2ecc71; }
.rc-card__status--waiting     { color: #1e2530; background: #f5c800; }
.rc-card__status--finished    { color: #a0b0c0; background: rgba(255,255,255,.06); }
.rc-card__status--in-progress { color: #1e2530; background: #3db8f5; }

/* CTA — simple, bright */
.rc-card__cta {
    font-family: 'Barlow Condensed', sans-serif;
    font-size:   15px; font-weight: 800;
    color:       #7a8899;
    padding:     0 18px;
    display:     flex; align-items: center; justify-content: center;
    transition:  color .2s;
    white-space: nowrap;
    border-left: 1px solid rgba(255,255,255,.06);
    letter-spacing: .05em;
}
.rc-card:hover .rc-card__cta { color: #f5c800; }

/* ══════════════════════════════════════════════════════════════════════
   NEWSPAPER — standard WP posts
   Classic broadsheet: 3-column masonry-like grid, off-white paper stock
   ══════════════════════════════════════════════════════════════════════ */

/* Newspaper wrapper — wrap the post-list into a multi-col grid */
.post-list:has(.np-article),
.blog-wrap .row:has(.np-article),
.blog-archive .row:has(.np-article) {
    display:               grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap:                   0 !important;
    flex-direction:        unset !important;
    background:            #f5f0e8 !important;
    border:                1px solid #c8bfae !important;
    border-bottom:         none !important;
    padding:               0 !important;
}

/* Masthead rule above the grid */
.post-list:has(.np-article)::before,
.blog-wrap .row:has(.np-article)::before {
    content:      '';
    display:      block !important;
    grid-column:  1 / -1;
    height:       5px;
    background:   #1a1a1a;
    position:     static !important;  /* override book-shelf ::before */
    inset:        unset !important;
    pointer-events: auto !important;
}

/* Thin double-rule under masthead */
.post-list:has(.np-article)::after,
.blog-wrap .row:has(.np-article)::after {
    content:     '' !important;
    display:     block !important;
    grid-column: 1 / -1 !important;
    height:      3px !important;
    background:  linear-gradient(180deg, #c8bfae 0%, #c8bfae 1px, transparent 1px, transparent 2px, #c8bfae 2px) !important;
    position:    static !important;
    bottom:      unset !important;
    box-shadow:  none !important;
    border-radius: 0 !important;
    z-index:     0 !important;
}

.np-article {
    padding:       20px 20px 16px;
    border-right:  1px solid #c8bfae;
    border-bottom: 1px solid #c8bfae;
    background:    #f5f0e8;
    position:      relative;
    transition:    background .2s;
    display:       flex;
    flex-direction: column;
    gap:           0;
}
/* No right border on last column */
.np-article:nth-child(3n)  { border-right: none; }
.np-article:hover          { background: #ede5d5; }

/* Featured image — full width at top of card */
.np-article__thumb-link    { display: block; margin: -20px -20px 12px; overflow: hidden; line-height: 0; }
.np-article__thumb img     { width: 100%; max-height: 160px; object-fit: cover; display: block; filter: contrast(105%) saturate(80%); transition: filter .3s; }
.np-article:hover .np-article__thumb img { filter: contrast(100%) saturate(100%); }

/* Section label */
.np-article__section {
    font-family:    'Barlow Condensed', sans-serif;
    font-size:      10px; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color:          #fff; background: #1a1a1a;
    padding:        2px 8px; border-radius: 1px;
    align-self:     flex-start; margin-bottom: 6px;
}

/* Headline */
.np-article__headline {
    font-family:    'Playfair Display', Georgia, serif !important;
    font-size:      20px !important;
    font-weight:    900 !important;
    line-height:    1.2 !important;
    color:          #111 !important;
    margin:         0 0 6px !important;
    letter-spacing: -.01em !important;
}
.np-article__headline a    { color: inherit !important; text-decoration: none !important; }
.np-article:hover .np-article__headline a { text-decoration: underline !important; }

/* Byline */
.np-article__byline {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size:   12px; font-weight: 400; font-style: italic;
    color:       #888; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid #d8d0c0;
}
.np-article__sep       { color: #ccc; font-style: normal; }
.np-article__author    { font-weight: 600; font-style: normal; color: #444; }
.np-article__readtime  { font-style: normal; color: #aaa; }

/* Excerpt */
.np-article__excerpt {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size:   14px; font-weight: 400; color: #444;
    line-height: 1.7; margin: 0; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Continue reading */
.np-article__more {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size:   13px; font-weight: 600; font-style: italic;
    color: #1a1a1a; text-decoration: none; margin-top: 10px;
    display: inline-block; border-bottom: 1px solid #aaa;
    transition: border-color .2s, color .2s; align-self: flex-start;
}
.np-article__more:hover { color: #444; border-color: #444; }

/* Footer */
.np-article__footer {
    margin-top:  10px; padding-top: 8px;
    border-top:  1px solid #d8d0c0;
    display:     flex; gap: 10px; align-items: center;
    font-family: 'Barlow', sans-serif;
    font-size:   12px; font-weight: 600; color: #aaa;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* Books → flat vertical list */
    .post-list:has(.bk-wrap),
    .blog-wrap .row:has(.bk-wrap) {
        flex-direction:  column !important;
        align-items:     stretch !important;
        gap:             0 !important;
        padding:         0 !important;
        background-image: none !important;
    }
    .bk-plank { display: none !important; }

    /* --bk-h is set as an inline style on the element, so we override height
       with a plain value (not auto/var) so every book gets its own row */
    .bk-wrap {
        height:      64px !important;
        width:       100% !important;
        min-width:   0 !important;
        display:     block !important;
        align-self:  stretch !important;
        flex-shrink: 0 !important;
        perspective: none !important;
    }
    .bk-book {
        width:        100% !important;
        height:       64px !important;
        transform:    none !important;
        box-shadow:   none !important;
        border-left:  6px solid var(--bk-band, #d4a96a) !important;
        border-radius: 0 !important;
        background:   var(--bk-bg, #3a2a1a) !important;
        display:      flex !important;
        align-items:  center !important;
    }
    .bk-spine {
        writing-mode:    horizontal-tb !important;
        flex-direction:  row !important;
        align-items:     center !important;
        justify-content: space-between !important;
        width:           100% !important;
        height:          64px !important;
        padding:         0 16px !important;
        border-top:      none !important;
        border-bottom:   1px solid rgba(255,255,255,.1) !important;
        gap:             12px !important;
    }
    .bk-spine__title,
    .bk-spine__author,
    .bk-spine__year {
        writing-mode:  horizontal-tb !important;
        white-space:   nowrap !important;
        overflow:      hidden !important;
        text-overflow: ellipsis !important;
        max-height:    none !important;
        max-width:     none !important;
    }
    .bk-spine__title  { font-size: 15px !important; font-weight: 700 !important; flex: 1 !important; min-width: 0 !important; }
    .bk-spine__author { font-size: 12px !important; opacity: .7; flex-shrink: 0 !important; }
    .bk-spine__year   { font-size: 11px !important; opacity: .5; flex-shrink: 0 !important; }
    .bk-cover { display: none !important; }
    .bk-wrap:hover .bk-book { transform: none !important; box-shadow: none !important; }

    /* Race cards → still horizontal, just narrower */
    .rc-card__status { min-width: 60px; font-size: 10px; padding: 0 10px; }

    /* Newspaper → single column */
    .post-list:has(.np-article),
    .blog-wrap .row:has(.np-article) {
        grid-template-columns: 1fr !important;
    }
    .np-article { border-right: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .bk-book, .bk-cover { transition: none !important; }
    .bk-wrap:hover .bk-book { transform: none; }
    .bk-wrap:hover .bk-cover { width: 200px; opacity: 1; }
}