/* רדיו על הגל – content components (inc/series.php + inc/c-episodes.php). Tokens come from alhagal-child/base.css.
   Show grids, night list, show pills, latest cards, breadcrumb, episode hero, apps/share, episode rows,
   series hero + list, archive (search, chips, cards, load more, pagination). BEM: ah-block__elem--mod, state is-*. */

/* ---------- shared ---------- */
.ah-empty { margin: 0; color: var(--muted); font-size: 16px; }
.ah-label { display: block; font-size: 13px; font-weight: 800; color: var(--muted); }
.ah-cover { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--sand); }
.ah-cover--empty { display: block; }
.ah-h2 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5vw, 56px); line-height: 1; color: inherit; }
.ah-h1--episode, .ah-h1--series { margin: 0; font-family: var(--font-display); font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; }
.ah-h1--episode { font-size: clamp(52px, 8vw, 96px); line-height: .9; }
.ah-h1--series { font-size: clamp(72px, 13vw, 160px); line-height: .85; }
.ah-ep__meta { display: inline; }
.ah-ep__dur, .ah-ep-row__dur, .ah-ep-hero__dur span { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

/* ---------- play buttons (cards / rows; the contract's .ah-play) ---------- */
.ah-play { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--sand); color: var(--ink); cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.ah-play .ah-ico { display: block; width: 18px; height: 18px; }
.ah-play .ah-ico--pause { display: none; }
.ah-play.is-playing .ah-ico--play { display: none; }
.ah-play.is-playing .ah-ico--pause { display: block; }
.ah-play.is-active { background: var(--teal); color: var(--on-accent); }
.ah-play:hover { transform: translateY(-1px); }
.ah-play--overlay { position: absolute; left: 12px; bottom: 12px; background: var(--surface); box-shadow: var(--shadow-play); }
.ah-play--row { background: var(--sand); }
.ah-play--big { width: 52px; height: 52px; }
.ah-play--card { width: 44px; height: 44px; }
.ah-play--card .ah-ico { width: 16px; height: 16px; }

/* ---------- "התוכניות שלנו" grid ---------- */
.ah-shows--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); gap: var(--gap); }
.ah-show { color: var(--ink); text-decoration: none; }
.ah-show--card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ah-show__cover { border-radius: var(--r-cover); box-shadow: var(--shadow-cover); }
.ah-show__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.ah-show__name { font-weight: 800; font-size: 17px; }
.ah-show__hosts { font-size: 14px; color: var(--muted); text-wrap: pretty; }
.ah-show:hover { color: var(--ink); text-decoration: none; }
.ah-show:hover .ah-show__name { text-decoration: underline; }

/* ---------- "ב־21:00" list (on the tile-ink section) ---------- */
.ah-shows--list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 32px; color: var(--footer-text); }
.ah-shows__item { margin: 0; }
.ah-show--row { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(245, 240, 230, .16); color: var(--footer-text); }
.ah-show--row:hover { color: var(--footer-text); }
.ah-show__thumb { flex: none; width: 60px; height: 60px; aspect-ratio: 1; border-radius: var(--r-thumb); object-fit: cover; }
.ah-show--row .ah-show__name { font-size: 17px; }
.ah-show--row .ah-show__hosts { color: var(--footer-muted); }

/* ---------- show pills (live page) ---------- */
.ah-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ah-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 14px 4px 6px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; transition: border-color .2s ease; }
.ah-pill__thumb { flex: none; width: 24px; height: 24px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.ah-pill:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.ah-pill:hover .ah-pill__name { text-decoration: underline; }

/* ---------- "האזנה חוזרת" cards ---------- */
.ah-latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); gap: var(--gap); }
.ah-latest__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; }
.ah-latest__media { position: relative; }
.ah-latest__link { display: block; }
.ah-latest__cover { border-radius: var(--r-cover); }
.ah-latest__text { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; line-height: 1.3; }
.ah-latest__title { font-weight: 800; font-size: 16px; text-wrap: pretty; }
.ah-latest__text .ah-ep__meta { font-size: 13px; color: var(--muted); }
.ah-latest__text:hover { color: var(--ink); text-decoration: none; }
.ah-latest__text:hover .ah-latest__title { text-decoration: underline; }

