/* ═══════════════════════════════════════════════
   UPSWING PODCAST (Module 7)
   Enqueued only on the /podcast/ directory and its episodes, by
   inc/upswing-podcast-view.php, after upswing-global.css. Scoped under
   .usp-pod. Tokens only. Layout comes from the existing .l-article-body,
   .c-article-rail, .page-hero--photo, .c-card and .l-grid classes; this
   file only styles the pieces they don't cover.
   ═══════════════════════════════════════════════ */

.usp-pod .usp-pod__main{min-width:0;display:flex;flex-direction:column;gap:var(--space-8)}

/* ---------- player ---------- */
.usp-pod .usp-pod__player{padding:var(--space-4)}
.usp-pod .usp-pod__embed{max-width:100%;overflow:hidden}
.usp-pod .usp-pod__embed iframe{display:block;width:100%;max-width:100%;border:0}

/* ---------- rail panels ---------- */
.usp-pod .usp-pod__panel-title{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-strong);margin-bottom:var(--space-3)}
.usp-pod .usp-pod__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.usp-pod .usp-pod__links li{margin:0;padding:0}
.usp-pod .usp-pod__links--row{flex-direction:row;flex-wrap:wrap;gap:var(--space-3)}
.usp-pod .usp-pod__rail-ad{max-width:100%;overflow:hidden}

/* ---------- below-content ad ---------- */
.usp-pod .usp-pod__below-ad{margin-top:var(--space-12)}

/* ---------- subscribe strip ---------- */
.usp-pod .usp-pod__subscribe-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-8)}
.usp-pod .usp-pod__subscribe-title{font-size:var(--text-xl);margin:0}

/* ---------- more episodes / directory grid ---------- */
.usp-pod__more .usp-pod__more-title{font-size:var(--text-2xl);margin-bottom:var(--space-8)}
.usp-pod__more .usp-pod__more-all{margin-top:var(--space-8)}
.usp-pod .usp-pod__pagination{margin-top:var(--space-10);justify-content:center}
.usp-pod .usp-pod__pagination-gap{padding-inline:var(--space-2);color:var(--text-subtle)}
.usp-pod .usp-pod__empty{font-size:var(--text-lg);color:var(--text-subtle)}

/* ═══════════════════════════════════════════════
   DIRECTORY REDESIGN (/podcast/): show head, latest-episode feature,
   GET filter bar, episode rows, pager. Scoped under .usp-pod. Mockup:
   upswing-podcast-mockup.html. Tokens only.
   ═══════════════════════════════════════════════ */

/* Show identity band */
.usp-pod .c-show-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);align-items:end}
.usp-pod .c-show-head__title{font-size:var(--text-5xl);margin-bottom:var(--space-3);text-wrap:balance}
.usp-pod .c-show-head__desc{font-size:var(--text-lg);line-height:var(--leading-normal);color:rgba(255,255,255,.8);max-width:52ch;margin-bottom:var(--space-4)}
.usp-pod .c-show-head__stats{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-neutral-400)}
.usp-pod .c-show-head__subscribe{min-width:0}
.usp-pod .c-show-head__subscribe-label{font-size:var(--text-sm);color:var(--color-neutral-400);margin-bottom:var(--space-3)}
.usp-pod .c-show-head__links{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.usp-pod .c-show-head .c-btn--tertiary{color:var(--color-neutral-0);border-color:var(--color-neutral-500)}
.usp-pod .c-show-head .c-btn--tertiary:hover{background:rgba(255,255,255,.1);border-color:var(--color-neutral-0)}
@media(max-width:900px){.usp-pod .c-show-head{grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--space-6)}}

