/* ============================================================
   explore.css — the directory.

   The cards stay. In a directory a card is not decoration: it is the
   thing you aim the pointer at, and the owner was right that they were
   almost always earned. What changes is what one is made of.

   This is the app's outlined-on-void idiom, carried over as written —
   "a hairline that delineates, not contains", used where content must
   live ON the void rather than in a box. So: no fill, one hairline, and
   the only thing that happens on hover is that the hairline brightens.

   One type size for everything, told apart by weight and luminance, and
   no per-card glyph: an ornament repeated twenty-five times is still a
   technique without a reason.
   ============================================================ */

.guides-main {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(56px, 9vh, 88px) 28px clamp(72px, 12vh, 112px);
}

.guides-main .page-title {
  font-size: var(--t-head);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--lum-1);
  margin: 0 0 28px;
  text-wrap: balance;
}

/* The opening of a directory is its own small poster: the title and the
   line under it belong together, so they are centred together here rather
   than inheriting a centre from whatever else is loaded. */
.guides-main > header,
.guides-main .page-title { text-align: center; }

/* The measure is the outer box of a reading column, 28px of padding a side
   included. This line is not in one: its container is 980 wide, so it has no
   padding of its own to come out of the measure, and takes the padding off
   here instead, which sets it as wide as a paragraph on a reading page. */
.guides-main .page-intro {
  font-size: var(--t-text);
  line-height: 1.8;
  color: var(--lum-3);
  max-width: calc(var(--measure) - 56px);
  margin: 0 auto clamp(48px, 8vh, 80px);
  text-align: center;
  text-wrap: pretty;
}

/* A group heading is the body size. Weight and brightness carry it; the
   space above it carries the rest. */
.guides-group h2 {
  font-size: var(--t-text);
  line-height: 1.8;
  font-weight: 600;
  color: var(--lum-1);
  margin: 0 0 22px;
}

.guides-group + .guides-group { margin-top: clamp(48px, 7vh, 72px); }

.guides-group ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: block;
  height: 100%;
  padding: 20px 20px 22px;
  border: 1px solid var(--card-line);
  border-radius: 22px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.22s var(--ease-soft);
}

/* Nothing else. No fill, no lift, no glow — the card is a contour, and
   brightening the contour is the whole event. */
.card:hover,
.card:focus-visible { border-color: var(--card-line-hi); }

.card:focus-visible { outline: 2px solid var(--lum-1); outline-offset: 4px; }

.card .guide-name {
  display: block;
  font-size: var(--t-text);
  line-height: 1.6;
  font-weight: 600;
  color: var(--lum-1);
  margin-bottom: 7px;
}

.card .guide-description {
  display: block;
  font-size: var(--t-text);
  line-height: 1.7;
  color: var(--lum-3);
}

/* The same pill, placed the way the homepage places it: centred, standing
   alone, with air around it rather than pinned to the left edge. */
.editorial-cta {
  margin-top: clamp(56px, 9vh, 88px);
  display: grid;
  place-items: center;
}

@media (max-width: 480px) {
  .guides-main { padding-left: 20px; padding-right: 20px; }
  .guides-group ul { grid-template-columns: 1fr; }
}

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