/* ============================================================
   /guides/ — library layout
   Compact header + sticky search/filter toolbar, guides grouped by
   hub, sticky right rail (lead-magnet book + newest + hubs).
   Token-driven (studio theme); loaded standalone next to hub/cards.css.
   Namespaced .gdx-* to avoid collisions with hub/cards.css (.sbh-*).
   ============================================================ */

/* The default .lw-section band pads 5rem top; a directory page wants the
   first row of cards inside the first fold. */
.gdx-page { padding: 1.5rem 0 4rem; }
@media (min-width: 1024px) { .gdx-page { padding-top: 2.25rem; } }
/* Horizontal padding lives on the inner container (px-4 sm:px-6 lg:px-8),
   matching the navbar's container so the content edges align with the nav. */

/* ---------- Header: left-aligned, one line of meta ---------- */
.gdx-head { margin-bottom: 1rem; }
.gdx-title { font-size: 2rem; margin: 0 0 .4rem; }
@media (min-width: 640px) { .gdx-title { font-size: 2.4rem; } }
.gdx-sub { font-size: .95rem; line-height: 1.5; max-width: 46rem; margin: 0; }
.gdx-sub strong { color: var(--ink); font-weight: 600; }

/* ---------- Toolbar: search + filter pills, sticky under the nav ---------- */
.gdx-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem;
  padding: .6rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
@media (min-width: 1024px) {
  /* Only sticky when the nav is (see .lw-nav.sticky). --gdx-nav-h is the
     rendered nav height; keep in step with components/navbar.html. */
  .gdx-toolbar { position: sticky; top: var(--gdx-nav-h, 4.25rem); z-index: 20; }
}
.gdx-search { position: relative; flex: 1 1 15rem; min-width: 0; max-width: 24rem; }
.gdx-search svg {
  position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--muted); pointer-events: none;
}
.gdx-search .lw-input {
  width: 100%; padding-left: 2.35rem; padding-top: .55rem; padding-bottom: .55rem;
  font-size: .9rem;
}
.gdx-search .lw-input::-webkit-search-cancel-button { cursor: pointer; }
.gd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.gd-filter {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  padding: .42rem .95rem;
  border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.gd-filter:hover { border-color: var(--accent); color: var(--accent); }
.gd-filter:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.gd-filter[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
  color: color-mix(in srgb, var(--accent) 72%, var(--ink));
}
.gd-count { font-size: .7rem; font-weight: 700; opacity: .7; }
/* Mobile: pills scroll sideways in one row instead of stacking. */
@media (max-width: 639px) {
  .gdx-toolbar { gap: .6rem; }
  .gdx-search { flex-basis: 100%; max-width: none; }
  .gd-filters {
    flex-wrap: nowrap; overflow-x: auto; width: 100%;
    padding-bottom: .15rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .gd-filters::-webkit-scrollbar { display: none; }
}

/* ---------- Two-column layout: library + rail ---------- */
.gdx-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
@media (min-width: 1024px) {
  .gdx-layout { grid-template-columns: minmax(0, 1fr) 16rem; gap: 2.5rem; }
}
.gdx-rail { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 1024px) {
  /* Below the sticky nav + toolbar so the two never overlap. */
  .gdx-rail { position: sticky; top: calc(var(--gdx-nav-h, 4.25rem) + 4rem); }
}
.gdx-rail-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.1rem;
}
.gdx-rail-h {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .65rem;
}
.gdx-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gdx-rail-list li + li { border-top: 1px solid var(--line); }
.gdx-rail-list a {
  display: block; padding: .55rem 0; text-decoration: none; color: var(--ink);
  font-size: .85rem; line-height: 1.35; font-weight: 500;
}
.gdx-rail-list a:hover { color: var(--accent); }
.gdx-rail-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gdx-rail-list small { display: block; font-size: .72rem; color: var(--muted); margin-top: .15rem; font-weight: 500; }
/* ---------- "Start here" — two editorial feature cards ---------- */
.gdx-start { margin-bottom: 2.5rem; }
.gdx-start-h {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .75rem;
}
.gdx-start-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .gdx-start-grid { grid-template-columns: 1fr 1fr; } }
.gdx-feature {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gdx-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
/* Wider-than-16:9 crop: the card art is 16:9 with a centred subject, so
   trimming top/bottom keeps every illustration (and baked-in title text) whole,
   where a tall side column would slice it. */
.gdx-feature .sbh-media { aspect-ratio: 2.3 / 1; }
.gdx-feature:hover .sbh-media-img, .gdx-feature:hover .sbh-cover { transform: scale(1.04); }
.gdx-feature-body { padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.gdx-feature-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: 1.05rem; line-height: 1.3; color: var(--ink); margin: 0;
}
.gdx-feature-desc {
  font-size: .85rem; line-height: 1.5; color: var(--muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gdx-feature-cta {
  margin-top: auto; padding-top: .35rem;
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .85rem; font-weight: 700; color: var(--accent);
}
.gdx-feature-cta svg { width: .9rem; height: .9rem; transition: transform .18s ease; }
.gdx-feature:hover .gdx-feature-cta svg { transform: translateX(3px); }

/* Mobile-only inline book promo (between the first two hubs) */
.gdx-inline-promo { margin: 0 0 2.75rem; }
.gdx-inline-promo .lm-promo--inline { margin: 0 !important; }

/* ---------- Sections ---------- */
.gdx-section { margin-bottom: 2.75rem; scroll-margin-top: calc(var(--gdx-nav-h, 4.25rem) + 5rem); }
.gdx-section:last-of-type { margin-bottom: 0; }
.gdx-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .65rem; margin-bottom: 1.15rem; border-bottom: 1px solid var(--line);
}
.gdx-section-title {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: 1.35rem; color: var(--ink); margin: 0;
}
.gdx-section-count { font-family: var(--font-body); font-size: .8rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.gdx-section-link {
  font-size: .82rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .25rem;
}
.gdx-section-link:hover { text-decoration: underline; }
.gdx-section-link svg { width: .8rem; height: .8rem; }
.gdx-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px)  { .gdx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .gdx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Denser cards on this page only: tighter body, 2-line description. */
.gdx-grid .sbh-guide-body { padding: .95rem 1.05rem 1.1rem; }
.gdx-grid .sbh-guide-meta { margin-bottom: .5rem; }
.gdx-grid .sbh-guide-title { font-size: 1rem; line-height: 1.3; }
.gdx-grid .sbh-guide-desc {
  font-size: .84rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Muted "coming soon" tile — upcoming registry entries. */
.gd-soon {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  height: 100%; min-height: 200px; padding: 1.75rem 1.25rem; text-align: center;
  border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.gd-soon-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; font-size: 1rem; line-height: 1.25; color: var(--ink); }
.gd-soon-desc { font-size: .84rem; line-height: 1.5; color: var(--muted); }

/* Empty state (search with no hits) */
.gdx-empty {
  display: none; text-align: center; padding: 3rem 1rem;
  border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.gdx-empty p { margin: 0 0 .75rem; color: var(--muted); font-size: .95rem; }
.gdx-layout[data-empty="true"] .gdx-empty { display: block; }

.gd-cta-band { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }