/**
 * File: css/youtube-desktop.css
 *
 * Desktop YouTube page (>= 992px). Companion to js/youtube-desktop.js, which
 * builds the block from the .yt-card anchors in the legacy #blog-page section —
 * the same links, thumbnails, titles and metadata the phone grid uses.
 *
 * Every rule lives inside @media (min-width: 992px) except `.yt-d { display:
 * none }` and the RTL block at the end, so nothing here reaches the phone
 * layout: below 992px #blog-page renders exactly as before.
 *
 * Scale follows the reference: a min(86vw, 1240px) column, a light hero whose
 * height is set by a 16:9 featured player at 64% of that column, a row of three
 * 16:9 cards, a rail of 9:16 shorts and a seamless left-running strip.
 */

.yt-d { display: none; }

@media (min-width: 992px) {

  /* The legacy grid is the phone layout; on desktop the block below replaces
     it, paginator included. !important on the paginator is required rather
     than defensive: js/page-pagination.js writes an inline style.display. */
  body.youtube-page #blog-page,
  body.youtube-page .page-pagination,
  body.youtube-page .page-pagination + hr.divider { display: none !important; }

  /* Current page in the shared header, the same mechanism the Creators page
     uses at css/creators-desktop.css:141 and scoped to this page's body class,
     so no other page's header is touched. */
  body.youtube-page .youtube-nav-item > a.h-link,
  body.youtube-page .youtube-nav-item > a.h-link:hover {
    color: #FF3B61 !important;
    font-weight: 700;
  }

  .yt-d {
    display: block;
    /* The header is shared chrome with no height of its own: it overlays the
       page and wraps to two rows below 1200px, and Arabic's nav wraps at a
       different width again. js/youtube-desktop.js measures the header's own
       lowest link and writes --ytd-top; this is only the no-JS fallback. */
    padding-top: var(--ytd-top, 96px);
    padding-bottom: 34px;
    background: #fff;
    color: var(--ytd-ink);

    --ytd-ink: #0C0B2B;
    --ytd-ink-2: #45445F;
    --ytd-ink-3: #8A8A9E;
    --ytd-coral: #FF3B61;
    --ytd-line: rgba(12, 11, 43, .08);
    --ytd-radius: 12px;
    /* One ambient shadow, reused: two low-opacity layers in a cool navy rather
       than black, which is what keeps it out of the grey-smudge register. */
    --ytd-lift: 0 2px 6px rgba(19, 22, 48, .05), 0 18px 42px -18px rgba(19, 22, 48, .22);
    --ytd-lift-hover: 0 3px 10px rgba(19, 22, 48, .07), 0 26px 56px -20px rgba(19, 22, 48, .28);
  }

  .yt-d__wrap {
    width: min(86vw, 1240px);
    margin-inline: auto;
  }

  /* --- hero ---------------------------------------------------------------- */

  .yt-d__hero {
    background: linear-gradient(112deg, #FAFBFD 0%, #F5F7FB 52%, #F2F5FA 100%);
  }

  /* The player is 16:9 at 64% of the column, and the hero is as tall as the
     player plus its air — 396px at 1100, about 500 at 1440. The reference's
     390px hero and its 1240px column cannot both hold at 16:9; the proportions
     are what the reference is for, so those are what this follows. */
  .yt-d__hero-grid {
    display: grid;
    grid-template-columns: 30% minmax(0, 64%);
    justify-content: space-between;
    align-items: center;
    padding-block: 26px;
  }

  .yt-d__eyebrow {
    margin: 0;
    color: var(--ytd-coral);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
  }

  .yt-d__headline {
    margin: 16px 0 0;
    color: var(--ytd-ink);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.12;
  }

  .yt-d__headline > span { display: block; }
  .yt-d__dot { color: var(--ytd-coral); }

  .yt-d__lede {
    max-width: 300px;
    margin: 16px 0 0;
    color: var(--ytd-ink-2);
    font-size: 14.5px;
    line-height: 1.6;
  }

  .yt-d__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 12px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF3B61 0%, #FF6A88 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 24px -12px rgba(255, 59, 97, .75);
    transition: box-shadow 200ms ease;
  }

  .yt-d__cta:hover { color: #fff; box-shadow: 0 14px 30px -12px rgba(255, 59, 97, .85); }
  .yt-d__cta-mark { display: block; width: 20px; height: 14px; }
  .yt-d__cta-arrow { display: block; width: 16px; height: 11px; }

  /* Кнопка подписки: логотип, подпись и стрелка — три самостоятельных
     элемента флекса, расстояние между ними держит gap, а не отступы
     внутри. Иконкам запрещено сжиматься: по умолчанию flex-shrink: 1, и
     при длинном переводе или узкой колонке места им не оставалось —
     логотип съезжал с 20px до 12px, стрелка с 16px до 10px, и они лезли
     на текст. Подпись, наоборот, ужимается и переносится сама.
     Цвет, форма, кегль, текст и ссылка не трогаются; правило живёт
     внутри десктопного медиазапроса файла, мобильная кнопка своя. */
  .yt-d__cta,
  .yt-d__follow-cta {
    flex-wrap: nowrap;
  }

  .yt-d__cta-mark,
  .yt-d__cta-arrow,
  .yt-d__follow-cta > svg {
    flex: 0 0 auto;
  }

  .yt-d__cta-mark svg,
  .yt-d__cta-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .yt-d__cta > span:not([class]),
  .yt-d__follow-cta > span {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* --- featured carousel ---------------------------------------------------- */

  .yt-d__stage { position: relative; }

  .yt-d__player {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 17px;
    background: #0E1020;
    box-shadow: var(--ytd-lift);
  }

  /* Slides are stacked and cross-faded: nothing moves, so the shadow under the
     player never smears and the play button stays put. */
  .yt-d__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity 420ms cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
  }

  .yt-d__slide.is-active { opacity: 1; pointer-events: auto; }

  .yt-d__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Only as much scrim as the caption needs to stay legible. */
  .yt-d__scrim {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(180deg, rgba(8, 9, 20, 0) 0%, rgba(8, 9, 20, .28) 42%, rgba(8, 9, 20, .74) 100%);
    pointer-events: none;
  }

  .yt-d__caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 0 28px 26px;
    color: #fff;
  }

  .yt-d__caption-tag {
    display: block;
    margin: 0;
    color: #FF7D96;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
  }

  .yt-d__caption-title {
    display: block;
    max-width: 76%;
    margin: 11px 0 0;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: 1.32;
  }

  .yt-d__player-dur {
    position: absolute;
    inset-inline-end: 16px;
    bottom: 18px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(8, 9, 20, .74);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
  }

  /* The play button is the affordance, so hover lifts it a little and nothing
     else in the card moves. */
  .yt-d__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin: -33px 0 0 -33px;
    border: 0;
    border-radius: 50%;
    background: var(--ytd-coral);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 26px -10px rgba(255, 59, 97, .8);
    transition: background 200ms ease, box-shadow 200ms ease;
  }

  .yt-d__play svg { display: block; width: 22px; height: 24px; margin-inline-start: 4px; }
  .yt-d__slide:hover .yt-d__play { background: #FF2B54; box-shadow: 0 12px 30px -10px rgba(255, 59, 97, .9); }
  .yt-d__player:hover { box-shadow: var(--ytd-lift-hover); }

  .yt-d__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border: 1px solid var(--ytd-line);
    border-radius: 50%;
    background: #fff;
    color: var(--ytd-ink-2);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(19, 22, 48, .08);
    transition: color 180ms ease, border-color 180ms ease;
  }

  .yt-d__arrow:hover { color: var(--ytd-coral); border-color: rgba(255, 59, 97, .4); }
  .yt-d__arrow svg { display: block; width: 15px; height: 15px; }
  .yt-d__arrow--prev { inset-inline-start: 14px; }
  .yt-d__arrow--next { inset-inline-end: 14px; }

  .yt-d__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 17px;
  }

  .yt-d__dot-btn {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(12, 11, 43, .16);
    cursor: pointer;
    transition: width 220ms ease, background 220ms ease;
  }

  .yt-d__dot-btn[aria-current="true"] { width: 20px; background: var(--ytd-coral); }

  /* --- Videos / Shorts switch ------------------------------------------------ */

  .yt-d__tabs {
    display: flex;
    gap: 4px;
    width: max-content;
    margin: 20px auto 0;
    padding: 4px;
    border-radius: 999px;
    background: #F3F4F8;
  }

  .yt-d__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ytd-ink-2);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
  }

  .yt-d__tab svg { display: block; width: 15px; height: 13px; }

  .yt-d__tab[aria-pressed="true"] {
    background: linear-gradient(135deg, #FF3B61 0%, #FF6A88 100%);
    color: #fff;
    font-weight: 700;
  }

  /* --- section headers -------------------------------------------------------- */

  .yt-d__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 34px 0 16px;
  }

  .yt-d__head h2 {
    margin: 0;
    color: var(--ytd-ink);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
  }

  .yt-d__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ytd-ink-2);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
  }

  .yt-d__more:hover { color: var(--ytd-coral); }
  .yt-d__more svg { width: 12px; height: 12px; }

  /* --- video cards ------------------------------------------------------------ */

  .yt-d__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }

  .yt-d__card {
    display: block;
    color: inherit;
    text-decoration: none;
  }

  .yt-d__thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 11px;
    background: #EDEEF3;
    box-shadow: 0 1px 2px rgba(19, 22, 48, .05), 0 10px 22px -16px rgba(19, 22, 48, .3);
    transition: box-shadow 220ms ease;
  }

  .yt-d__card:hover .yt-d__thumb { box-shadow: var(--ytd-lift); }

  .yt-d__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* White disc, coral triangle: the same mark at every card size, and hover
     only firms it up — no scale, no jump, so the grid never reflows. */
  .yt-d__thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--ytd-coral);
    box-shadow: 0 4px 14px rgba(8, 9, 20, .18);
    transition: background 200ms ease, box-shadow 200ms ease;
  }

  .yt-d__thumb-play svg { display: block; width: 15px; height: 17px; margin-inline-start: 3px; }
  .yt-d__card:hover .yt-d__thumb-play { background: #fff; box-shadow: 0 6px 18px rgba(8, 9, 20, .24); }

  .yt-d__dur {
    position: absolute;
    inset-inline-end: 8px;
    bottom: 8px;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(8, 9, 20, .78);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
  }

  .yt-d__card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 13px 0 0;
    color: var(--ytd-ink);
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.42;
  }

  .yt-d__card:hover .yt-d__card-title { color: var(--ytd-coral); }

  .yt-d__meta {
    margin: 9px 0 0;
    color: var(--ytd-ink-3);
    font-size: 12.5px;
    line-height: 1.3;
  }

  /* --- shorts rail -------------------------------------------------------------- */

  /* Six to a row at the reference's rhythm; with three shorts on the page the
     trio centres rather than hugging the left edge of an empty row. */
  .yt-d__shorts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }

  .yt-d__short {
    flex: 0 0 calc((100% - 5 * 18px) / 6);
    max-width: calc((100% - 5 * 18px) / 6);
    color: inherit;
    text-decoration: none;
  }

  .yt-d__short .yt-d__thumb {
    aspect-ratio: 9 / 16;
    border-radius: 11px;
  }

  .yt-d__short .yt-d__thumb-play { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .yt-d__short .yt-d__thumb-play svg { width: 12px; height: 14px; }

  .yt-d__short-mark {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--ytd-coral);
    color: #fff;
  }

  .yt-d__short-mark svg { display: block; width: 11px; height: 13px; }

  .yt-d__short .yt-d__card-title {
    -webkit-line-clamp: 2;
    margin-top: 11px;
    font-size: 13px;
    line-height: 1.38;
  }

  .yt-d__short .yt-d__meta { margin-top: 6px; font-size: 12px; }

  /* --- More from ViewChat: the seamless strip ------------------------------------ */

  /* Full-bleed viewport, column-wide fades. The track holds the cards twice —
     the second copy is aria-hidden and untabbable — and travels exactly one
     copy's width, so the loop restarts on an identical frame with nothing to
     see: no jump, no gap, no pause at the seam. */
  .yt-d__strip {
    position: relative;
    overflow: hidden;
    margin-top: 2px;
    padding-block: 6px;
  }

  .yt-d__strip::before,
  .yt-d__strip::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: 90px;
    pointer-events: none;
  }

  .yt-d__strip::before { left: 0; background: linear-gradient(90deg, #fff 8%, rgba(255, 255, 255, 0) 100%); }
  .yt-d__strip::after { right: 0; background: linear-gradient(270deg, #fff 8%, rgba(255, 255, 255, 0) 100%); }

  .yt-d__track {
    display: flex;
    gap: 22px;
    width: max-content;
    will-change: transform;
    /* translate3d keeps it on the compositor; the module writes the offset. */
    transform: translate3d(0, 0, 0);
  }

  .yt-d__track-copy {
    display: flex;
    gap: 22px;
  }

  .yt-d__track .yt-d__card {
    flex: 0 0 auto;
    width: 246px;
  }

  /* --- follow strip ---------------------------------------------------------------- */

  .yt-d__follow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 30px;
    padding: 18px 28px 18px 22px;
    border-radius: 16px;
    background: linear-gradient(100deg, #FEF2F6 0%, #FDF1F5 55%, #FCEFF4 100%);
  }

  .yt-d__follow-copy {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .yt-d__follow-mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: linear-gradient(135deg, #FF3B61 0%, #FF6A88 100%);
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(255, 59, 97, .8);
  }

  .yt-d__follow-mark svg { display: block; width: 28px; height: 20px; }

  .yt-d__follow-title {
    margin: 0;
    color: var(--ytd-ink);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
  }

  .yt-d__follow-text {
    margin: 6px 0 0;
    color: var(--ytd-ink-2);
    font-size: 13px;
    line-height: 1.45;
  }

  .yt-d__follow-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FF3B61 0%, #FF6A88 100%);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 22px -12px rgba(255, 59, 97, .75);
    transition: box-shadow 200ms ease;
  }

  .yt-d__follow-cta:hover { color: #fff; box-shadow: 0 14px 28px -12px rgba(255, 59, 97, .85); }
  .yt-d__follow-cta svg { width: 12px; height: 12px; }

  /* --- narrow desktop ---------------------------------------------------------------- */

  @media (max-width: 1199.98px) {
    .yt-d__headline { font-size: 38px; }
    .yt-d__caption-title { font-size: 18px; }
    .yt-d__play { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
    .yt-d__track .yt-d__card { width: 218px; }
    .yt-d__track,
    .yt-d__track-copy { gap: 18px; }
  }

  /* --- reduced motion ------------------------------------------------------------------ */

  /* The strip is the only thing that moves on its own, and it stops dead — the
     track keeps its width and stays readable, it simply never travels. */
  @media (prefers-reduced-motion: reduce) {
    .yt-d__slide { transition: none; }
    .yt-d__dot-btn { transition: none; }
  }
}

/* Arabic is the only RTL locale and the site switches direction in CSS — there
   is no dir attribute anywhere. Mirrors css/changelog-desktop.css. */
@media (min-width: 992px) {
  html.lang-ar .yt-d {
    direction: rtl;
    text-align: right;
  }

  html.lang-ar .yt-d__cta-arrow,
  html.lang-ar .yt-d__follow-cta svg,
  html.lang-ar .yt-d__more svg { transform: scaleX(-1); }

  /* The strip runs with the reading direction: right in Arabic. */
  html.lang-ar .yt-d__track { direction: ltr; }
}