/* prices.small.css — the price list below 768px
 *
 * From the Mobile view pricing handoff → `design_handoff_pricing_mobile/`,
 * designed at 375px.
 *
 * Loads after page.small.css and overrides it, the same way prices.css
 * overrides page.css — the Prices page shares the page template's band.
 *
 * ── WHAT THIS SHEET STILL DOES NOT DELIVER ──────────────────────────────────
 * The mobile pricing design is not a restyle of the desktop price list; it is a
 * different component. Two of its parts need markup and state that do not exist
 * yet, and CSS cannot invent either:
 *
 *   1. THE STICKY CATEGORY RAIL — a horizontally scrolling nav of six category
 *      links pinned under the header. There is no nav element on the page.
 *   2. TAPPABLE PACKAGE ROWS — each row a control with aria-expanded, a +/−
 *      sign and a detail panel that opens on tap. The rows render open here.
 *
 * Both are a JavaScript pass, agreed with Zsolt on 2026-08-19 as a separate
 * piece of work. What IS here is the design's typography and row geometry, with
 * every package's details visible rather than behind a tap.
 *
 * ── THE TABLE IS GONE, DELIBERATELY ─────────────────────────────────────────
 * This sheet used to argue the opposite — that the <tr>/<td> roles were worth
 * keeping for a screen reader, and that these rows must not be grid-ised. That
 * held while a package was one row of two cells. It no longer describes the
 * content: a package is now a name, a price, and a block of detail lines that
 * the editor writes in a SECOND row whose price cell is empty. As a table that
 * is a row of data followed by a row with a hole in it, which is worse to hear
 * than to look at.
 *
 * inc/prices.php therefore reads the table and emits each package as a heading,
 * a price and its detail paragraphs. A screen reader gets "Basic Picture, 1000
 * EUR, Who's buying: …" in that order, with no empty cells to announce. The
 * table stays in the editor, where it is a good way to type this; it just is not
 * what reaches the page.
 *
 * ── COLOURS ─────────────────────────────────────────────────────────────────
 * From tokens.css and prices.css, never from the handoff — see the note in
 * prices.css. The mobile handoff asks for #a80017, which is the value Zsolt's
 * decision of 2026-08-12 rejected by name.
 */

@media (max-width: 767.98px) {

  /* --- hero ----------------------------------------------------------------
     page.small.css sets the shared band to 44px 20px 34px and the title to
     52px; Pricing runs a tighter band and a much larger word. */

  .pt__band { padding: 40px 20px 24px; }
  .pt__title {
    font-size: 76px; line-height: .86;
    letter-spacing: -.05em;
    /* "PRICING" fills the 335px column almost exactly at this size. A longer
       title — the Hungarian page, or any future one — breaks rather than
       pushing the layout sideways. */
    overflow-wrap: break-word;
  }


  /* --- category sections --------------------------------------------------- */

  .pr-cat { padding: 30px 20px 18px; }

  .pr-cat__label { margin-bottom: 10px; font-size: 12px; }

  .pr-cat__tagline {
    margin-top: 0;
    max-width: none;
    font-size: 26px; line-height: 1.06;
    letter-spacing: -.035em;
  }

  .pr-why {
    margin-top: 16px;
    padding: 12px 14px;
    max-width: none;
  }
  .pr-why p { font-size: 13px; }


  /* --- package rows --------------------------------------------------------
     Full-bleed so the hairlines run to both screen edges, with the gutter put
     back on the row itself.

     PRICE ABOVE NAME, not beside it. The 240px price column is what would put
     this page into horizontal scroll at 375px, so the row stacks and the price
     leads — which is the mobile design's "price-first" direction anyway, minus
     the tap-to-open it also asks for. */

  .pr-packages {
    margin: 16px -20px 0;
    padding-bottom: 8px;
  }

  /* One column: the two-column split has nowhere to go at 375px. */
  .pr-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px;
  }

  /* PRICE BACK ON TOP HERE, against the markup order. Desktop reads the package
     and then its price across the row; stacked, that would bury every price at
     the foot of a five-line detail list and make the page impossible to skim.
     The mobile handoff calls this direction "price-first" and it is the one part
     of it this sheet can honour without JavaScript.

     This is the one place where seen order and read order differ, and it is
     deliberate: the pair is two short strings in a single stacked row, so a
     screen reader still hears the name immediately after the figure. */
  .pr-row__price {
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 10px;
    text-align: left;
  }
  .pr-row__body { min-width: 0; }

  /* 18px, not the design's 22px: the content here carries its period inside the
     price string — "950 EUR / month", "from 1800 EUR" — where the design splits
     them onto two lines. 18px is the largest size at which the longest string in
     the current list still holds one line. */
  .pr-price {
    font-size: 18px; line-height: 1.15;
    white-space: nowrap;
  }

  .pr-was { font-size: 11.5px; }

  /* Its own line under the price, as the design places it under the package. */
  .pr-tag {
    flex-basis: 100%;
    width: fit-content;
    padding: 4px 7px;
    font-size: 9.5px;
    letter-spacing: .14em;
  }

  .pr-row__name {
    margin-bottom: 10px;
    font-size: 12.5px; line-height: 1.35;
    letter-spacing: .1em;
  }

  .pr-details { gap: 8px; }
  .pr-detail { font-size: 14px; line-height: 1.5; }

  .pr-cat p:not(.pr-detail) { font-size: 15px; max-width: none; }
}