/* Books Page Styles */

.books-hero {
    padding: 90px 0 50px;
    background: var(--ivory-bg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* .ast-container is Astra's flex-row utility, reused here as a plain
   wrapper — without this it packs subtitle/heading/divider side by side
   instead of stacking them centered. */
.books-hero .ast-container {
    display: block !important;
}

.books-hero h1 {
    font-size: 4rem;
    color: var(--emerald-deep);
}

/* Faint open-book motif standing in for "an open book, a branch and a
   feather" — an outline shape, low opacity, reads as texture not a graphic. */
.books-hero::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -60px;
    transform: translateY(-50%) rotate(-6deg);
    width: 380px;
    height: 220px;
    background:
        linear-gradient(var(--emerald-deep), var(--emerald-deep)) left / 2px 100% no-repeat,
        linear-gradient(var(--emerald-deep), var(--emerald-deep)) center / 2px 100% no-repeat,
        linear-gradient(var(--emerald-deep), var(--emerald-deep)) right / 2px 100% no-repeat,
        linear-gradient(var(--gold-muted), var(--gold-muted)) top / 100% 2px no-repeat,
        linear-gradient(var(--gold-muted), var(--gold-muted)) bottom / 100% 2px no-repeat;
    opacity: 0.06;
    pointer-events: none;
}

@media (max-width: 991px) {
    .books-hero::after {
        display: none;
    }
}

.quotes-section {
    padding: 100px 0;
    background: white;
}

.quotes-section .ast-container,
.books-list-section .ast-container {
    display: block !important;
}

.quote-card-stylized {
    margin-bottom: 120px;
    display: flex;
    justify-content: center;
}

.quote-image-container {
    max-width: 600px;
    width: 100%;
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.1);
    border: 1px solid rgba(212, 173, 96, 0.2);
    text-align: center;
    transition: transform 0.3s ease;
}

.quote-image-container:hover {
    transform: translateY(-10px);
}

.quote-poster {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin-bottom: 25px;
    filter: sepia(0.2) contrast(1.1);
}

.quote-author-label {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: var(--gold-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-top: 1px solid rgba(212, 173, 96, 0.2);
    padding-top: 20px;
    display: inline-block;
}

.books-list-section {
    padding: 100px 0;
    background: var(--emerald-deep);
    color: white;
}

.books-list-section h2 {
    color: var(--gold-muted);
    text-align: center;
    margin-bottom: 60px;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

@media (max-width: 991px) {
    .books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.book-card-mini {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(212, 173, 96, 0.2);
    transition: all 0.3s ease;
    height: 100%;
}

.book-card-mini:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.book-card-mini h4 {
    color: var(--gold-muted);
    font-size: 1.6rem;
    margin-bottom: 15px;
}

/* Each card stacks 4 rows (year, title, flourish, description). Titles wrap
   to one or two lines depending on length, so on their own the flourish and
   body text land at different heights across the row. Subgrid pins every
   card's rows to the same track lines as its neighbours. */
html[data-design="2"] .book-card-mini {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-content: start;
    /* Subgrid inherits the grid's 40px gap as its ROW gap too, which stacked
       on top of each child's own margin-bottom and left the cards mostly
       empty space. Own row-gap here, margins zeroed below. */
    row-gap: 8px;
    padding: 20px 26px;
}

html[data-design="2"] .book-card-mini .book-year,
html[data-design="2"] .book-card-mini h4,
html[data-design="2"] .book-card-mini .book-icon {
    margin-bottom: 0;
}

/* Tighter type as well — the remaining height is the text itself, so the
   gap trim alone only got a third of the way to the target. */
html[data-design="2"] .book-card-mini h4 {
    font-size: 1.35rem;
    line-height: 1.25;
}

html[data-design="2"] .book-card-mini .book-description {
    font-size: 1rem;
    line-height: 1.5;
}

html[data-design="2"] .book-card-mini .book-year {
    font-size: 0.9rem;
}

/* Fallback where subgrid is unavailable: reserve a fixed two-line slot for
   the title so the rows below still start at a common height. */
@supports not (grid-template-rows: subgrid) {
    html[data-design="2"] .book-card-mini h4 {
        line-height: 1.3;
        min-height: 2.6em;
    }
}

/* The old per-book illustrations carried baked-in caption text that showed
   through as garbled fragments at card size. Replaced by one shared
   background-free open-book flourish sitting under each card's title. */
.book-icon {
    display: none;
}

html[data-design="2"] .book-icon {
    display: block;
    margin: 0 0 18px;
    line-height: 0;
}

/* Full content width, not a fixed cap: a 200px flourish inside a wider card
   left its right edge short of the year/title/description edge, which read
   as the icon being out of alignment with the rest of the card. */
html[data-design="2"] .book-icon img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.book-year {
    font-size: 1rem;
    color: var(--ivory-bg);
    opacity: 0.8;
    margin-bottom: 15px;
    display: block;
    font-weight: 600;
}

.book-description {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .books-grid {
        grid-template-columns: 1fr;
    }

    .books-hero h1 {
        font-size: 3rem;
    }
    .quote-image-container {
        padding: 15px;
    }
    .quote-author-label {
        font-size: 1.4rem;
    }
}

/* ==========================================================================
   SCIENTIFIC CITATION
   The 2021 card names the paper; this is its full bibliographic record plus
   the published PDF. Kept outside .books-grid on purpose — the grid's cards
   are pinned by subgrid to exactly four rows, so an extra child inside one
   card would knock that row out of alignment.
   ========================================================================== */

.books-citation {
    margin-top: 56px;
    margin-left: 0;
    margin-right: 0;
    padding: 32px 36px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--gold-muted);
    border-radius: var(--card-radius);
}

.books-citation__label {
    display: block;
    font-family: var(--sans-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-muted);
    margin-bottom: 14px;
}

.books-citation__ref {
    margin: 0 0 20px;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ivory-bg);
    opacity: 0.92;
}

.books-citation__link {
    display: inline-block;
    font-family: var(--sans-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-muted);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 173, 96, 0.5);
    padding-bottom: 3px;
}

.books-citation__link:hover,
.books-citation__link:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
    text-decoration: none;
}

@media (max-width: 768px) {
    .books-citation {
        padding: 26px 22px;
    }
}