/**
 * File: css/press-desktop.css
 *
 * Desktop Press page (>= 992px). Companion to js/press-desktop.js, which
 * builds the whole block from the same window.VIEWCHAT_NEWS array the mobile
 * feed reads, so there is one list of articles and two presentations of it.
 *
 * Every rule lives inside @media (min-width: 992px) except `.press-d { display:
 * none }` and the RTL block at the end, so nothing here can reach the phone
 * layout: below 992px the legacy #blog-page section renders exactly as before.
 *
 * Scale comes from the reference: a 1034px working column inside a ~1708px
 * viewport, a 263px hero, a 201px featured card and a row of four 252px cards.
 */

.press-d { display: none; }

@media (min-width: 992px) {

  /* The legacy blog section is the phone layout. On desktop the press block
     below replaces it wholesale, paginator and trailing rule included — the
     paginator is hidden with !important because js/page-pagination.js writes an
     inline style.display on it. */
  body.press-page #blog-page,
  body.press-page .page-pagination,
  body.press-page .page-pagination + hr.divider { display: none !important; }

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

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

    --pd-ink: #0C0B2B;
    --pd-ink-2: #45445F;
    --pd-ink-3: #8A8A9E;
    --pd-coral: #FF3B61;
    --pd-coral-2: #FF5C7D;
    --pd-line: rgba(12, 11, 43, .075);
    --pd-radius: 12px;
  }

  /* The working column. 60vw is the reference's own proportion (1034 of 1708);
     the 900px floor keeps it from collapsing on a 1100-1440 laptop, where 60vw
     would be narrower than at 1100, and the 1040px cap stops the cards from
     stretching across a 1920 display. */
  .press-d__wrap {
    width: min(1040px, max(60vw, 900px), 92vw);
    margin-inline: auto;
  }

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

  /* Full width, but only the ground is: everything inside sits in the column.
     No radius, no border, no shadow — the reference's hero is a tint, not a
     card. */
  .press-d__hero {
    background: linear-gradient(105deg, #F9F9FC 0%, #F6F6FB 55%, #F4F5FA 100%);
  }

  .press-d__hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
    align-items: center;
    gap: 24px;
    min-height: 264px;
    padding-block: 24px;
  }

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

  .press-d__title {
    margin: 14px 0 0;
    color: var(--pd-ink);
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.08;
    text-transform: uppercase;
  }

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

  .press-d__dot { color: var(--pd-coral); }

  .press-d__lede {
    max-width: 400px;
    margin: 14px 0 0;
    color: var(--pd-ink-2);
    font-size: 15px;
    line-height: 1.55;
  }

  .press-d__latest {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0;
    color: var(--pd-ink-2);
    font-size: 13.5px;
    line-height: 1;
  }

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

  /* The illustration is the only asset on the page and it is shown whole:
     `contain` in a box the height of the hero, so no crop and no distortion at
     any width. It carries its own transparency, so it needs no ground of its
     own — no panel, no border, no shadow. */
  .press-d__art {
    display: block;
    width: 100%;
    height: 212px;
    object-fit: contain;
    object-position: center;
  }

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

  .press-d__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 19px;
  }

  .press-d__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
  }

  .press-d__pill {
    height: 32px;
    padding-inline: 17px;
    border: 1px solid var(--pd-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;
    transition: color 160ms ease, border-color 160ms ease;
  }

  .press-d__pill:hover { color: var(--pd-ink); border-color: rgba(12, 11, 43, .16); }

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

  .press-d__search {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 320px;
    height: 36px;
    padding-inline: 15px 5px;
    border: 1px solid var(--pd-line);
    border-radius: 999px;
    background: #fff;
  }

  .press-d__search svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: #A7A7B8;
  }

  .press-d__search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--pd-ink);
    font-family: inherit;
    font-size: 13.5px;
  }

  .press-d__search input::placeholder { color: #A7A7B8; }
  .press-d__search input:focus { outline: none; }

  .press-d__search button {
    flex: 0 0 auto;
    height: 26px;
    padding-inline: 15px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 59, 97, .09);
    color: var(--pd-coral);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease;
  }

  .press-d__search button:hover { background: rgba(255, 59, 97, .16); }

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

  /* The media panel is 56% of the card and carries its own 3/2 ratio, so the
     card's height comes from the picture rather than from a fixed strip. The
     text column then centres itself in whatever that height is. */
  .press-d__featured {
    display: grid;
    grid-template-columns: 56% minmax(0, 1fr);
    margin-top: 17px;
    overflow: hidden;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    background: #fff;
    /* Barely there, by design: the reference's cards read as outlines. */
    box-shadow: 0 1px 2px rgba(12, 11, 43, .025);
  }

  /* Never cropped. The press photos run at about 1.463, so inside a 3/2 box
     the bands are under 3% of the width — and the ground behind them is the
     card's own white, so an odd-sized picture reads as padding, not as a
     letterbox. Scoped to this element: no global img rule is added. */
  .press-d__featured-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    background: #fff;
  }

  .press-d__featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: 28px 34px;
  }

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

  .press-d__featured-source {
    margin: 11px 0 0;
    color: var(--pd-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
  }

  .press-d__featured-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 10px 0 0;
    color: var(--pd-ink);
    font-size: 18.5px;
    font-weight: 800;
    letter-spacing: -.012em;
    line-height: 1.34;
  }

  .press-d__featured-title a { color: inherit; text-decoration: none; }
  .press-d__featured-title a:hover { color: var(--pd-coral); }

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

  .press-d__featured-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 9px 0 0;
    color: #5B5A71;
    font-size: 13px;
    line-height: 1.5;
  }

  .press-d__read {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    color: var(--pd-coral);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
  }

  .press-d__read svg { width: 15px; height: 11px; }
  .press-d__read:hover { color: #E62E52; }

  /* --- the card grid -------------------------------------------------------- */

  /* Three across, as referenced. Four made every card a third narrower than the
     reference's and forced the 100px media strip that was cropping the photos.
     `1fr` rows keep the two rows the same height as each other. */
  .press-d__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 18px;
  }

  .press-d__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--pd-line);
    border-radius: var(--pd-radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(12, 11, 43, .025);
  }

  /* A 16/9 box the whole picture sits inside. The photos are 1.463, so about
     9% of the box's width is left clear on either side — on white that is
     padding rather than a band, which is why the ground is not the old #F4F4F8.
     Scoped to this element only. */
  .press-d__card-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    object-position: center;
    background: #fff;
    border-bottom: 1px solid var(--pd-line);
  }

  .press-d__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px 20px 16px;
  }

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

  .press-d__card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 9px 0 0;
    color: var(--pd-ink);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.008em;
    line-height: 1.42;
  }

  .press-d__card-title a { color: inherit; text-decoration: none; }
  .press-d__card-title a:hover { color: var(--pd-coral); }

  .press-d__card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 12px;
  }

  .press-d__card-date {
    color: var(--pd-ink-3);
    font-size: 12px;
    line-height: 1;
  }

  .press-d__card-foot svg { width: 16px; height: 11px; color: var(--pd-coral); }

  .press-d__empty {
    margin: 22px 0 0;
    color: var(--pd-ink-2);
    font-size: 14px;
    text-align: center;
  }

  /* --- pagination ---------------------------------------------------------- */

  .press-d__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 17px;
  }

  .press-d__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding-inline: 6px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--pd-ink-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
  }

  .press-d__page:hover { background: rgba(12, 11, 43, .045); color: var(--pd-ink); }

  .press-d__page[aria-current="page"] {
    background: linear-gradient(135deg, #FF3B61 0%, #FF6A88 100%);
    color: #fff;
    font-weight: 700;
  }

  .press-d__page[aria-current="page"]:hover { color: #fff; }

  .press-d__page[disabled] { opacity: .35; cursor: default; }
  .press-d__page[disabled]:hover { background: none; color: var(--pd-ink-2); }

  .press-d__page svg { width: 14px; height: 14px; }

  .press-d__gap {
    min-width: 22px;
    color: var(--pd-ink-3);
    font-size: 14px;
    text-align: center;
  }

  /* --- media inquiry -------------------------------------------------------- */

  .press-d__inquiry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    margin-top: 13px;
    padding: 15px 26px;
    border-radius: 14px;
    background: #FDF3F8;
  }

  .press-d__inquiry-copy {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .press-d__inquiry-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF3B61 0%, #FF6A88 100%);
    color: #fff;
  }

  .press-d__inquiry-icon svg { width: 17px; height: 17px; }

  .press-d__inquiry-title {
    margin: 0;
    color: var(--pd-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .press-d__inquiry-text {
    margin: 4px 0 0;
    color: #5B5A71;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .press-d__inquiry-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border: 1px solid rgba(12, 11, 43, .1);
    border-radius: 999px;
    background: #fff;
    color: var(--pd-ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 160ms ease;
  }

  .press-d__inquiry-cta:hover { border-color: rgba(255, 59, 97, .45); color: var(--pd-ink); }
  .press-d__inquiry-cta svg { width: 15px; height: 11px; color: var(--pd-coral); }

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

  /* Between 992 and 1200 the header wraps to two rows and the column is at its
     900px floor. The type steps down one notch so the hero headline still sits
     on two lines beside the illustration. */
  @media (max-width: 1199.98px) {
    .press-d__title { font-size: 42px; }
    .press-d__hero-grid { min-height: 250px; }
    .press-d__art { height: 190px; }
  }
}

/* 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 .press-d {
    direction: rtl;
    text-align: right;
  }

  html.lang-ar .press-d__read svg,
  html.lang-ar .press-d__card-foot svg,
  html.lang-ar .press-d__inquiry-cta svg,
  html.lang-ar .press-d__page svg { transform: scaleX(-1); }
}