/* Latest episode feature */
.usp-pod .c-episode-feature{padding:var(--space-12) 0 var(--space-10);border-bottom:1px solid var(--border-default)}
.usp-pod .c-episode-feature__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-10);align-items:center}
.usp-pod .c-episode-media{position:relative;aspect-ratio:16/9;margin:0;overflow:hidden;border-radius:var(--radius-xs);background:var(--color-neutral-900);box-shadow:var(--shadow-2xl)}
.usp-pod .c-episode-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.usp-pod .c-episode-feature__label{font-family:var(--font-display);font-size:var(--text-xs);font-weight:var(--weight-semi);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-primary-500);margin-bottom:var(--space-2)}
.usp-pod .c-episode-feature__title{font-size:var(--text-3xl);font-weight:var(--weight-bold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);margin-bottom:var(--space-3);text-wrap:balance}
.usp-pod .c-episode-feature__title a{color:var(--text-strong);text-decoration:none}
.usp-pod .c-episode-feature__title a:hover{color:var(--color-primary-600)}
.usp-pod .c-episode-feature__desc{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-subtle);margin-bottom:var(--space-4)}
.usp-pod .c-episode-feature__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);margin-bottom:var(--space-5)}
.usp-pod .c-episode-media__link{display:block;position:absolute;inset:0}
.usp-pod .c-episode-media__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-4px}
.usp-pod .c-episode-feature__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
@media(max-width:900px){.usp-pod .c-episode-feature{padding:var(--space-8) 0}.usp-pod .c-episode-feature__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}}

/* Filter bar */
.usp-pod .c-episode-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3);padding:var(--space-8) 0 var(--space-5)}
.usp-pod .c-episode-filters__field{flex:1 1 288px;min-width:0}
.usp-pod .c-episode-filters__field--narrow{flex:0 1 192px}
.usp-pod .c-episode-filters__count{flex:1 1 100%;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-subtle);padding-top:var(--space-2);margin:0}
.usp-pod .c-episode-filters__reset{display:inline-flex;align-items:center;min-height:44px;font-size:var(--text-sm);color:var(--text-subtle);text-decoration:underline;text-underline-offset:3px}
.usp-pod .c-episode-filters__reset:hover{color:var(--text-strong)}
@media(max-width:640px){.usp-pod .c-episode-filters__field,.usp-pod .c-episode-filters__field--narrow{flex:1 1 100%}}

/* Episode rows */
.usp-pod .c-episode-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border-default)}
.usp-pod .c-episode-list__item{border-bottom:1px solid var(--border-default);margin:0}
.usp-pod .c-episode-row{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-6);padding:var(--space-6) 0;align-items:start}
.usp-pod .c-episode-row__media{position:relative;aspect-ratio:16/9;margin:0;overflow:hidden;background:var(--color-neutral-900);border-radius:var(--radius-xs)}
.usp-pod .c-episode-row__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-base) var(--ease-out)}
.usp-pod .c-episode-list__item:hover .c-episode-row__media img{transform:scale(1.03)}
.usp-pod .c-episode-row__body{min-width:0}
.usp-pod .c-episode-row__num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-subtle);margin-bottom:var(--space-2)}
.usp-pod .c-episode-row__title{font-size:var(--text-xl);font-weight:var(--weight-bold);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);margin-bottom:var(--space-2)}
.usp-pod .c-episode-row__title a{color:var(--text-strong);text-decoration:none}
.usp-pod .c-episode-row__title a::after{content:"";position:absolute;inset:0}
.usp-pod .c-episode-list__item:hover .c-episode-row__title a{color:var(--color-primary-600)}
.usp-pod .c-episode-row__desc{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text-subtle);margin-bottom:var(--space-3)}
.usp-pod .c-episode-row__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-subtle);margin:0}
@media(max-width:768px){.usp-pod .c-episode-row{grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding:var(--space-5) 0}}

/* Empty state, pager */
.usp-pod .c-episode-empty{padding:var(--space-16) 0;text-align:center}
.usp-pod .c-episode-empty__title{font-size:var(--text-2xl);margin-bottom:var(--space-3)}
.usp-pod .c-episode-empty__desc{color:var(--text-subtle);margin-bottom:var(--space-5)}
.usp-pod .c-episode-pager{display:flex;justify-content:center;padding:var(--space-10) 0 var(--space-4)}
.usp-pod .c-pagination__item--gap{width:auto;min-width:var(--space-6);color:var(--text-muted);pointer-events:none}

/* ═══════════════════════════════════════════════
   EPISODE PAGE: hero, audio band, subscribe strip, transcript, rail.
   Scoped under .usp-pod. Mockup: upswing-podcast-episode-preview.html.
   Tokens only.
   ═══════════════════════════════════════════════ */

