/**
 * Section: Route cards (path-cards)
 *
 * Ported from _mockups/index.html `.c-paths` / `.c-path`. One page, no drift.
 *
 * WHAT THIS FILE NO LONGER OWNS, because a shared owner exists:
 *
 *   - the icon tile is `.pasia-icon-tile` in components.css. This section is
 *     the largest of its three consumers, so all that is left here is the two
 *     size custom properties and the margin under it, which is this card's
 *     rhythm rather than the tile's.
 *   - the price pill is `tag tag--new` in tokens.css, which is byte-identical
 *     to `.c-path .from` down to the .42em/1em padding. This file had
 *     re-implemented it by hand and components.css's map says so by name. All
 *     that is left is the alignment, which is a property of the flex column
 *     the pill sits in and not of the pill.
 *
 * NO `.reveal` on these cards, and sections/path-cards.php carries the
 * reasoning: they are the homepage's primary call to action and they are above
 * the fold at every width down to 320px, so starting them at opacity 0 puts the
 * page's main routes behind a script. The mock-up carries no `.reveal` here
 * either. That also means this file's `transition` shorthand below is a plain
 * hover transition with nothing to collide with.
 *
 * Contrast measured on the PASIA palette rather than assumed. Every text
 * colour in this file, on the ground it actually lands on:
 *
 *   --ink        #14231f  on --paper    #ffffff   16.28:1
 *   --ink-soft   #45524d  on --paper    #ffffff    8.18:1
 *   --pine       #16564b  on --paper    #ffffff    8.51:1
 *   --gold-deep  #7e622e  on --paper    #ffffff    5.72:1   (hover only)
 *   --price      #1c6b4a  on --price-bg #e6f4ec    5.69:1   (now tokens.css)
 *   --forest     #0e4038  on the icon tile
 *                (--forest-tint-10 over --paper)             9.72:1
 *
 * All clear WCAG AA for normal text. Re-measure if any of them moves.
 * --gold on the hover border and --line on the resting border are decorative
 * edges, not text and not a control's only affordance.
 *
 * Tokens only for every colour, size, radius, shadow and duration.
 */

/* ---------------------------------------------------------------------------
 * The grid, and the column count.
 *
 * `data-cards` is written by the renderer from count(). It is not a field and
 * must never become one: docs/pasia-section-inventory.md §0 puts layout that
 * follows the amount of content in the renderer, and AGENTS.md §1.2 rejects
 * the picker that would otherwise express it.
 * ------------------------------------------------------------------------ */
.path-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  position: relative;
  z-index: var(--z-raised);
}

.path-cards-grid[data-cards="1"] { grid-template-columns: 1fr; }
.path-cards-grid[data-cards="2"] { grid-template-columns: repeat(2, 1fr); }
/* Four cards read as two rows of two, not three plus a widow. */
.path-cards-grid[data-cards="4"] { grid-template-columns: repeat(2, 1fr); }

/* ---------------------------------------------------------------------------
 * The pull-up over the hero ridge.
 *
 * An ORDER-derived exception, not a band and not a field. It applies only when
 * this section is the one immediately after the page's opening header, which
 * is what the adjacent-sibling selector says. Sections are emitted as siblings
 * inside <main>, so this is exact.
 *
 * TWO openers, not three. `.hero` is what sections/hero.php emits and
 * `.pg-hero` is what parts/page-hero.php emits, which is the markup
 * sections/page-head.php renders through. There was a third arm for
 * `.page-head` and it was dead: page-head.php:27-29 says in as many words that
 * the class it emits is `.pg-hero`, and nothing anywhere in sections/, parts/
 * or templates/ emits `.page-head` at all.
 *
 * The clamp() distances are the mock-up's own and have no token: they are one
 * component's overlap with one other component, not a step on the spacing
 * scale.
 * ------------------------------------------------------------------------ */
.hero + .path-cards,
.pg-hero + .path-cards {
  padding-block-start: 0;
}

.hero + .path-cards .path-cards-grid,
.pg-hero + .path-cards .path-cards-grid {
  margin-top: calc(-1 * clamp(6.5rem, 12vw, 9.5rem));
}

/* ---------------------------------------------------------------------------
 * The card.
 * ------------------------------------------------------------------------ */
.path-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
  text-decoration: none;
  /* Zero horizontal overflow at 320px is a signed-off baseline (AGENTS.md §7),
     and a pasted URL in the description is the ordinary way to lose it. The
     grid track is 1fr, which is minmax(auto, 1fr), and that `auto` minimum is
     the min-content size of THIS element: a min-width on an inner flex child
     does not cap it. `anywhere` rather than `break-word` because only
     `anywhere` also affects intrinsic sizing, which is the half that matters
     here. Inherited, so the title, body and link row are all covered. */
  overflow-wrap: anywhere;
  transition: transform var(--dur-normal) var(--ease-out-soft),
              border-color var(--dur-normal) ease,
              box-shadow var(--dur-normal) ease;
}

/* Only a card that actually goes somewhere lifts. The link field is required,
   so a plain `div.path-card` is a card whose destination was never filled in:
   a degraded state rather than a design state, and it must not advertise an
   interactivity it does not have.
   This is NOT a house rule about non-interactive cards in general. `icon-cards`
   lifts its <article> cards on hover because `accreditations.html` `.ac-duty`
   does, on cards that are articles in the mock-up too. There the lift is the
   signed-off design; here there is no signed-off state to reproduce. */
a.path-card:hover,
a.path-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--gold);
  color: var(--ink);
}

/* The shared tile, at this section's size. components.css owns the treatment;
   this owns the density and the space under it. */
.path-card-ico {
  --pasia-tile: 52px;
  --pasia-tile-glyph: 27px;
  margin-bottom: var(--s-1);
}

.path-card-title {
  font-size: var(--text-xl);
}

.path-card-body {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* `tag tag--new` in tokens.css is the pill. All this adds is the alignment,
   without which the flex column would stretch it the full width of the card. */
.path-card-from {
  align-self: flex-start;
}

/* `margin-top: auto` so the link still sits on the base line of the card when
   a client leaves the description empty and there is no flex-grow sibling to
   push it down. When there IS a description, `auto` resolves to zero because
   the body has already taken the free space, and the mock-up's own
   `.c-path .go { margin-top: var(--s-1) }` is what should apply: half a rem of
   air above the link, on top of the card's own gap. The sibling combinator is
   the same shape components.css uses for `.pasia-cat-card .suits ~ .go`. */
.path-card-go {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pine);
  transition: gap var(--dur-fast) ease, color var(--dur-fast) ease;
}

.path-card-body ~ .path-card-go {
  margin-top: var(--s-1);
}

.path-card-go svg {
  width: 16px;
  height: 16px;
}

a.path-card:hover .path-card-go,
a.path-card:focus-visible .path-card-go {
  gap: .8em;
  color: var(--gold-deep);
}

/* ---------------------------------------------------------------------------
 * Breakpoints. Canonical set: 1024 / 860 / 620 / 560.
 * ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .path-cards-grid,
  .path-cards-grid[data-cards="2"],
  .path-cards-grid[data-cards="4"] {
    grid-template-columns: 1fr;
  }

  .hero + .path-cards .path-cards-grid,
  .pg-hero + .path-cards .path-cards-grid {
    margin-top: calc(-1 * clamp(5rem, 14vw, 7rem));
  }
}