/* ============ ТЕЛЕФОН У ЛАНДШАФТІ (низьке вікно) ============
   Це «веб-версія» (як на десктопі), але вікно коротке — 250…430 px: усе, що мало фіксовану висоту, стає компактним,
   віджет і плеєр підлаштовуються під висоту екрана, відступи враховують виріз (safe-area).
   Умова збігається з SP.mq у js/core.js (там — протилежна: портретний телефон). */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --gutter: max(14px, env(safe-area-inset-left)); --gutter-r: max(14px, env(safe-area-inset-right)); }
  /* висоту беремо з JS (--app-h = window.innerHeight): 100dvh у вбудованих браузерах телефона бувають більшими за видиму область */
  body { height: var(--app-h, 100dvh); }

  .topbar { padding: 7px var(--gutter-r) 7px var(--gutter); font-size: 10px; justify-content: flex-start; align-items: center; }
  .topbar__title { margin-left: auto; }
  /* на низькому екрані місця під написом немає — лого стає в рядок верхньої смуги, правіше від «експедиція 01» */
  .label-logo--web { position: static; translate: none; --h: 22px; margin: -6px 0; }
  .card { flex-grow: 0; flex-shrink: 0; min-width: 0; }   /* низький екран: картки не розтягуються (інакше росте висота стрічки), лишаються по центру колонки */

  /* ---------- головна ---------- */
  .home { margin: 0 var(--gutter-r) 0 var(--gutter); gap: clamp(14px, 3vw, 36px); }

  /* віджет: обкладинка ліворуч, назва / повзунок / кнопки праворуч */
  .widget { flex: 0 0 clamp(290px, 40vw, 420px); --wr: 18px; }
  .widget__in {
    display: grid; grid-template-columns: clamp(92px, calc(var(--app-h, 100dvh) * .36), 176px) minmax(0, 1fr);
    grid-template-areas: "art meta" "art seek" "art ctrl";
    grid-template-rows: auto auto auto;
    column-gap: 14px; row-gap: 2px; align-content: center; align-items: center;
    padding: 10px 14px;
  }
  .widget__head, .widget__vol { display: none; }
  .widget__art { grid-area: art; align-self: center; max-height: none; border-radius: 10px; }
  .widget__meta { grid-area: meta; height: 40px; align-content: center; }
  .widget__meta b { font-size: 15px; -webkit-line-clamp: 1; }
  .widget__meta span { font-size: 12px; }
  .widget__seek { grid-area: seek; }
  .widget__ctrl { grid-area: ctrl; gap: 14px; }
  .widget__times { font-size: 10px; }
  .wbtn { width: 38px; height: 38px; }
  .wbtn svg { width: 22px; height: 22px; }
  .wplay { width: 46px; height: 46px; }
  .wplay svg { width: 22px; height: 22px; }
  .widget .seek { height: 22px; }

  /* стрічка прев'ю: менші картки, висота від висоти екрана */
  .strip { padding: 7px 0 max(7px, env(safe-area-inset-bottom)); }
  .strip__row { gap: 10px; padding: 3px var(--col-r, var(--gutter-r)) 3px var(--col-l, var(--gutter)); scroll-padding-inline: var(--col-l, var(--gutter)) var(--col-r, var(--gutter-r)); }
  .card { flex-basis: clamp(58px, calc(var(--app-h, 100dvh) * .21), 108px); gap: 4px; }
  .card__meta { font-size: 10px; gap: 4px; }
  .card__meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* на телефоні в ландшафті висота стрічки обмежена — один рядок */
  .card__badge { left: 4px; bottom: 4px; font-size: 8px; padding: 2px 4px; }
  .card__eq { right: 4px; top: 4px; padding: 3px 4px; height: 12px; }
  .card--soon .card__img { font-size: 9px; }
}
/* зовсім низьке вікно (напр. Safari із панелями): у стрічці лише номери */
@media (orientation: landscape) and (max-height: 330px) {
  .card__meta span { display: none; }
}

