/* Trip card: one component for "Mani ceļojumi", the public trips and the title page.
   The shell links it just before app.css (where an @import at the top of app.css would put it, minus
   the extra round trip); the title page imports it from landing.css. So it stands on its own: every
   token it reads has a zero-specificity default below, and a page palette (app.css, landing.css)
   always wins over it. It comes first so that a page stylesheet can refine a card at equal
   specificity (e.g. .poster--next); app.css's generic glyph rules it outranks by specificity.

   Class contract (card.js builds it in the page, app/views/trips/_card.html.erb on the title page):

   <ul class="cards">                       3 columns; .cards--2 has 2; one column when the list
     <li class="card">                      itself is ≤ 760 px wide. .card--archived, .card--mini
       <div class="card-glyph">             glyph.js svg (viewBox 0 0 88 48): .glyph--main, or
         <svg class="glyph glyph--main">    .glyph--none / .glyph--empty (dotted, no main plan)
           <path class="glyph-profile">     elevation area under the line (optional)
           <path class="glyph-line"> <circle class="glyph-start"> <circle class="glyph-end">
       <h3 class="card-title"><a class="stretched" href="/t/…">  the whole card is the link
       <p class="card-sub">                 subtitle, at most 2 lines
       <p class="card-facts"><b>dates</b> <span>km</span> <span>days</span> …
       <p class="card-foot"><span class="card-who">names</span> <span class="badge">…</span>
          <span>counts</span> <span class="card-note">…</span>
   .card--mini: <div class="card-glyph"> 72×40 on the left, then <div class="card-body"> with the
   title and the facts.
   .card--poster (the newest trip on the home page; standalone, not in .cards):
     <article class="card card--poster"> <div class="card-glyph"> 220 px
       <div class="poster-row"> <div>title, sub, facts, foot</div> <div class="poster-ask">…</div>
   The ask block sits in a 380 px column on the right; it drops below when the poster is ≤ 760 px.
   Anything interactive inside a card (the ask block, buttons, other links) stays above the
   stretched link, so it can be clicked and its text selected. */

/* ---------- tokens: defaults only (docs/DESIGN.md „Krāsas”, same values as app.css) ---------- */

:where(:root) {
  --bg: #E4E7E1; --bg2: #F3F4F0; --ink: #24281F; --ink2: #5C6156; --line: #C6CBC0; --line2: #A9AFA2;
  --birch: #D9A621; --birch-line: #A57A0B; --pine: #2E5A3C; --gravel: #8B8A80; --focus: #A57A0B;
  --fd: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --fb: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) {
    --bg: #171A15; --bg2: #20241E; --ink: #E6E8E1; --ink2: #A9AEA2; --line: #363B33; --line2: #4D5449;
    --birch: #E7B531; --birch-line: #E7B531; --pine: #6FAE85; --gravel: #8B8A80; --focus: #E7B531;
  }
}
:where(:root[data-theme="dark"]) {
  --bg: #171A15; --bg2: #20241E; --ink: #E6E8E1; --ink2: #A9AEA2; --line: #363B33; --line2: #4D5449;
  --birch: #E7B531; --birch-line: #E7B531; --pine: #6FAE85; --gravel: #8B8A80; --focus: #E7B531;
}

/* ---------- stretched link ---------- */

/* The title link covers its positioned ancestor (the card, a list row), so a click anywhere opens
   the trip while the accessible name stays the title alone. */
.stretched::after { content: ""; position: absolute; inset: 0; }
.stretched:focus-visible { outline: none; }
.stretched:focus-visible::after { outline: 3px solid var(--focus); outline-offset: -3px; }

/* ---------- list ---------- */

/* The list is its own size container, so the column count follows the room it gets (a page
   column, a panel), not the window. Below 760 px each card spans the whole row: a grid of 3
   tracks with every item on 1 / -1 is one column, without a 2-column step in between.
   Containment means the list's width must come from its parent — a block, not a shrink-to-fit item. */