/* Hero: media leads at 7:5 */
.usp-pod .c-article-head--episode{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media(max-width:900px){.usp-pod .c-article-head--episode{grid-template-columns:minmax(0,1fr)}}
.usp-pod .c-article-head--episode .c-episode-media{position:relative;aspect-ratio:16/9;margin:0;overflow:hidden;border-radius:var(--radius-xs);background:var(--color-neutral-900);box-shadow:var(--shadow-2xl)}
.usp-pod .c-article-head--episode .c-episode-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.usp-pod .c-article-head--episode .c-episode-media--video{box-shadow:none;background:none;overflow:visible}
.usp-pod .c-article-head--episode .page-hero__title{font-size:var(--text-4xl);line-height:calc(var(--leading-tight) * .85);margin-bottom:var(--space-3);text-wrap:balance}
.usp-pod .c-episode-head__dek{font-size:var(--text-lg);line-height:var(--leading-normal);color:rgba(255,255,255,.8);margin-bottom:var(--space-3)}
.usp-pod .c-episode-head__date{font-size:var(--text-sm);color:rgba(255,255,255,.7);margin:0}
.usp-pod .c-episode-platforms{margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid rgba(255,255,255,.2)}
.usp-pod .c-episode-platforms__label{font-size:var(--text-sm);color:rgba(255,255,255,.7);margin-bottom:var(--space-3)}
.usp-pod .c-episode-platforms__list{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.usp-pod .c-episode-platforms__list>li{margin:0;padding:0}
/* Keep YouTube, Spotify and Apple Podcasts on one row on desktop: tighter gap and padding. Wraps again on narrow screens. */
@media(min-width:1200px){.usp-pod .c-episode-platforms__list{flex-wrap:nowrap;gap:var(--space-2)}.usp-pod .c-episode-platforms__list .c-btn{padding-left:var(--space-4);padding-right:var(--space-4);font-size:var(--text-sm);white-space:nowrap;gap:var(--space-1)}}
.usp-pod .c-episode-jump{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;margin-top:var(--space-3);font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-semi);color:var(--color-neutral-0);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--color-neutral-500)}
.usp-pod .c-episode-jump:hover{text-decoration-color:currentColor}

/* Poster that loads the YouTube player (upswing-article-video.js) */
.usp-pod .usp-video{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-xs);box-shadow:var(--shadow-2xl);background:var(--color-neutral-950)}
.usp-pod .usp-video__poster,.usp-pod .usp-video__frame{display:block;width:100%;height:100%;object-fit:cover;border:0}
.usp-pod .usp-video__play{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:var(--space-16);height:var(--space-16);transform:translate(-50%,-50%);border-radius:var(--radius-full);background:var(--color-primary-500);color:var(--color-neutral-0);box-shadow:var(--shadow-xl);transition:transform var(--duration-fast) var(--ease-out)}
.usp-pod .usp-video__play svg{width:50%;height:50%}
.usp-pod .usp-video:hover .usp-video__play{transform:translate(-50%,-50%) scale(1.08)}
.usp-pod .usp-video:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.usp-pod .usp-video__play{transition:none}.usp-pod .usp-video:hover .usp-video__play{transform:translate(-50%,-50%)}}

