/* ============================================================
   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; }
}