/*
 * MASONS v2 — design scratchpad.
 *
 * Everything here wins over the built stylesheet, because it loads last.
 * Change a token and the whole page follows: the Material components read
 * these same variables. When you are happy, these lines go back into
 * apps/masons-v2/src/styles/tokens.css.
 */

:root {
  /* --ink: #111515; */
  /* --paper: #f8f8f5; */
  /* --gold: #d7b84f; */
  /* --orange: #ff5b00; */
  /* --shell: min(1344px, calc(100% - 64px)); */
  /* --app-bar-height: 72px; */
}

/*
 * Magazine article layout.
 *
 * One frame for the whole article: --article-w wide, split into the reading
 * column (title, photo, meta, text — all starting on the same left edge) and
 * a 300px column on the right for the floating "Other stories" island.
 *
 * The photo spans the full frame (both columns); text starts at its left edge.
 *
 * Goes back to: the .article-hero / .article-layout / .article-rail rules in
 * the magazine detail styles, plus a new StoryIsland component (see design.js).
 */
:root {
  --article-w: min(1240px, 100% - 64px);
  --article-side: 300px;
  --article-gap: 64px;
  --article-col: calc(var(--article-w) - var(--article-side) - var(--article-gap));
}

.article-hero__head {
  width: var(--article-col);
  margin: 0 auto 34px calc((100% - var(--article-w)) / 2);
  text-align: left;
}
.article-hero__head .article-byline { justify-content: flex-start; }
.article-hero__head .article-title,
.article-hero__head .article-deck { margin-left: 0; margin-right: 0; }
/* The reading column is narrower than the old centred frame, so the
   headline steps down one notch to stay at 3-4 lines. */
.article-hero__head .article-title { font-size: clamp(2.6rem, 4.4vw, 4.4rem); }

/* Full frame width, as before (1240px). The old fixed 320–460px height made
   a ~2.7:1 strip that cropped and zoomed the car; 2:1 keeps the width and
   shows almost the whole 16:10 photo. */
.article-hero__image {
  width: var(--article-w);
  height: auto;
  min-height: 0;
  aspect-ratio: 2 / 1;
  border-radius: 28px;
  margin-inline: auto;
}

.article-layout {
  width: var(--article-w);
  grid-template-columns: minmax(0, 1fr) var(--article-side);
  grid-template-rows: auto 1fr;
  column-gap: var(--article-gap);
  row-gap: 0;
  padding-top: 40px;
}

