/* journal.small.css — the blog list below 768px
 *
 * From the Mobile view design setup mobile handoff →
 * `design_handoff_mobile_pages/Blog List Mobile.dc.html`, designed at 375px.
 *
 * ONE BAND ONLY, at the site's single 768px breakpoint. journal.css is
 * clamp-based above it and needs no tablet fallback.
 *
 * THE GUTTER IS SET ONCE, on .jr__wrap. Every block inside it then runs edge to
 * edge of that padding box, which is how the featured card, the quiz panel and
 * the rows all land on the same 20px gutter without repeating it seven times.
 * The closer and the pager sit outside the wrap and state it themselves.
 *
 * COLOURS ARE INHERITED, NOT RESTATED — the handoff's table wants the labels at
 * #a80017, and journal.css puts every red on this page on --red-label by
 * Zsolt's 2026-08-12 decision, which tokens.css says in terms not to revert.
 * This sheet changes structure, spacing and type size only. See the summary.
 */

@media (max-width: 767.98px) {

  .jr__wrap { padding: 36px 20px 0; }


  /* --- masthead ------------------------------------------------------------
     Desktop sets the headline against the standfirst as a wrapped flex row with
     the rule under both. At this width they stack, and the rule belongs to the
     standfirst alone — so the row's own border comes off. */

  .jr__masthead {
    display: block;
    padding-bottom: 0;
    border-bottom: 0;
  }
  .jr__eyebrow { font-size: 11px; }
  .jr__h1 {
    margin-top: 18px;
    /* FLUID, NOT FIXED. 44px does not fit a narrow phone: the last line of
       "Döntések, nem dashboardok." overflowed its own box and carried the
       document 11px wide at 390 and 26px at 375 — the handoff's own acceptance
       width. The tell was that overflow + viewport was a CONSTANT 401px in
       Hungarian and 361px in English, which is a fixed element, not a fluid one.
       English hid the fault (only 320 suffered); Hungarian is the longer
       language and failed at the target width.

       overflow-wrap is the backstop, not the fix — it only engages when a single
       word still cannot fit, so a future long compound cannot reopen this. */
    font-size: min(44px, 9.6vw); line-height: .94;
    overflow-wrap: anywhere;
  }
  .jr__standfirst {
    margin: 20px 0 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--hair-on-light);
    max-width: none;
    font-size: 12px;
    text-align: left;                /* right-aligned only in the desktop row */
  }


  /* --- featured card -------------------------------------------------------
     Desktop is three tracks — rail, copy, cover. Here it becomes one column in
     the design's reading order: cover, meta, headline, excerpt, link.

     THE COVER IS LAST IN THE DOM (rail, body, cover) because that is the order
     the desktop grid wants, so it takes order: -1 to lead. The markup is frozen
     and this is exactly what order is for. */

  .jr-feat {
    display: flex; flex-direction: column;
    margin: 0 0 34px;
  }
  .jr-feat__cover {
    order: -1;
    min-height: 0;                   /* desktop's 330px floor would stretch it */
    aspect-ratio: 16 / 10;
  }
  .jr-feat .jr-cover__label { left: 14px; bottom: 12px; }

  /* The rail's two mono blocks become the one meta line above the headline. */
  .jr-feat__rail {
    flex-direction: row; flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    padding: 22px 20px 0;
    border-right: 0;
  }
  .jr-feat__tag,
  .jr-feat__meta { font-size: 10px; line-height: 1.6; letter-spacing: .16em; }

  .jr-feat__body { padding: 0 20px 24px; }
  .jr-feat__h2 { margin: 14px 0 12px; }
  .jr-feat__excerpt {
    margin-bottom: 20px;
    max-width: none;
    font-size: 15px; line-height: 1.6;
  }
  /* 44px is the touch-target floor, and an 11px line does not reach it alone. */
  .jr-feat__more { min-height: 44px; font-size: 11px; }


  /* --- list rows -----------------------------------------------------------
     Two columns become one, and each card keeps its own hairline so the run
     reads as a list rather than as separated blocks. */

  .jr-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .jr-card {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
  }
  .jr-card .jr-cover__label {
    left: 8px; bottom: 7px;
    font-size: 8.5px;
  }
  .jr-card__meta { margin-bottom: 9px; font-size: 9.5px; letter-spacing: .14em; }
  .jr-card__h3 { margin-bottom: 8px; font-size: 17px; line-height: 1.16; }
  .jr-card__excerpt { font-size: 13px; line-height: 1.5; }
  .jr-card__read { margin-top: 10px; font-size: 9.5px; }


  /* --- quiz call-out -------------------------------------------------------
     The copy block and the button stop being a two-track row. gap stays 0: the
     paragraph's own 20px bottom margin is the space above the button, so a grid
     gap here would double it. */

  .jr-quiz {
    grid-template-columns: 1fr;
    gap: 0;
    margin: 28px 0;
    padding: 26px 20px;
  }
  .jr-quiz__h2 { font-size: 26px; }
  .jr-quiz__p {
    margin-bottom: 20px;
    max-width: none;
    font-size: 12px;
  }
  /* Full-width bar with the arrow parked right — an inline-flex chip at this
     width either fills the row anyway or leaves a ragged gap beside it. */
  .jr-quiz__cta {
    display: flex; justify-content: space-between;
    padding: 18px 20px;
    font-size: 11.5px;
  }


  /* --- the closer ---------------------------------------------------------- */

  .jr__closer-wrap { padding: 0 20px; }
  .jr-closer {
    grid-template-columns: 1fr;
    margin-top: 34px;
    max-width: none;
  }
  /* Already first in the DOM here, unlike the featured card — no order needed. */
  .jr-closer__cover {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .jr-closer__body { padding: 24px 20px 26px; }
  .jr-closer__meta { margin-bottom: 16px; font-size: 10px; }
  .jr-closer__h2 { margin-bottom: 16px; font-size: 28px; }
  .jr-closer__excerpt {
    margin-bottom: 24px;
    max-width: none;
    font-size: 12px;
  }
  .jr-closer__cta {
    align-self: stretch;             /* desktop pins it left at its own width */
    display: flex; justify-content: space-between;
    padding: 18px 20px;
    font-size: 11.5px;
  }


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

  .jr-pager { padding: 34px 20px 44px; }

  .jr-pager__next {
    grid-template-columns: 1fr;      /* the action drops under the title */
    gap: 10px;
    padding: 22px 0;
  }
  .jr-pager__next-title { font-size: 18px; }
  .jr-pager__next-act { font-size: 10px; }

  .jr-pager__pages {
    gap: 16px;
    padding-top: 16px;
    font-size: 10.5px;
  }
}


/* =========================================================================
   Below 360px — the narrowest frame the site supports
   -------------------------------------------------------------------------
   The handoff's reference frame is 375 and its acceptance check is "375px wide:
   no horizontal overflow", so everything above still renders exactly as drawn.
   This band exists only because Hungarian is the longer language: at 320 the
   card meta run "KATEGÓRIA · 2026. 01. 08." is 45px wider than the frame, and a
   page-wide horizontal scrollbar is a worse outcome than the thing the nowrap
   was protecting against.

   THE NOWRAP IS DELIBERATE AND IS ONLY BEING OVERRIDDEN HERE — journal.css says
   why: "the run is 'category · date' and breaking it puts the date alone on a
   second line under a one-word category". That objection is still right, and at
   375 and up the run stays on one line. Tightening the tracking first means the
   break only happens when the text genuinely cannot fit, rather than always.

   Measured at 320: tracking alone left Hungarian 27px over, tracking plus a 9px
   size left it 16px over. Only allowing the break clears it. */
@media (max-width: 360px) {
  .jr-card__meta {
    letter-spacing: .08em;
    white-space: normal;
  }
}