/**
 * Library — template-library.php (2026-10-07 rebuild).
 *
 * Only what is the library's OWN. The hero is the home v4 hero and keeps its
 * rules in healing-home-v4.css; the cards are the video page's "You may also
 * like" cards and keep theirs in video-watch.css; the heart is the healing-path
 * cards' heart (healing-paths.css, with its logged-in .active / <button> rules
 * in site-chrome.css). This sheet places those pieces on this page:
 *   1. the row head — title, and "View all N" at the right edge
 *   2. the heart's place in the card's meta row
 *   3. (retired 13 Oct: the touch facts line is screen-reader only now)
 *   4–8. round 10: Berry ground, hover panel, arrows + counter, 4-up desktop,
 *        deferred rows, loading skeletons
 * The rail itself is the video page's as it is: every row has five cards,
 * which is one desktop row there (swipe below 992px).
 *
 * Every selector here matches markup in the SIGNED-OUT page, so WP Rocket's
 * used-CSS pass (built from that page) keeps it. The heart rule is written for
 * .hp-vcard__fav, not button.hp-vcard__fav, for that reason: the <button> only
 * exists for a signed-in visitor, the signed-out <a> carries the same class.
 */

/* ---------- 1. rows ---------- */
.gg-lib-row.hp-module { padding: 40px 0; }

.gg-lib-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 24px;
    margin-bottom: 20px;
}
/* "View all" sits at the row's right edge (Diego, 8 Oct): on the title's line
 * when both fit, otherwise on its own line under the title, still right. */
body.hp-page .gg-lib-row__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
body.hp-page .gg-lib-row__all {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--gg-tap-min);
    font-family: var(--gg-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gg-berry);
    text-decoration: underline;
    text-underline-offset: 3px;
}
body.hp-page .gg-lib-row__all:hover,
body.hp-page .gg-lib-row__all:focus-visible { color: var(--gg-mulberry); }
/* ---------- 2. the heart in the meta row ---------- */
/* Practitioner takes the free space, so the minutes and the heart sit
 * together at the right. */
.gg-vcard.hp-vcard--fav .gg-vcard__meta > :first-child {
    flex: 1 1 auto;
    min-width: 0;
}
/* (0,4,1) with !important on min-width: the logged-in <button> counter in
 * site-chrome.css sets min-width:0 !important at (0,3,2), which would shrink
 * the hit area to the 20px icon. 44px wide, 44px tall, icon centred. */
body.hp-page .gg-vcard.hp-vcard--fav .hp-vcard__fav {
    flex: none;
    align-self: center;
    justify-content: center;
    min-width: var(--gg-tap-min) !important;
    min-height: var(--gg-tap-min);
    margin: 0;
}

@media (min-width: 1024px) {
    .gg-lib-row.hp-module { padding: 56px 0; }
    .gg-lib-row__head { margin-bottom: 24px; }
}

/* ==========================================================================
 * ROUND 10 (R10-3, 2026-10-12) — the body on Gaia Berry, four cards a row
 * with arrows on desktop, descriptions under the cards, deferred rows.
 * Everything is scoped to .gg-lib--berry / .gg-lib so the video page's
 * "You may also like" cards keep their own colours and their 5-up grid.
 * Contrast on Berry #6C1D45 (WCAG AA ≥ 4.5): white 11.1:1, dawn pink 9.4:1.
 * ========================================================================== */

