/* Podcasts (Phase 13/14), the parts that live on the site's own light pages: the Listen card under an article, the "this article has a
 * podcast" notice, and the tag on blog cards. The player pages (/podcasts, the episode page, the sticky bar) are in player.css.
 * Linked by app/podcast_pages.py; the live pages and the live css/style.css are never replaced. Accent = the site's #E64A3F. */
.baz-pc-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E64A3F}
.baz-pc-link{font-size:12px;font-weight:600;letter-spacing:.08em;color:#151515;text-decoration:underline;text-underline-offset:3px}
.baz-pc-link:hover{color:#E64A3F}

/* the card with the player under an article */
.baz-podcast-section{padding-top:0}
.baz-pc-card{display:grid;grid-template-columns:116px minmax(0,1fr);grid-template-areas:"cover body";gap:20px 24px;padding:24px;border-radius:26px;background:#f3f1ef;border:1px solid rgba(0,0,0,.06)}
.baz-pc-card-cover{grid-area:cover;display:block;width:116px;height:116px;border-radius:18px;overflow:hidden;background:#e0dcd8}
.baz-pc-card-img{width:100%;height:100%;object-fit:cover;display:block}
.baz-pc-card-body{grid-area:body;align-self:center;min-width:0}
.baz-pc-card-title{margin:10px 0 12px;font-size:21px;line-height:1.3}
.baz-pc-card-title a{color:inherit;text-decoration:none}
.baz-pc-card-title a:hover{color:#E64A3F}
.baz-pc-card-links{display:flex;flex-wrap:wrap;gap:18px}
.baz-pc-card-player{grid-area:player}

@media (max-width:900px){
  .baz-pc-hero{grid-template-columns:1fr;gap:34px}
  .baz-pc-hero-cover{max-width:340px;min-height:0;aspect-ratio:1/1}
}
@media (max-width:520px){
  .baz-pc-card{grid-template-columns:84px minmax(0,1fr);padding:18px;gap:16px 18px;border-radius:22px}
  .baz-pc-card-cover{width:84px;height:84px;border-radius:14px}
  .baz-pc-card-title{font-size:18px}
}

/* "this article has a podcast": the notice under the article's picture, the tag on its cards, and the anchor of the player */
.baz-pc-anchor{display:block;position:relative;top:-130px;height:0;visibility:hidden}   /* the link target sits above the card, clear of the fixed header, whatever scrolls the page */
.baz-pc-flagwrap{position:relative;z-index:6;height:0;margin:0;text-align:center}
/* the section below has a tall top padding that overlaps the gap: lift the banner above it, or it would swallow the clicks */
.mil-inner-banner:has(.baz-pc-flag),.mil-banner-content:has(.baz-pc-flag){position:relative;z-index:6}
.baz-pc-flag{position:absolute;top:30px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;max-width:92vw;white-space:nowrap;
  height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(230,74,63,.35);background:rgba(230,74,63,.07);color:#c93a30;
  font-size:12px;font-weight:600;letter-spacing:.03em;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.baz-pc-flag svg{flex:0 0 auto;color:#E64A3F}
.baz-pc-flag b{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding-left:9px;border-left:1px solid rgba(230,74,63,.35)}
.baz-pc-flag:hover{background:#E64A3F;border-color:#E64A3F;color:#fff}
.baz-pc-flag:hover svg{color:#fff}
.baz-pc-flag:hover b{border-color:rgba(255,255,255,.5)}
.baz-pc-badge{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(21,21,21,.88);color:#fff;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(4px)}
.baz-pc-badge svg{color:#E64A3F}
.mil-blog-card .mil-cover-frame{position:relative}
@media (max-width:520px){.baz-pc-flag{font-size:11px;padding:0 12px;gap:7px}.baz-pc-flag b{display:none}}

/* on a phone the gap between the title and the picture is too small for the pill: it takes its own room there (a little more
 * space in all), centred with the same distance above and below, and it is still the same link down to the player */
@media (max-width:767px){
  .baz-pc-flagwrap{height:auto;margin:22px 0 -36px;line-height:0}
  .baz-pc-flag{position:static;transform:none;line-height:1.2}
}
.baz-pc-listen{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border:0;border-radius:999px;background:#E64A3F;color:#fff;font:600 11px/1 inherit;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .2s}
.baz-pc-listen:hover{background:#c93a30;transform:translateY(-1px)}
.baz-pc-listen svg{width:13px;height:13px;fill:currentColor}
.baz-pc-listen em{font-style:normal;opacity:.75}
.baz-pc-card-links{align-items:center}