/* ---------- breadcrumb ---------- */
.ah-crumb { font-size: 14px; color: var(--muted); }
.ah-crumb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ah-crumb__item { display: inline-flex; gap: 8px; margin: 0; }
.ah-crumb__link { color: inherit; text-decoration: none; }
.ah-crumb__link:hover { color: var(--ink); text-decoration: underline; }
.ah-series-hero .ah-crumb { color: inherit; font-weight: 700; }
.ah-series-hero .ah-crumb__link:hover { color: inherit; }

/* ---------- episode hero ---------- */
.ah-ep-hero { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); align-items: flex-start; }
.ah-ep-hero__cover { flex: 0 0 clamp(150px, 34vw, 420px); min-width: 0; }
.ah-ep-hero__img { border-radius: var(--r-card); box-shadow: var(--shadow-big); }
.ah-ep-hero__text { display: flex; flex-direction: column; gap: 18px; flex: 1 1 380px; min-width: 0; }
.ah-ep-hero__show { align-self: flex-start; font-weight: 800; color: var(--teal-ink); text-decoration: none; }
.ah-ep-hero__show:hover { color: var(--ink); text-decoration: underline; }
.ah-ep-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; color: var(--muted); }
.ah-ep-hero__meta > * { white-space: nowrap; }
.ah-ep-hero__desc { max-width: 36em; text-wrap: pretty; }
.ah-prose > :first-child { margin-top: 0; }
.ah-prose > :last-child { margin-bottom: 0; }
.ah-prose p { margin: 0 0 1em; }
.ah-prose a { color: var(--teal-ink); }
.ah-prose a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- apps + share ---------- */
.ah-ep-block { display: flex; flex-direction: column; gap: 10px; }
.ah-apps, .ah-share { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-app { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: var(--sand); color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1; text-decoration: none; transition: transform .2s ease; }
.ah-app .ah-ico { flex: none; width: 16px; height: 16px; }
.ah-app:hover { color: var(--ink); text-decoration: none; transform: translateY(-1px); }
.ah-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s ease; }
.ah-share__btn .ah-ico { width: 18px; height: 18px; }
.ah-share__btn--x .ah-ico { width: 15px; height: 15px; }
.ah-share__btn:hover { color: var(--ink); border-color: var(--ink); }
.ah-copy { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: transparent; color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1; cursor: pointer; transition: border-color .2s ease; }
.ah-copy .ah-ico { width: 18px; height: 18px; }
.ah-copy:hover { border-color: var(--ink); }
.ah-copy.is-copied { border-color: var(--teal); }

/* ---------- episode rows ("עוד הסכתים", series list) ---------- */
.ah-more { display: flex; flex-direction: column; }
.ah-more__title { border-top: 2px solid var(--ink); padding-top: 14px; }
.ah-ep-rows { list-style: none; margin: 0; padding: 0; }
.ah-ep-row { display: flex; align-items: center; gap: 16px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ah-ep-row--series { padding: 16px 0; }
.ah-ep-row__thumb { flex: none; width: 60px; height: 60px; aspect-ratio: 1; border-radius: var(--r-thumb); object-fit: cover; }
.ah-ep-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; line-height: 1.3; }
.ah-ep-row__title { font-weight: 800; font-size: 18px; text-wrap: pretty; }
.ah-ep-row--series .ah-ep-row__title { font-size: 19px; }
.ah-ep-row__text .ah-ep__meta { font-size: 14px; color: var(--muted); }
.ah-ep-row__text:hover { color: var(--ink); text-decoration: none; }
.ah-ep-row__text:hover .ah-ep-row__title { text-decoration: underline; }
.ah-ep-row__dur { flex: none; font-size: 14px; color: var(--muted); }