/* ---------- 4. Berry ground, light text ---------- */
.gg-lib--berry .gg-lib-row { background: var(--gg-berry); }
body.hp-page .gg-lib--berry .gg-lib-row__title { color: #fff; }
body.hp-page .gg-lib--berry .gg-lib-row__all { color: #fff; }
body.hp-page .gg-lib--berry .gg-lib-row__all:hover,
body.hp-page .gg-lib--berry .gg-lib-row__all:focus-visible { color: var(--gg-dawn-pink); }
.gg-lib--berry .gg-vcard__link { color: #fff !important; }
.gg-lib--berry .gg-vcard__time { color: #fff; }
/* The practitioner was Berry — invisible on Berry. The light accent instead. */
.gg-lib--berry .gg-vcard__instructor { color: var(--gg-dawn-pink) !important; }
.gg-lib--berry .gg-vcard__meta { border-top-color: rgba(255, 255, 255, 0.25); }
/* The signed-out heart is an <a>; the signed-in <button> twin is in
 * site-chrome.css (RUCSS safelist — that element is only in logged-in HTML). */
body.hp-page .gg-lib--berry .hp-vcard--fav a.hp-vcard__fav { color: var(--gg-dawn-pink) !important; }
/* Focus must stay visible on the dark ground. */
.gg-lib--berry .gg-lib-row a:focus-visible,
.gg-lib--berry .gg-lib-row button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- 5. the description panel, on hover (round 10 feedback F2, 13 Oct) ---------- */
/* At rest a card is poster, title, practitioner and minutes. On a mouse hover
 * (or keyboard focus on the card link) a panel covers the text block UNDER the
 * poster: level | minutes, a divider, the description in two lines, "Requires".
 * The poster never changes. The panel is absolutely placed from the poster's
 * bottom edge (the card is a size container, so 100cqw × 9/16 IS that edge)
 * to the card's bottom, so the card never changes height and the row never
 * moves. The title keeps two lines' room so every card's text block is the
 * same height and the panel always fits. Touch screens never see it: they get
 * the at-rest card, and a tap opens the video. Reference: prod library,
 * docs/ops/template-changes/2026-10-12-round-10/feedback/ in the strategy repo. */
.gg-lib .gg-vcard--panel { position: relative; container-type: inline-size; }
.gg-lib .gg-vcard__thumb { max-height: none; }           /* exact 16:9, so the panel's top is exact */
.gg-lib .gg-vcard:hover .gg-vcard__thumb img { transform: none; }   /* the poster never changes */
.gg-lib .gg-vcard--panel .gg-vcard__title {
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gg-vcard__panel { display: none; }
@media (hover: hover) and (pointer: fine) {
    .gg-lib .gg-vcard__panel {
        display: flex;
        flex-direction: column;
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: calc(100cqw * 9 / 16);
        bottom: 0;
        padding: 10px 12px;
        background: #7D3358;          /* a lighter Berry; white on it 8.45:1 */
        border-radius: 0 0 10px 10px;
        color: #fff;
        font-family: var(--gg-font-body);
        font-size: 0.875rem;
        line-height: 1.4;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.15s, visibility 0.15s;
    }
    .gg-lib .gg-vcard--panel:hover .gg-vcard__panel,
    .gg-lib .gg-vcard--panel .gg-vcard__link:focus-visible .gg-vcard__panel { opacity: 1; visibility: visible; }
    .gg-vcard__panel-head {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.85);
    }
    .gg-vcard__panel-desc {
        margin-top: 8px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .gg-vcard__panel-req { margin-top: auto; padding-top: 6px; font-size: 0.8125rem; }
    /* The heart stays usable above the panel. */
    .gg-lib .gg-vcard--panel .hp-vcard__fav { position: relative; z-index: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .gg-lib .gg-vcard__panel { transition: none; }
}

/* ---------- 6. arrows and the position counter, light on Berry ---------- */
/* Both arrows move exactly one view at every width (F1.2), so they show at
 * every width the row holds more than one view (js/library-rows.js clears
 * [hidden]). */
.gg-lib-row__controls { gap: 8px; margin-bottom: 0; }
body.hp-page .gg-lib--berry .hp-rail__btn { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: none; }
body.hp-page .gg-lib--berry .hp-rail__btn:hover,
body.hp-page .gg-lib--berry .hp-rail__btn:focus-visible { background: #fff; color: var(--gg-berry); border-color: #fff; }
body.hp-page .gg-lib--berry .hp-rail__btn[aria-disabled="true"],
body.hp-page .gg-lib--berry .hp-rail__btn[aria-disabled="true"]:hover { background: none; color: #fff; border-color: rgba(255, 255, 255, 0.6); opacity: 0.35; }
/* "1–4 of 23": Dawn Pink on Berry, 9.4:1. */
body.hp-page .gg-lib-row__count {
    margin: 0;
    font-family: var(--gg-font-body);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--gg-dawn-pink);
}

/* ---------- 7. four cards a view on desktop ---------- */
/* video-watch.css turns the rail into a 5-column grid at 992; the library pages
 * through its whole set, so it stays a scroll-snap row showing four. Below 992
 * the rail is the video page's swipe row (one card and a peek on phones, three
 * from 560px). */
@media (min-width: 992px) {
    .gg-lib .gg-rail {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
    }
    .gg-lib .gg-rail > * { flex: 0 0 calc((100% - 48px) / 4); scroll-snap-align: start; }
}

/* ---------- 8. rows below the fold ---------- */
/* Their layout is skipped until they near the viewport. The size is a
 * placeholder close to a real row so the scrollbar does not jump. */
.gg-lib-row--deferred {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
}

/* ---------- 9. loading skeletons (F1.1) ---------- */
/* Cloned from the hidden .gg-lib-skel the page ships, into the slots of a batch
 * that is on its way, so a fast press never lands on an empty gap. */
.gg-vcard--skel .gg-vcard__thumb { display: block; aspect-ratio: 16 / 9; background: rgba(255, 255, 255, 0.12); }
.gg-vcard--skel__line {
    display: block;
    height: 14px;
    margin-top: 14px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.12);
}
.gg-vcard--skel__line--short { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
    .gg-vcard--skel .gg-vcard__thumb,
    .gg-vcard--skel__line { animation: gg-lib-skel 1.2s ease-in-out infinite alternate; }
}
@keyframes gg-lib-skel { from { opacity: 0.55; } to { opacity: 1; } }