/* Neutral gray button (Apple Podcasts). White on neutral-500 is 4.6:1. */
.usp-pod .c-btn--neutral{background:var(--color-neutral-500);color:var(--color-neutral-0);border-color:var(--color-neutral-500)}
.usp-pod .c-btn--neutral:hover{background:var(--color-neutral-600);border-color:var(--color-neutral-600);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.usp-pod .c-btn--neutral:active{transform:translateY(0)}

/* Audio band */
.usp-pod .c-episode-audio{background:var(--surface-primary);padding:var(--space-8) 0 var(--space-10)}
.usp-pod .c-episode-audio__title{font-size:var(--text-lg);font-weight:var(--weight-semi);letter-spacing:var(--tracking-tight);margin-bottom:var(--space-4)}
.usp-pod .c-episode-audio__player iframe{display:block;width:100%;max-width:100%;border:0}

/* Subscribe strip */
.usp-pod .c-episode-subscribe{padding:var(--space-6) 0;border-bottom:1px solid var(--border-default)}
.usp-pod .c-episode-subscribe .l-container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-8)}
.usp-pod .c-episode-subscribe__title{font-size:var(--text-xl);letter-spacing:var(--tracking-tight);margin:0}
.usp-pod .c-episode-subscribe__list{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.usp-pod .c-episode-subscribe__list>li{margin:0;padding:0}
@media(max-width:640px){
  .usp-pod .c-episode-subscribe__list{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .usp-pod .c-episode-subscribe__list>li{display:grid}
}

/* Transcript */
.usp-pod .c-episode-transcript-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4);padding-bottom:var(--space-4);margin-bottom:var(--space-6);border-bottom:1px solid var(--border-default);scroll-margin-top:var(--space-20)}
.usp-pod .c-episode-transcript-head__title{font-size:var(--text-2xl);margin:0}
.usp-pod .c-episode-transcript-head__note{font-size:var(--text-sm);color:var(--text-subtle);margin:0}
.usp-pod .c-episode-main{min-width:0}
.usp-pod .entry-content .c-transcript__speaker{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);margin:var(--space-8) 0 var(--space-2);scroll-margin-top:var(--space-20)}
.usp-pod .c-transcript__time{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--text-subtle)}
.usp-pod .entry-content .c-transcript__resume{margin:var(--space-2) 0}

