/* ==========================================================================
   pages.css — small per-page overrides only.
   Loaded last by every page, so anything here wins over base/components.

   Rules MUST be scoped by the body class that inc/registry.php generates
   (Page::bodyClass() -> "page-<slug>"), so a tweak on one page can never
   leak into another:

     .page-book   .hero-page .hero-media img { ... }
     .page-songs  .cards                     { ... }

   Body classes currently in use:
     .page-home .page-about .page-book .page-songs
     .page-travels .page-podcasts .page-speaking .page-contact
     .page-my-gurus .page-privacy .page-404

   The home page is intentionally absent: it must render from
   base.css + components.css + home.css alone.
   ========================================================================== */

/* --- .page-about ---------------------------------------------------- */
/* The portrait is tall artwork; cap it so it cannot dominate the hero band
   once the two columns collapse into one. */
.page-about .hero-page .hero-media{display:flex;justify-content:flex-end}
.page-about .hero-page .hero-media img{width:auto;max-width:100%;max-height:420px}
@media (max-width:860px){
  .page-about .hero-page .hero-media{justify-content:flex-start}
  .page-about .hero-page .hero-media img{max-height:320px}
}

/* --- .page-book ----------------------------------------------------- */
/* The cover is portrait artwork in a landscape hero, so cap its width and
   push it to the right edge of its column. */
.page-book .hero-page .hero-media{display:flex;justify-content:flex-end}
.page-book .hero-page .hero-media img{width:auto;max-width:100%;max-height:400px}
.page-book .hero-page h1{font-size:clamp(1.5rem,3vw,2.2rem)}
@media (max-width:860px){
  .page-book .hero-page .hero-media{justify-content:flex-start}
  .page-book .hero-page .hero-media img{max-height:300px}
}

/* --- .page-songs ---------------------------------------------------- */
/* The featured track is one card on its own, so it runs full width with the
   player beside the details instead of leaving half the row empty. */
.page-songs #featured .media-cards{grid-template-columns:minmax(0,1fr)}
.page-songs #featured .media-card{flex-direction:row;align-items:stretch}
.page-songs #featured .media-card .embed{flex:0 0 56%;border-radius:14px 0 0 14px}
.page-songs #featured .media-card .card-body{justify-content:center;padding:clamp(22px,3vw,34px)}
.page-songs #featured .media-card h3{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem)}
.page-songs #featured .media-card .chip{margin-top:10px}
@media (max-width:820px){
  .page-songs #featured .media-card{flex-direction:column}
  .page-songs #featured .media-card .embed{flex:none;border-radius:14px 14px 0 0}
}

/* --- .page-travels -------------------------------------------------- */

/* --- .page-podcasts ------------------------------------------------- */

/* --- .page-speaking ------------------------------------------------- */

/* --- .page-contact -------------------------------------------------- */

/* --- .page-privacy -------------------------------------------------- */

/* --- .page-404 ------------------------------------------------------ */