/* PT MEDIA HUB · panel fade + phone sheet (brief 46, N6, 15 Oct 2026).
   Its own small file because the hub's styles live in THREE places (single-product-page-styles.css on the shop,
   reviews-archive-styles.css on /reviews/, pt-media-hub.css elsewhere) and this has to reach all of them. Loaded by
   11-frontend-mods.php wherever pt-media-hub.js is enqueued. No tokens declared here; --pt-accent comes from
   header-footer-global.css. */
/* ── BRIEF 46 (N6) · PANEL FADE + PHONE SHEET (Plan/PT-Media-Hub-Spec.md §4) ─────────────────────────────
   The panel fades over 0.2 s when the hub moves to another review (pt-media-hub.js adds .is-fading for the swap);
   photos within one review never touch it. On a phone the panel is a sheet: name, stars, verified, headline and
   two lines of the review, then "Read full review" (link blue, --pt-accent) opens it to 80% of the screen. It
   closes again whenever the review changes. Everything else in the panel waits inside the open sheet. */
.pt-hub-details { transition: opacity .2s ease; }
.pt-hub-details.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pt-hub-details { transition: none; } }

.pt-hub-more { display: none; }
@media (max-width: 900px) {
    .pt-media-hub:not(.is-sheet-open) .pt-hub-details { max-height: none; overflow: hidden; padding-bottom: 0; }
    .pt-media-hub:not(.is-sheet-open) .pt-hub-scroll { overflow: hidden; }
    .pt-media-hub:not(.is-sheet-open) .pt-hub-user-meta { margin-bottom: 10px; }
    .pt-media-hub:not(.is-sheet-open) #pt-hub-date,
    .pt-media-hub:not(.is-sheet-open) .pt-hub-variation,
    .pt-media-hub:not(.is-sheet-open) .pt-hub-minis,
    .pt-media-hub:not(.is-sheet-open) .pt-hub-helpful,
    .pt-media-hub:not(.is-sheet-open) .pt-hub-reply,
    .pt-media-hub:not(.is-sheet-open) .pt-hub-sidebar-gallery { display: none !important; }
    .pt-media-hub:not(.is-sheet-open) .pt-hub-review-text h5 { font-size: 16px; margin-bottom: 4px; }
    .pt-media-hub:not(.is-sheet-open) #pt-hub-comment {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0;
    }
    .pt-media-hub:not(.is-sheet-open) .pt-hub-more:not([hidden]) { display: inline-block; }
    .pt-media-hub.is-sheet-open .pt-hub-details { max-height: 80vh; max-height: 80dvh; }
    .pt-media-hub.is-sheet-open .pt-hub-scroll { outline: none; }

    /* A plain link-blue button. GeneratePress prints button:hover/focus { background:#333; color:#fff } on every page
       (CLAUDE.md 5a), so every state names both. */
    .pt-media-hub .pt-hub-more,
    .pt-media-hub .pt-hub-more:hover,
    .pt-media-hub .pt-hub-more:focus,
    .pt-media-hub .pt-hub-more:active {
        background: none; color: var(--pt-accent, #185FA5); border: 0; border-radius: 0; padding: 8px 0 12px; margin: 0;
        font-size: 14px; font-weight: 600; line-height: 1.3; text-transform: none; letter-spacing: 0; cursor: pointer;
    }
    .pt-media-hub .pt-hub-more:hover { text-decoration: underline; }
    .pt-media-hub .pt-hub-more:focus-visible { outline: 2px solid var(--pt-accent, #185FA5); outline-offset: 2px; }
}