/* ============================================================
   jg-press.css  --  JewishGen Press STORE detail pages
   CHW / Project Shorashim
   ------------------------------------------------------------
   SCOPE: components used ONLY on Press store detail pages
   (YBIP_*.html): the book-cover hero, the order-card children,
   and the index-download note. Shared layout (title band,
   dataset grid, meta-card, sidebar-card/CTA base) comes from
   jg-yizkor-tr.css -- do NOT redefine it here.

   Load ORDER: Bootstrap CDN -> jg-global.css ->
     jg-yizkor-tr.css -> this file -> page-specific overrides.
   Tokens (--border-tan, --navy-deep, --dm-*) are defined in
   jg-yizkor-tr.css :root, which always loads first.

   Dark mode via body.dark-mode; dark rules sit ADJACENT to
   their base rules. DO NOT add hex codes outside :root blocks
   without approval.
   ASCII-only file: verify with grep -nP '[^\x00-\x7F]'.
   ============================================================ */

/* == Book hero: cover + romanized title + credits ============ */
.book-hero {
    display: flex;
    gap: 28px;
    align-items: stretch;
    margin-bottom: 30px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--border-tan);
}
body.dark-mode .book-hero { border-bottom-color: var(--dm-border) !important; }
.book-hero__cover {
    flex-shrink: 0;
    width: 190px;
    align-self: flex-start;   /* hug the cover image; don't stretch to the credits column height */
    background-color: var(--cream);
    border: 1px solid var(--border-tan);
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.10);
}
body.dark-mode .book-hero__cover {
    background-color: #2a2a2a !important; /* one-off: matches system dark inset surfaces */
    border-color: var(--dm-border) !important;
}
.book-hero__cover img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}
.book-hero__intro {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.book-hero__romanized {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.2;
    color: var(--navy);
    margin: 0 0 20px 0;
}
body.dark-mode .book-hero__romanized { color: var(--dm-text) !important; }
.book-hero__credits {
    font-size: 0.9375rem;
    color: var(--charcoal);
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
body.dark-mode .book-hero__credits { color: #c8c8c8 !important; } /* one-off body grey */
.book-hero__credits .credit-line {
    display: block;
    line-height: 1.5;
    padding: 5px 0;
}
.book-hero__credits .credit-line:last-child { margin-top: auto; }

/* == Order card children ====================================
   Card base (navy fill, radius, padding) is the shared
   .donate-card/.order-card rule in jg-yizkor-tr.css. */
.order-card {
    margin-bottom: 16px;
    text-align: center;
}
.order-card__label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.7);
    font-weight: bold;
    margin: 0 0 6px 0;
}
.order-card__price {
    font-size: 2rem;
    font-weight: bold;
    color: #ffffff;
    line-height: 1;
    margin: 0 0 4px 0;
}
.order-card__note {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

/* == Order button deltas ====================================
   Base look shared with .btn-donate-full in jg-yizkor-tr.css;
   these deltas exist because .btn-order is a <button>. */
.btn-order {
    width: 100%;
    border: none;
    padding: 13px 20px;
    cursor: pointer;
}
.btn-order:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* == Multi-buy options (e.g. multi-volume sets sold on one page) == */
.order-buy {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.25);
    text-align: center;
}
.order-buy:first-of-type {
    margin-top: 6px;
    padding-top: 0;
    border-top: none;
}
.order-buy__label {
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin: 0 0 8px 0;
}
body.dark-mode .order-buy { border-top-color: rgba(255,255,255,0.18); }

/* == Index download note (under the order card) ============== */
.index-note {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--charcoal);
    text-align: center;
    padding: 0 4px;
}
body.dark-mode .index-note { color: #b0b0b0 !important; } /* one-off note grey */
.index-note a { color: var(--navy); font-weight: bold; text-decoration: underline dotted; }
.index-note a:hover { color: var(--sage); }
body.dark-mode .index-note a { color: var(--dm-link) !important; }
body.dark-mode .index-note a:hover { color: var(--sage) !important; }

/* == Responsive ============================================== */
@media (max-width: 600px) {
    .book-hero { flex-direction: column; align-items: center; text-align: center; }
    .book-hero__cover { width: 160px; }
    .book-hero__intro { width: 100%; }
    .book-hero__credits .credit-line:last-child { margin-top: 0; }


}


/* == Multi-cover hero: stack covers vertically (CHW 2026-10-21, v=3) ==========
   A hero with 2+ covers (Dabrowa, Valozhyn, Slutsk, Sventzian) used to lay the
   covers side by side and squeeze the credits column. Here the covers stack in the
   190px left column and the intro takes the full right column. Single-cover heroes
   are untouched (:has() only matches two adjacent covers). Desktop/tablet only -
   the <=600px rule above already stacks everything in one centred column. */
@media (min-width: 601px) {
    .book-hero:has(.book-hero__cover + .book-hero__cover) {
        display: grid;
        grid-template-columns: 190px 1fr;
        column-gap: 28px;
        row-gap: 16px;
        align-items: start;
    }
    .book-hero:has(.book-hero__cover + .book-hero__cover) .book-hero__cover {
        grid-column: 1;
    }
    .book-hero:has(.book-hero__cover + .book-hero__cover) .book-hero__intro {
        grid-column: 2;
        grid-row: 1 / span 2;            /* two covers (all current multi-cover books) */
    }
    .book-hero:has(.book-hero__cover + .book-hero__cover + .book-hero__cover) .book-hero__intro {
        grid-row: 1 / span 3;            /* three covers, if one ever appears */
    }
    /* the single-cover hero pins the specs line to the cover's bottom edge; with
       stacked covers that leaves a large gap, so the specs follow the credits */
    .book-hero:has(.book-hero__cover + .book-hero__cover) .book-hero__credits .credit-line:last-child {
        margin-top: 0;
    }
}