/* ---------- series hero (inside the lead's teal section) ---------- */
.ah-series-hero { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: center; color: var(--on-accent-deep); }
.ah-series-hero__cover { flex: 0 0 clamp(170px, 34vw, 420px); min-width: 0; }
.ah-series-hero__img { border-radius: var(--r-card); box-shadow: var(--shadow-big); background: var(--deep); }
.ah-series-hero__text { display: flex; flex-direction: column; gap: 18px; flex: 1 1 380px; min-width: 0; }
.ah-series-hero__tagline { margin: 0; font-size: 20px; font-weight: 700; max-width: 32em; text-wrap: pretty; }
.ah-series-hero__hosts { margin: 0; font-size: 18px; font-weight: 600; }
.ah-series-hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ah-hbtn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px; border-radius: var(--r-pill); font-weight: 800; font-size: 16px; line-height: 1; text-decoration: none; transition: transform .2s ease, opacity .2s ease; }
.ah-hbtn .ah-ico { flex: none; width: 18px; height: 18px; }
.ah-hbtn--fill { padding: 0 24px; background: var(--on-accent-deep); color: var(--footer-text); }
.ah-hbtn--outline { border: 1.5px solid currentColor; color: inherit; }
.ah-hbtn:hover { text-decoration: none; transform: translateY(-1px); }
.ah-hbtn--fill:hover { color: var(--footer-text); }
.ah-hbtn--outline:hover { color: inherit; }
.ah-series-eps { display: flex; flex-direction: column; }

/* ---------- archive ---------- */
.ah-archive { display: flex; flex-direction: column; gap: 20px; }
.ah-archive__search { margin: 0; }
.ah-archive__input { display: block; width: 100%; max-width: 520px; height: 54px; padding: 0 18px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none; }
.ah-archive__input::placeholder { color: var(--muted); opacity: 1; }
.ah-archive__input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.ah-archive__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ah-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ah-chips::-webkit-scrollbar { display: none; }
.ah-chip { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.ah-chip:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.ah-chip.is-active, .ah-chip.is-active:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ah-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--gap); transition: opacity .2s ease; }
.ah-archive__grid[aria-busy="true"] { opacity: .55; }
.ah-ep-card { display: flex; flex-direction: column; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-cover); overflow: hidden; }
.ah-ep-card__media { display: block; }
.ah-ep-card__cover { border-radius: 0; }
.ah-ep-card__body { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.ah-ep-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; line-height: 1.3; }
.ah-ep-card__title { font-weight: 800; text-wrap: pretty; }
.ah-ep-card__text .ah-ep__meta { font-size: 13px; color: var(--muted); }
.ah-ep-card__text:hover { color: var(--ink); text-decoration: none; }
.ah-ep-card__text:hover .ah-ep-card__title { text-decoration: underline; }
.ah-archive__foot { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ah-archive__more { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border-radius: var(--r-pill); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.ah-archive__more:hover { background: var(--ink); color: var(--paper); }
.ah-archive__more[disabled] { opacity: .5; cursor: progress; }
.ah-archive__more[hidden], .ah-archive__pages[hidden], .ah-archive__empty[hidden] { display: none; }
.ah-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; }
.ah-pages a, .ah-pages span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.ah-pages a:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.ah-pages .current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ah-pages .dots { border-color: transparent; }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .ah-shows--grid, .ah-latest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ah-ep-row { gap: 12px; }
  .ah-ep-row--more .ah-ep-row__thumb { display: none; }
  .ah-ep-hero__cover { flex-basis: clamp(150px, 34vw, 420px); }
}
@media (max-width: 479px) {
  .ah-ep-hero, .ah-series-hero { flex-direction: column; align-items: stretch; }
  .ah-ep-hero__cover, .ah-series-hero__cover { flex-basis: auto; max-width: 320px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ah-play, .ah-app, .ah-hbtn, .ah-pill, .ah-chip, .ah-archive__grid { transition: none; }
  .ah-play:hover, .ah-app:hover, .ah-hbtn:hover { transform: none; }
}