/**
 * File: css/press-mobile.css
 *
 * Mobile Press page (< 992px). Companion to js/press-mobile.js, which builds
 * the whole block from the same window.VIEWCHAT_NEWS array the desktop block
 * reads, so there is one list of articles and two presentations of it.
 *
 * Everything except the one `.press-m { display: none }` line below lives
 * inside @media (max-width: 991.98px), so the desktop Press page cannot be
 * reached from here: above the breakpoint this file contributes nothing but a
 * hidden root, and css/press-desktop.css owns the page exactly as before.
 *
 * The visual language is the reference's: a white page, one soft-shadowed
 * featured card, hairline-bordered rows, radius 16-18, and coral used only for
 * active states, sources, arrows and dots.
 */

.press-m { display: none; }

@media (max-width: 991.98px) {

  /* The legacy blog feed steps aside, the way the desktop block does above the
     breakpoint. !important is required on the paginator, not defensive:
     js/page-pagination.js writes an inline style.display on this root, and an
     inline display beats a plain stylesheet rule. */
  body.press-page #blog-page,
  body.press-page .page-pagination,
  body.press-page .page-pagination + hr.divider { display: none !important; }

  .press-m {
    display: block;
    /* Exactly the fixed mobile header's height, so the hero opens flush under
       it — the same value css/creators-pages.css and css/changelog-mobile.css
       use for their phone heroes. */
    padding-top: 80px;
    /* The footer brings 100px of its own air above the logo; this is only the
       space under the disclosure button. */
    padding-bottom: clamp(26px, 7vw, 36px);
    /* White, so the hero artwork's own white ground has no edge of its own.
       images/press/press-hero-mobile.webp is flat-fielded to #fff for exactly
       this reason: no panel, no tint, no grey block behind the art. */
    background: #fff;
    color: var(--pm-ink);

    --pm-ink: #0C0B2B;
    --pm-ink-2: #45445F;
    --pm-ink-3: #8A8A9E;
    --pm-coral: #FF3B61;
    --pm-line: rgba(12, 11, 43, .085);
    --pm-line-2: rgba(12, 11, 43, .06);
    --pm-radius: 18px;
    --pm-radius-2: 16px;
    --pm-ease: cubic-bezier(.22, .61, .36, 1);
  }

  .press-m__inner {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    padding-inline: clamp(20px, 6vw, 28px);
  }

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

  .press-m__hero { padding-top: clamp(18px, 5vw, 26px); }

  .press-m__eyebrow {
    margin: 0;
    color: var(--pm-coral);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
  }

  /* Two lines by construction rather than by luck: each line is its own span,
     so "VIEWCHAT" and "IN THE NEWS." break where the reference breaks them at
     every width and in every language. */
  .press-m__title {
    margin: clamp(12px, 3.4vw, 16px) 0 0;
    color: var(--pm-ink);
    font-size: clamp(29px, 8.4vw, 38px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.02;
    text-transform: uppercase;
  }

  .press-m__title > span { display: block; }

  .press-m__dot { color: var(--pm-coral); }

  .press-m__lede {
    /* Measure in em so a language change costs a line rather than the layout. */
    max-width: 24em;
    margin: clamp(12px, 3.4vw, 16px) 0 0;
    color: var(--pm-ink-2);
    font-size: clamp(13.5px, 3.6vw, 15px);
    line-height: 1.55;
  }

  .press-m__latest {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: clamp(14px, 4vw, 18px) 0 0;
    color: var(--pm-ink-2);
    font-size: clamp(12.5px, 3.4vw, 13.5px);
    line-height: 1.2;
  }

  .press-m__latest svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--pm-coral);
  }

  /* The illustration is shown whole: `contain` inside a box that already has
     the file's own aspect ratio, so there is no crop, no letterbox and no
     distortion at any width. The asset carries no shadow and needs no ground —
     its white matches the section's. */
  .press-m__art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 900 / 569;
    margin: clamp(16px, 4.6vw, 22px) 0 0;
    object-fit: contain;
    object-position: center;
  }

  /* --- filters and search --------------------------------------------------- */

  .press-m__toolbar { padding-top: clamp(18px, 5vw, 24px); }

  .press-m__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  /* The reference's two rows, held by construction: the break after the fourth
     pill puts Business and Partnership on their own line at 430 as well as at
     360, where wrapping alone would give 5 + 1. Languages with longer words
     still wrap freely past it, so nothing can overflow. */
  .press-m__pill-break {
    flex: 0 0 100%;
    height: 0;
    margin: 0;
  }

  .press-m__pill {
    height: 34px;
    padding-inline: 16px;
    border: 1px solid var(--pm-line);
    border-radius: 999px;
    background: #fff;
    color: #5B5A71;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color 160ms var(--pm-ease), border-color 160ms var(--pm-ease),
      background-color 160ms var(--pm-ease);
  }

  .press-m__pill[aria-pressed="true"] {
    border-color: transparent;
    background: var(--pm-coral);
    color: #fff;
    font-weight: 700;
  }

  .press-m__pill:focus-visible {
    outline: 2px solid var(--pm-coral);
    outline-offset: 2px;
  }

  .press-m__search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    margin-top: clamp(11px, 3.2vw, 14px);
    padding-inline: 15px 5px;
    border: 1px solid var(--pm-line);
    border-radius: 999px;
    background: #fff;
  }

  .press-m__search > svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #A7A7B8;
  }

  .press-m__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pm-ink);
    font-family: inherit;
    /* 16px: anything smaller and iOS Safari zooms the page on focus. */
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
  }

  .press-m__search input::placeholder { color: #A7A7B8; font-size: 14px; }
  .press-m__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .press-m__search input:focus { outline: none; }

  .press-m__search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 59, 97, .1);
    color: var(--pm-coral);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 160ms var(--pm-ease);
  }

  .press-m__search-btn svg { width: 15px; height: 15px; }

  .press-m__search-btn:focus-visible {
    outline: 2px solid var(--pm-coral);
    outline-offset: 2px;
  }

  /* --- section labels ------------------------------------------------------- */

  .press-m__label {
    margin: 0 0 clamp(11px, 3.2vw, 14px);
    color: var(--pm-ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
  }

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

  .press-m__featured { padding-top: clamp(22px, 6vw, 30px); }

  .press-m__featured[hidden] { display: none !important; }

  /* One card at a time, swiped. Scroll snap does the gesture natively, so the
     motion is the platform's own — no autoplay, no transform animation, and
     the cards stay real links for a reader who never swipes. */
  .press-m__track {
    position: relative;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .press-m__track::-webkit-scrollbar { width: 0; height: 0; display: none; }

  /* No scroll-snap-stop here on purpose: Chrome honours `always` for
     programmatic scrolls too, which would make a tap on the third dot stop at
     the second card. Mandatory snap alone already gives one card per swipe. */
  .press-m__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .press-m__fcard {
    display: block;
    overflow: hidden;
    border: 1px solid var(--pm-line-2);
    border-radius: var(--pm-radius);
    background: #fff;
    /* The one shadow on the page, and it is a whisper: the reference's featured
       card reads as a lifted outline, not a floating panel. */
    box-shadow: 0 1px 2px rgba(12, 11, 43, .04), 0 8px 20px rgba(12, 11, 43, .045);
    color: inherit;
    text-decoration: none;
  }

  .press-m__fimg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    background: #F4F4F8;
  }

  .press-m__fbody { padding: clamp(15px, 4.2vw, 18px) clamp(15px, 4.2vw, 18px) clamp(16px, 4.4vw, 19px); }

  .press-m__fsource {
    margin: 0;
    color: var(--pm-coral);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .press-m__ftitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 10px 0 0;
    color: var(--pm-ink);
    font-size: clamp(16px, 4.4vw, 18px);
    font-weight: 800;
    letter-spacing: -.014em;
    line-height: 1.36;
  }

  .press-m__fdate {
    margin: 10px 0 0;
    color: var(--pm-ink-3);
    font-size: 12.5px;
    line-height: 1;
  }

  .press-m__fexcerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 11px 0 0;
    color: #5B5A71;
    font-size: 13.5px;
    line-height: 1.55;
  }

  .press-m__fread {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: clamp(13px, 3.6vw, 16px);
    color: var(--pm-coral);
    font-size: 13.5px;
    font-weight: 700;
  }

  .press-m__fread svg { width: 16px; height: 11px; }

  .press-m__fcard:focus-visible {
    outline: 2px solid var(--pm-coral);
    outline-offset: 3px;
  }

  /* Pagination dots. Three taps as well as three swipes, and the active one is
     a pill rather than a bigger circle, as in the reference. */
  .press-m__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: clamp(14px, 4vw, 18px);
  }

  .press-m__dots[hidden] { display: none !important; }

  .press-m__dot-btn {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(12, 11, 43, .14);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: width 200ms var(--pm-ease), background-color 200ms var(--pm-ease);
  }

  .press-m__dot-btn[aria-current="true"] {
    width: 20px;
    background: var(--pm-coral);
  }

  .press-m__dot-btn:focus-visible {
    outline: 2px solid var(--pm-coral);
    outline-offset: 3px;
  }

  /* --- all articles --------------------------------------------------------- */

  .press-m__all { padding-top: clamp(26px, 7vw, 34px); }

  .press-m__all[hidden] { display: none !important; }

  .press-m__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .press-m__row {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 11px;
    border: 1px solid var(--pm-line-2);
    border-radius: var(--pm-radius-2);
    background: #fff;
    color: inherit;
    text-decoration: none;
  }

  .press-m__row:focus-visible {
    outline: 2px solid var(--pm-coral);
    outline-offset: 2px;
  }

  .press-m__row-img {
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    border-radius: 11px;
    object-fit: cover;
    object-position: center;
    background: #F4F4F8;
  }

  .press-m__row-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .press-m__row-source {
    margin: 1px 0 0;
    color: var(--pm-coral);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .press-m__row-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 7px 0 0;
    color: var(--pm-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.008em;
    line-height: 1.4;
  }

  .press-m__row-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 9px;
  }

  .press-m__row-date {
    color: var(--pm-ink-3);
    font-size: 11.5px;
    line-height: 1;
  }

  .press-m__row-foot svg { flex: 0 0 auto; width: 16px; height: 11px; color: var(--pm-coral); }

  /* --- the disclosure ------------------------------------------------------- */

  /* Height comes from grid-template-rows 0fr -> 1fr, so the panel animates to
     its own content height with no measurement and nothing is scaled.
     Collapsed it is visibility:hidden, which takes the links out of the tab
     order; that switch is delayed by the length of the collapse so the cards
     stay on screen while the height runs out. */
  .press-m__rest {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    /* closing */
    transition:
      grid-template-rows 300ms var(--pm-ease),
      visibility 0s linear 300ms;
  }

  .press-m__rest-clip { min-height: 0; overflow: hidden; }

  /* The gap above the extra rows lives inside the clip, so it collapses too. */
  .press-m__rest .press-m__list { padding-top: 10px; }

  .press-m__rest .press-m__list {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition:
      opacity 180ms var(--pm-ease),
      transform 180ms var(--pm-ease);
  }

  .press-m__all.is-expanded .press-m__rest {
    grid-template-rows: 1fr;
    visibility: visible;
    /* opening */
    transition:
      grid-template-rows 330ms var(--pm-ease),
      visibility 0s;
  }

  /* The content settles slightly behind the height, so it lands in a space
     already made for it and nothing is seen through the clip. */
  .press-m__all.is-expanded .press-m__rest .press-m__list {
    opacity: 1;
    transform: none;
    transition:
      opacity 260ms var(--pm-ease) 80ms,
      transform 260ms var(--pm-ease) 80ms;
  }

  .press-m__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: clamp(14px, 4vw, 18px);
    padding: 0 20px;
    border: 1px solid rgba(255, 59, 97, .35);
    border-radius: 999px;
    background: #fff;
    color: var(--pm-coral);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.005em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 160ms var(--pm-ease), background-color 160ms var(--pm-ease);
  }

  .press-m__more[hidden] { display: none !important; }

  .press-m__more:focus-visible {
    outline: 2px solid var(--pm-coral);
    outline-offset: 3px;
  }

  .press-m__more-chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin: -4px 0 0;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: rotate(45deg);
    transition: transform 330ms var(--pm-ease), margin-top 330ms var(--pm-ease);
  }

  .press-m__all.is-expanded .press-m__more-chevron {
    margin-top: 4px;
    transform: rotate(225deg);
  }

  /* --- empty state ---------------------------------------------------------- */

  .press-m__empty {
    margin: clamp(26px, 7vw, 34px) 0 0;
    color: var(--pm-ink-2);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }

  .press-m__empty[hidden] { display: none !important; }
}

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

  html.lang-ar .press-m__fread svg,
  html.lang-ar .press-m__row-foot svg { transform: scaleX(-1); }
}

/* Motion turned down: the disclosure still opens and closes, it simply arrives
   already there. The transitions are cancelled rather than shortened, and the
   panel is pinned to its resting pose so a collapsed list can never be left
   faded out. */
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .press-m__rest,
  .press-m__all.is-expanded .press-m__rest { transition: visibility 0s; }

  .press-m__rest .press-m__list,
  .press-m__all.is-expanded .press-m__rest .press-m__list {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .press-m__more-chevron,
  .press-m__pill,
  .press-m__dot-btn { transition: none; }
}