/* ---------- великий плеєр у ландшафті ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .player::before { display: none; }
  .player__close {
    top: max(6px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
    width: 40px; height: 40px; background: rgba(255, 255, 255, .55); border-radius: 50%;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .nav { width: 44px; height: 44px; }
  .nav--prev { left: max(4px, env(safe-area-inset-left)); }
  .nav--next { right: max(4px, env(safe-area-inset-right)); }
  .slide { border-radius: var(--r-big); box-shadow: 0 12px 30px -14px rgba(20, 86, 143, .5), 0 1px 6px rgba(20, 86, 143, .12); }
  .slides { gap: clamp(10px, 2vw, 24px); margin-block: 0; }
}

/* Велика обкладинка на весь екран (як на ПК), керування — одним рядком поверх її нижнього краю:
   [play] 0:00 ——— 4:44  02 / 08  [гучність]. Обкладинка займає всю висоту видимої області (--app-h), нічого не обрізається. */
@media (orientation: landscape) and (max-height: 500px) {
  .player {
    inset: 0 0 auto 0; height: var(--app-h, 100dvh);
    --pad-b: max(6px, env(safe-area-inset-bottom, 0px));
    --r-big: 18px;
    --w: min(92vw, calc((var(--app-h, 100dvh) - 6px - var(--pad-b)) * var(--ratio)), 1180px);
  }
  /* Надійніше за JS: плеєр прибито до видимої області (fixed + inset:0), а розмір обкладинки рахується від висоти самого плеєра (cqh).
     Так вона завжди влазить, навіть коли Safari показує/ховає панелі й innerHeight відстає. */
  @supports (height: 1cqh) {
    .player { inset: 0; height: auto; container-type: size; --w: min(92cqw, calc((100cqh - 6px - var(--pad-b)) * var(--ratio)), 1180px); }
  }
  .slide img { border-radius: inherit; }   /* картинка сама заокруглена — у Safari кути не «вилазять» з-під overflow */
  .slides { padding: 6px calc((100% - var(--w)) / 2) var(--pad-b); }
  .player__bar {
    --line: rgba(20, 86, 143, .3);
    position: absolute; bottom: var(--pad-b); width: var(--w); box-sizing: border-box;
    display: flex; align-items: center; gap: 8px; padding: 14px 10px 6px 8px;
    border-radius: 0 0 var(--r-big) var(--r-big);
    background: linear-gradient(to top, rgba(255, 255, 255, .78) 55%, rgba(255, 255, 255, 0));   /* плавна підкладка — елементи читаються поверх тексту на обкладинці */
  }
  /* розкладаємо обидва блоки керування в один рядок */
  .player__bar .bar-top, .player__bar .transport { display: contents; }
  .player__bar .play { position: static; order: 1; flex: none; width: 34px; height: 34px; }
  .player__bar .play svg { width: 14px; height: 14px; }
  .player__bar #tCur { order: 2; }
  .player__bar .seek { order: 3; flex: 1; min-width: 0; height: 28px; }
  .player__bar #tDur { order: 4; }
  .player__bar .now { order: 5; }
  .player__bar .vol { order: 6; gap: 4px; }
  .player__bar .vol__range { width: clamp(56px, 11vw, 100px); height: 28px; }
  .player__bar .vol__btn { width: 24px; height: 24px; }
  .player__bar .vol__btn svg { width: 17px; height: 17px; }
  .player__bar .time { font-size: 11px; min-width: 0; }
  .player__bar .now { font-size: 11px; gap: 0; }
  .player__bar .seek, .player__bar .vol__range, .player__bar .play, .player__bar .vol__btn, .player__bar .time, .player__bar .now__n { filter: none; }
}

/* зовсім низьке вікно: повзунок гучності ховаємо (на телефоні — кнопки гучності), лишається кнопка вимкнення звуку; повзунок перемотки отримує місце */
@media (orientation: landscape) and (max-height: 330px) {
  .player__bar .vol__range { display: none; }
  .player__bar .now { font-size: 10px; }
}