/* Rail: show card, then a sticky ad slot */
.usp-pod .c-episode-rail{display:flex;flex-direction:column;gap:var(--space-8);margin-top:var(--space-12);padding-top:var(--space-8);border-top:1px solid var(--border-default)}
@media(min-width:1100px){.usp-pod .c-episode-rail{margin-top:0;padding-top:0;border-top:0;align-self:start}}
.usp-pod .c-episode-rail__sticky{position:sticky;top:var(--space-20)}
.usp-pod .c-episode-show{padding:var(--space-6);background:var(--surface-secondary);border-radius:var(--radius-xs)}
.usp-pod .c-episode-show__name{font-size:var(--text-xl);margin-bottom:var(--space-2)}
.usp-pod .c-episode-show__desc{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text-subtle);margin-bottom:var(--space-4)}
.usp-pod .c-episode-show__follow{font-size:var(--text-sm);color:var(--text-subtle);margin-bottom:var(--space-1)}
.usp-pod .c-episode-show__links{display:flex;flex-wrap:wrap;gap:0 var(--space-4);font-size:var(--text-sm);margin-bottom:var(--space-4)}
.usp-pod .c-episode-show__links a,.usp-pod .c-episode-show__all{display:inline-flex;align-items:center;min-height:44px;color:var(--text-strong);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.usp-pod .c-episode-show__links a:hover,.usp-pod .c-episode-show__all:hover{color:var(--color-primary-600);text-decoration-color:currentColor}
.usp-pod .c-episode-show__all{font-family:var(--font-display);font-weight:var(--weight-semi);font-size:var(--text-sm);border-top:1px solid var(--border-default);width:100%;padding-top:var(--space-2)}

/* Ad slots: output only when the field has content */
.usp-pod .c-episode-ad img,.usp-pod .c-episode-ad iframe{display:block;max-width:100%;height:auto;border:0}
.usp-pod .c-episode-ad--below{max-width:calc(var(--grid-narrow) + 320px + var(--space-12) + 2 * var(--grid-gutter));margin:var(--space-16) auto 0;padding:0 var(--grid-gutter)}
@media(max-width:1099px){.usp-pod.c-episode--single-mobile-ad .c-episode-rail__sticky{display:none}}
@media(max-width:640px){.usp-pod .c-episode-ad--below{padding-left:var(--space-4);padding-right:var(--space-4)}}

/* ═══════════════════════════════════════════════
   EPISODE PAGE: MOCKUP PARITY
   upswing-global.css runs the type scale at 1.36x the v2.1 baseline
   ("Typography: scale at 1.36x", :root), but the episode mockup
   (Podcast Episode Video Hero.html) was drawn at the v2.1 baseline, and
   the rem-based spacing tokens never scaled. Result on the live page:
   type ~36% larger than the mockup against unchanged spacing.
   Scoped to the episode page, its "More episodes" row and the /podcast/
   directory only, so the rest of the site keeps the 1.36x scale.
   Values below are the v2.1 baseline, i.e. the 1.36x values / 1.36.
   ═══════════════════════════════════════════════ */
.usp-pod.c-episode,
.usp-pod--directory,
.usp-pod__more{
  --text-xs:clamp(11px,10.4px + 0.15vw,12px);
  --text-sm:clamp(13px,12.48px + 0.15vw,14px);
  --text-base:clamp(15px,14.4px + 0.18vw,16px);
  --text-lg:clamp(17px,16px + 0.25vw,18px);
  --text-xl:clamp(19px,17.6px + 0.4vw,21px);
  --text-2xl:clamp(23px,20.8px + 0.6vw,27px);
  --text-3xl:clamp(28px,24px + 1vw,36px);
  --text-4xl:clamp(34px,28px + 1.5vw,48px);
  --text-5xl:clamp(42px,32px + 2.5vw,64px);
  --text-ui:clamp(17px,16px + 0.25vw,18px);
  --text-ui-sm:clamp(16px,15.2px + 0.2vw,17px);
  --text-ui-xs:clamp(14px,13.44px + 0.15vw,15px);
}

/* Hero band: tighter crumb bar and a flatter scrim, as drawn. The global
   breadcrumb rule shrinks to 0.64 x --text-sm, which at the baseline
   would be ~9px, so restate it at --text-sm. */
.usp-pod .page-hero__bar{padding:var(--space-2) var(--grid-gutter)}
.usp-pod .page-hero__bar .c-breadcrumbs{font-size:var(--text-sm);flex-wrap:nowrap;min-width:0}
.usp-pod .page-hero__bar .c-breadcrumbs>a{white-space:nowrap;flex-shrink:0}
.usp-pod .page-hero__bar .c-breadcrumbs__current{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.usp-pod .page-hero.page-hero--photo{border-top:0;border-bottom:2px solid var(--color-primary-500)}
.usp-pod .page-hero--photo::before{background:color-mix(in srgb,var(--color-neutral-950) 90%,transparent)}
@media(max-width:640px){.usp-pod .page-hero__bar{padding:var(--space-2) var(--space-4)}}

/* ═══════════════════════════════════════════════
   DIRECTORY: MOCKUP PARITY (Level-Up Podcast Directory.html)
   The type-scale reset above covers the directory. This adds what the
   mockup shows beyond sizing.
   ═══════════════════════════════════════════════ */

/* The parent theme's heading line-height beats the global element rule,
   so state it on the classed titles. */
.usp-pod--directory .c-show-head__title{line-height:var(--leading-tight)}
.usp-pod--directory .c-episode-feature__title,
.usp-pod--directory .c-episode-row__title{line-height:var(--leading-snug)}
.usp-pod--directory .c-episode-feature__title a,
.usp-pod--directory .c-episode-row__title a{line-height:inherit}

/* Hero subscribe: three colored platform buttons (+ optional Audible). */
.usp-pod--directory .c-show-head__links .c-btn--tertiary{color:var(--color-neutral-0);border-color:var(--color-neutral-500)}

/* Latest episode sits right under the hero so it lands above the fold. */
.usp-pod--directory .c-episode-feature{padding-top:var(--space-10)}
.usp-pod--directory .c-episode-feature__label{color:var(--color-primary-600)}
.usp-pod--directory .c-episode-feature__desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Rows: format icons beside the label; thumbnail stays beside the text
   on phones, as drawn. */
.usp-pod--directory .c-episode-row__formats{display:inline-flex;align-items:center;gap:var(--space-2)}
@media(max-width:768px){
  .usp-pod--directory .c-episode-row{grid-template-columns:112px minmax(0,1fr);gap:var(--space-4)}
  .usp-pod--directory .c-episode-row__title{font-size:var(--text-lg)}
}

/* Breathing room: list, then pager, then whatever follows the template
   (the Upswing Lab CTA band). */
.usp-pod--directory .c-episode-pager{padding-top:var(--space-10);padding-bottom:var(--space-4)}
.usp-pod--directory{padding-bottom:var(--space-16)}