.cards {
  container: cards / inline-size;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards > * { min-width: 0; }

/* ---------- card ---------- */

.card {
  --card-r: 10px;
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 14px 16px; background: var(--bg2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--card-r);
  font: 400 15px/1.5 var(--fb); font-feature-settings: "tnum" 1;
  transition: border-color .12s ease;
}
/* hover changes colour only, never position or size */
.card:hover { border-color: var(--line2); }
.card .stretched::after { border-radius: calc(var(--card-r) - 1px); }
/* the ring goes round the card, outside its border, like every other focus ring */
.card .stretched:focus-visible::after { outline-offset: 3px; }
.card :is(a, button, summary, input, select, textarea):not(.stretched), .card .poster-ask {
  position: relative; z-index: 1;
}

/* glyph: the route's own shape, as wide as the card. The svg keeps viewBox 0 0 88 48 and is scaled
   (xMidYMid meet), so lines are non-scaling: 2.4 px at any size. */
.card-glyph { height: 76px; margin: 0 0 10px; }
.card-glyph svg {
  --glyph-bg: var(--bg2);
  display: block; width: 100%; height: 100%; max-width: none; overflow: visible;
  transition: color .12s ease;
}
.card-glyph .glyph-line {
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.card-glyph .glyph-start { fill: currentColor; stroke: none; }
.card-glyph .glyph-end {
  fill: var(--glyph-bg); stroke: currentColor; stroke-width: 1.8; vector-effect: non-scaling-stroke;
}
.card-glyph .glyph--main { color: var(--ink); }
/* no main plan or no track yet: a dotted gravel line (dash lengths are screen pixels here) */
.card-glyph :is(.glyph--none, .glyph--empty) { color: var(--gravel); }
.card-glyph :is(.glyph--none, .glyph--empty) .glyph-line { stroke-dasharray: 1 5; }
/* a main plan whose track is not computed yet is drawn dotted and gravel like „no main plan“:
   that is a state, and hover must not recolour it */
.card:is(:hover, :has(.stretched:focus-visible)) .card-glyph .glyph--main:not(.glyph--empty) { color: var(--birch-line); }

/* Elevation profile: a pale pine area under the line, no outline — two shapes in one box, told
   apart by form (area / line with ends) and colour (pine / charcoal). Global, so the variant strip
   on the trip page can use it too. */
.glyph-profile { fill: var(--pine); fill-opacity: .14; stroke: none; }

.card-title {
  margin: 0; font: 750 22px/1.08 var(--fd); font-variation-settings: "opsz" 40;
  letter-spacing: -.012em; text-wrap: balance; overflow-wrap: anywhere;
}
.card-title a { color: inherit; text-decoration: none; }
.card:is(:hover, :has(.stretched:focus-visible)) .card-title a {
  text-decoration: underline; text-decoration-color: var(--birch);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.card-sub {
  margin: 6px 0 0; color: var(--ink2); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* facts: separate elements with a gap, never a "·" string; the most important one in bold */
.card-facts {
  margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  font-size: 13.5px; color: var(--ink2);
}
.card-facts b { color: var(--ink); font: 600 14.5px/1.4 var(--fd); }
/* the foot sits at the bottom, so feet line up across a row of cards of different heights;
   the facts keep 10 px above it */
.card > .card-facts:not(:last-child) { margin-bottom: 10px; }
.card-foot {
  margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--ink2);
}
.card-foot .card-who { color: var(--ink); overflow-wrap: anywhere; }
.card-foot .card-note { font-style: italic; }
.card .card-foot .badge { margin: 0; }

/* archived: no paper, quiet text, gravel glyph */
.card--archived { background: transparent; color: var(--ink2); }
.card--archived .card-glyph svg { --glyph-bg: var(--bg); }
.card--archived .card-glyph .glyph--main { color: var(--gravel); }
.card--archived .glyph-profile { fill: var(--gravel); }
.card--archived .card-title { font-weight: 600; color: var(--ink2); }
.card--archived .card-facts b, .card--archived .card-foot .card-who { color: var(--ink2); }

/* ---------- mini: glyph on the left, one line of facts ---------- */

.card--mini { flex-direction: row; align-items: center; gap: 14px; padding: 10px 12px; }
.card--mini .card-glyph { flex: none; width: 72px; height: 40px; margin: 0; }
.card--mini .card-body { flex: 1 1 auto; min-width: 0; }
.card--mini .card-title { font-size: 16.5px; line-height: 1.15; }
.card--mini .card-facts { margin-top: 3px; gap: 2px 8px; font-size: 12.5px; }
.card--mini .card-facts b { font-size: 13px; }

/* ---------- poster: the newest trip, large, with the ask for the agent beside it ---------- */

.card--poster {
  --poster-glyph: 220px; --poster-ask: 380px; --poster-gap: 32px;
  container: card-poster / inline-size; padding: 18px 22px 20px;
}
.card--poster .card-glyph { height: var(--poster-glyph); margin-bottom: 8px; }
/* With the ask beside it the glyph keeps to the title's column, so the title stands right under its
   route like in every other card, and the ask reaches up past the glyph's row (a negative top
   margin: the card is the container, and a container cannot lay itself out from its own query), so
   its foot is level with the card's and the right-hand column is one piece from top to bottom. */
.card--poster:has(.poster-ask) .card-glyph { width: calc(100% - var(--poster-ask) - var(--poster-gap)); }
.card--poster .poster-ask { margin-top: calc(-1 * var(--poster-glyph) - 8px); }
/* at 4.6× the 88×48 box the ends would be 30 px discs; keep them in proportion to the line */
.card--poster .card-glyph :is(.glyph-start, .glyph-end) { r: 2.2px; }
.card--poster .card-title {
  font-size: 44px; line-height: 1; font-variation-settings: "opsz" 96; letter-spacing: -.025em;
}
.card--poster .card-sub { margin-top: 8px; max-width: 62ch; font-size: 15px; -webkit-line-clamp: 3; line-clamp: 3; }
.card--poster .card-facts { font-size: 14px; }
.card--poster .card-foot { margin-top: 12px; }
.poster-row {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--poster-ask); gap: 16px var(--poster-gap);
  align-items: end;
}
.poster-row > * { min-width: 0; }
.poster-row > :only-child { grid-column: 1 / -1; }

/* ---------- narrow: ≤ 760 px of the list's or the poster's own width ---------- */

@container cards (width <= 760px) {
  .cards > * { grid-column: 1 / -1; }
  .card-glyph { height: 64px; }
}
@container card-poster (width <= 760px) {
  .poster-row { grid-template-columns: minmax(0, 1fr); }
  .card--poster:has(.poster-ask) .card-glyph { width: auto; }
  .card--poster .poster-ask { margin-top: 0; }
  .card--poster .card-glyph { height: 140px; }
  .card--poster .card-title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .card-glyph svg { transition: none; }
}
