/* Styles for articles.hbs — the "مقالات صراف" section.
   Ported from the legacy `components/pages/home/HomeArticles.vue` and
   `components/custom/blogArticles/BlogArticles.vue`; the 1000 breakpoint and
   every size below are the legacy values. */

/* The 40px top margin is the legacy title's own, on top of the 64px the page puts
   between sections. */
.articles-title {
  margin: 40px 0 24px;
  color: var(--gray-900);
  font-size: 21px;
  font-weight: 700;
  text-align: center;
}

/* One list, two layouts.

   Below 1000px this is a snapping scroll row with the next card peeking, which is
   what the legacy Swiper drew; from 1000px it becomes the legacy grid. Doing it
   with one element rather than two hidden alternatives keeps each heading and
   excerpt in the page exactly once.

   The scrollbar needs no hiding here — the global reset in app.css already sets
   `scrollbar-width: none` everywhere, as the other scroll rows in this project
   rely on. The peeking card is the affordance, and because every card is a link,
   tabbing through them scrolls them into view without one. */
.articles-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* How many cards fit across is the row's business, not the card's, so the widths
   live here rather than in article-card.css.

   The fractions are Swiper's: a slide is `(container - gap × (perView - 1)) /
   perView`, and the legacy breakpoints asked for 1.2 slides, then 2.2 at 600, then
   3 at 900. `min-width: 0` is what lets the clamped text inside actually clamp —
   a flex item defaults to `min-width: auto` and would otherwise be forced as wide
   as its longest unbreakable word. */
.articles-track > .article-card {
  flex: 0 0 calc((100% - 3.2px) / 1.2);
  min-width: 0;
  scroll-snap-align: start;
}

/* Set by the island for the duration of a mouse drag.

   Every card is a link, so at rest the cursor stays the link's `pointer` — which
   is also what the legacy row showed, Swiper's `grabCursor` defaulting to false.
   What was missing is any feedback once a drag is actually under way, and that has
   to beat the link cursor on every node inside the row: `cursor` is inherited, but
   the browser's own `a { cursor: pointer }` re-asserts it on each card, so a rule
   on the row alone is invisible over the 95% of it that is card.

   `user-select: none` is what stops the gesture painting a selection across three
   cards of Farsi. `html.js` scopes both to a scripted visitor, since without the
   island there is no drag for either to describe. */
html.js .articles-track--dragging,
html.js .articles-track--dragging * {
  cursor: grabbing;
  user-select: none;
}

.articles-more {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 28px;
  color: var(--gray-900);
  font-size: 16px;
  font-weight: 400;
}

@media (min-width: 600px) {
  .articles-track > .article-card {
    flex-basis: calc((100% - 19.2px) / 2.2);
  }
}

@media (min-width: 900px) {
  .articles-track > .article-card {
    flex-basis: calc((100% - 32px) / 3);
  }
}

@media (min-width: 1000px) {
  .articles-title {
    margin: 40px 0;
    font-size: 36px;
  }

  /* `align-items: start` is the legacy grid's, and it is why each card ends
     where its own text stops instead of being stretched to the tallest of the
     row. Without it grid's default `stretch` lines every bottom border up, which
     is a different row of cards from the one the old site rendered. */
  .articles-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    overflow-x: visible;
  }

  .articles-track > .article-card {
    flex: none;
  }
}

/* --- `/crypto-price/{symbol}/`'s wording of the same row --- */

/* The legacy's `SymbolArticles.vue`: its own margins and a heading a size down
   from the landing page's. Scoped to that page's id so the landing row keeps the
   sizes it already had. */
.articles--related-articles {
  overflow: hidden;
  width: 100%;
  margin: 24px auto;
}

.articles--related-articles .articles-title {
  margin-bottom: 16px;
  font-size: 21px;
  font-weight: 700;
}

@media (min-width: 1000px) {
  .articles--related-articles {
    margin: 36px auto;
    padding: 0;
  }

  .articles--related-articles .articles-title {
    font-size: 24px;
  }
}