/* Meta (back link, read time, date) becomes one line above the text. */
.article-rail {
  grid-column: 1;
  grid-row: 1;
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-bottom: 22px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.article-rail a { margin: 0; }
.article-rail dl { display: flex; flex-wrap: wrap; gap: 8px 24px; border-top: 0; }
.article-rail div { border: 0; padding: 0; display: flex; gap: 8px; align-items: baseline; }
.article-rail dd { margin: 0; }
.article-rail dl > div:has(dd:empty) { display: none; }

.article-prose { grid-column: 1; grid-row: 2; }

/* The island. Sticky inside the article grid, so it rides down with the
   reader and stops before "More stories" / the footer. */
.story-island {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  position: sticky;
  top: calc(var(--app-bar-height) + 24px);
  max-height: calc(100svh - var(--app-bar-height) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: color-mix(in srgb, var(--paper) 88%, var(--ink) 4%);
  font-size: .86rem;
}
.story-island__label {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.story-island ol { list-style: none; margin: 0; padding: 0; }
.story-island li + li { border-top: 1px solid var(--line); }
.story-island li a {
  display: grid;
  gap: 3px;
  padding: 9px 0;
  color: inherit;
  text-decoration: none;
}
.story-island__meta {
  color: var(--gold-deep, var(--gold));
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.story-island__title {
  font-weight: 650;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
.story-island li a:hover .story-island__title { color: var(--gold-deep, var(--gold)); }
.story-island__all {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  text-decoration: none;
}

/* Narrow screens: one column; the island drops below the text as a list. */
@media (width <= 1080px) {
  :root { --article-w: min(760px, 100% - 64px); }
  .article-hero__head,
  .article-hero__image { width: var(--article-w); margin-left: auto; margin-right: auto; }
  .article-hero__head { margin-bottom: 28px; }
  .article-layout { display: block; margin-inline: auto; padding: 36px 0 72px; }
  .story-island { position: static; max-height: none; overflow: visible; margin-top: 48px; }
}
@media (width <= 760px) {
  :root { --article-w: calc(100% - 32px); }
  .article-hero__image { border-radius: 22px; aspect-ratio: 16 / 10; }
}

/*
 * Top app bar: the nav sits in the true centre of the page.
 * Was `auto auto 1fr auto`, so the links started right after the logo and
 * their centre depended on the logo width. Now three columns, the outer two
 * equal, so the middle one is centred whatever the logo and buttons measure.
 * Below 1080px the nav is hidden and the built layout takes over.
 * Goes back to: .top-app-bar__inner in the app-bar styles.
 */
@media (width > 1080px) {
  .top-app-bar__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .top-app-bar__inner > .brand { justify-self: start; }
  .top-app-bar__nav { grid-column: 2; }
  .top-app-bar__actions { grid-column: 3; justify-self: end; }
}

/*
 * Footer, Contact column: same rhythm as Company.
 * Contact is built from <p> elements, and their default 1em margins were
 * added on top of the column gap. Links in Company have no margins.
 * Goes back to: .site-footer__col in the footer styles.
 */
.site-footer__col p { margin: 0; }
.site-footer__col p:not(.site-footer__col-title) { font-size: inherit; line-height: inherit; }
.site-footer__col p.site-footer__col-title { margin: 0 0 var(--space-1); }

/* Tagline and address break where the text has a newline:
   "Premium car rental in Prague." / "A curated fleet of …" and
   "Třebohostická 3069/14," / "Prague 10 – Strašnice" / "100 00 Prague".
   The newlines live in the locale strings (tagline, addressLine1). */
.site-footer__tagline,
.site-footer__col p:not(.site-footer__col-title) { white-space: pre-line; }
.site-footer__tagline { max-width: none; }

/*
 * Home "Handover without a counter": no full-width black band.
 * The section now sits on the page background and the card itself is dark,
 * exactly like the "Routes, cars and the craft" magazine block.
 * Goes back to: .handover / .handover__frame / .handover__media / .handover__body.
 */
.handover { background: transparent; color: inherit; padding: 24px 0; }
.handover__frame {
  background: var(--ink);
  color: #fff;
  border-radius: 30px;
  min-height: 620px;
}
.handover__media:after { background: linear-gradient(90deg, #0000 58%, #11151585); }
.handover__body { padding: clamp(34px, 5vw, 70px); }

@media (width <= 820px) {
  .handover__frame { border-radius: 26px; min-height: 0; }
  .handover__media:after { background: linear-gradient(#0000 52%, #11151585); height: auto; inset: 0; }
  .handover__body { padding: 30px 24px 34px; }
}

/*
 * Magazine article tables.
 * They reuse .price-table, which is built for short price grids: every cell
 * nowrap and right-aligned. Article tables carry sentences ("What it means
 * on the route"), so the last column ran off the card with its header out
 * of sight, and car names were squeezed into three lines.
 * Now: text wraps, everything left-aligned, the car column keeps a sane
 * width, long-text columns get room. On phones each row becomes a card with
 * the column names as labels (labels are set by design.js; in the repo the
 * markdown table renderer should emit data-label on each cell).
 * Goes back to: .article-table styles (leave .price-table itself alone).
 */
.article-table {
  margin-block: 28px 36px;
  border-radius: 20px;
  -webkit-overflow-scrolling: touch;
}
.article-table .price-table {
  white-space: normal;
  font-size: .92rem;
  line-height: 1.45;
  min-width: 100%;
}
.article-table .price-table th,
.article-table .price-table td {
  text-align: left;
  vertical-align: top;
  padding: 13px 14px;
}
.article-table .price-table thead th {
  white-space: normal;
  padding-top: 16px;
  padding-bottom: 12px;
  background: color-mix(in srgb, var(--paper) 70%, var(--ink) 4%);
}
/* Car / first column: bold, never narrower than a model name. */
.article-table .price-table tbody th {
  font-weight: 650;
  min-width: 10em;
  width: 20%;
}
/* Value columns: wide enough for "250 km/h" on one line, wrap only if the
   table would otherwise overflow (long words in de / ru / uk). */
.article-table .price-table td { min-width: 6em; hyphens: auto; overflow-wrap: break-word; }
.article-table .price-table thead th { hyphens: auto; }
/* ...the last column is the commentary one: it wraps and takes the rest. */
.article-table .price-table td:last-child {
  white-space: normal;
  min-width: 11em;
  color: var(--muted);
}
.article-table .price-table tbody tr:hover > * {
  background: color-mix(in srgb, var(--paper) 80%, var(--gold) 6%);
}

/* Narrow reading column: rows turn into stacked cards, no sideways
   scrolling. Measured against the column itself (container query), not the
   window, so it also kicks in on laptops next to the "Other stories" island.
   Wide tables (5+ columns) switch earlier than 3–4 column ones. */
.article-prose { container-type: inline-size; container-name: prose; }

@container prose (width < 820px) {
  .article-table:has(thead th:nth-child(5)) { border: 0; background: none; border-radius: 0; overflow: visible; }
  .article-table:has(thead th:nth-child(5)) .price-table,
  .article-table:has(thead th:nth-child(5)) .price-table tbody,
  .article-table:has(thead th:nth-child(5)) .price-table tr,
  .article-table:has(thead th:nth-child(5)) .price-table th,
  .article-table:has(thead th:nth-child(5)) .price-table td { display: block; width: auto; min-width: 0; }
  .article-table:has(thead th:nth-child(5)) .price-table thead { display: none; }
  .article-table:has(thead th:nth-child(5)) .price-table tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--md-sys-color-surface-container-lowest, #fff);
  }
  .article-table:has(thead th:nth-child(5)) .price-table tbody th {
    padding: 0 0 8px;
    border: 0;
    font-size: 1rem;
  }
  .article-table:has(thead th:nth-child(5)) .price-table td {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    gap: 12px;
    padding: 7px 0;
    border: 0;
    border-top: 1px solid var(--line);
    white-space: normal;
    color: inherit;
  }
  .article-table:has(thead th:nth-child(5)) .price-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 2px;
  }
  .article-table:has(thead th:nth-child(5)) .price-table tbody tr:hover > * { background: none; }
}

@container prose (width < 560px) {
  .article-table { border: 0; background: none; border-radius: 0; overflow: visible; }
  .article-table .price-table,
  .article-table .price-table tbody,
  .article-table .price-table tr,
  .article-table .price-table th,
  .article-table .price-table td { display: block; width: auto; min-width: 0; }
  .article-table .price-table thead { display: none; }
  .article-table .price-table tr {
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--md-sys-color-surface-container-lowest, #fff);
  }
  .article-table .price-table tbody th {
    padding: 0 0 8px;
    border: 0;
    font-size: 1rem;
  }
  .article-table .price-table td {
    display: grid;
    grid-template-columns: 7.5em minmax(0, 1fr);
    gap: 12px;
    padding: 7px 0;
    border: 0;
    border-top: 1px solid var(--line);
    white-space: normal;
    color: inherit;
  }
  .article-table .price-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 2px;
  }
  .article-table .price-table tbody tr:hover > * { background: none; }
}