/* ============================================================
   Prop Firms — Guides index styles
   ============================================================ */

/* ---------- Guide grid + card ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.guide-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg);
  box-shadow: var(--pf-shadow-card);
  position: relative; overflow: hidden;
}
.guide-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 10px; background: var(--cat); }

.gc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.gc-cat {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cat); background: color-mix(in srgb, var(--cat) 8%, #fff); padding: 4px 10px; border-radius: var(--pf-radius-pill);
}
.gc-pop { font-family: var(--font-display); font-size: 11px; letter-spacing: .03em; color: var(--gray-550); display: inline-flex; align-items: center; gap: 4px; }

.gc-title { font-size: 19px; line-height: 1.2; margin-bottom: 8px; color: var(--pf-heading); text-wrap: wrap; width: 80%; }
.gc-sub { font-size: 14px; color: var(--gray-text); line-height: 1.5; margin-bottom: 18px; padding-bottom: 0; flex: 1; }

.gc-firms { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--pf-line-soft); }
.gc-stack { display: flex; }
.gc-mark {
  width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 11px; color: #fff; letter-spacing: -.02em;
  margin-left: -8px; box-shadow: 0 0 0 2px #fff; }
.gc-mark:first-child { margin-left: 0; }
.gc-mark.gc-more { background: var(--pf-subtle); color: var(--pf-muted); box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px var(--pf-line); }
.gc-firms-l { font-size: 13px; color: var(--pf-faint); }

.gc-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pf-faint); border-top: 1px solid var(--pf-line-soft); padding-top: 14px; }
.gc-meta .dot { opacity: .5; }
.gc-go { margin-left: auto; font-family: var(--font-display); color: var(--cat); }

/* ---------- Index page bits ---------- */
.g-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.g-search-wrap { flex: 1 1 240px; max-width: 340px; }
.gcat-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.gcat-pill {
  font-family: var(--font-display); font-size: 14px; color: var(--pf-muted);
  background: #fff; border: 1px solid var(--pf-line); padding: 8px 16px; border-radius: var(--pf-radius-pill);
  cursor: pointer; transition: all .15s var(--pf-ease); white-space: nowrap;
}
.gcat-pill:hover { border-color: var(--pf-teal-line); color: var(--pf-teal-deep); }
.gcat-pill:has(input:checked) { background: var(--pf-teal); border-color: var(--pf-teal); color: #fff; }

/* The card is now a media card: the tile fills the top, so the category rail
   moves onto the image and the text needs its own padding box. */
.guide-card { padding: 0; }
.gc-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 16px; }
.gc-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--pf-subtle); }
.gc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-card:hover .gc-media img { transform: scale(1.03); }
.gc-media img { transition: transform .3s var(--pf-ease); }

/* Radio-driven pills: the input is the state, the label is the control. */
.gcat-pill input { position: absolute; opacity: 0; pointer-events: none; }
.gcat-pill { display: inline-flex; align-items: center; }

/* ============================================================
   GUIDE DETAIL
   ============================================================ */
/* The design reference carries a separate --cat-bg per category; the accent
   presenter yields one colour, so the tint is mixed from it here instead. */
.gd-head {
  background: color-mix(in srgb, var(--cat) 6%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--cat) 20%, var(--pf-line));
  padding: 28px 0 36px; position: relative;
}
.gd-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.gd-title { font-size: clamp(28px, 4vw, 40px); max-width: 800px; line-height: 1.08; }
.gd-sub { font-size: 18px; color: var(--pf-muted); margin-top: 12px; max-width: 640px; padding-bottom: 0; }
.gd-meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; color: var(--pf-muted); flex-wrap: wrap; }
.gd-meta .dot { opacity: .5; }

/* The aside stretches to the row so its card has room to travel; `align-items:
   start` (as in the design reference) shrink-wraps it and the sticky card can
   never move. */
.gd-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: stretch; }
.gd-intro { margin-bottom: 28px; border-left: 4px solid var(--cat); }
.gd-intro p { font-size: 16px; line-height: 1.75; color: var(--pf-text); }
.gd-rank-title { font-size: 22px; margin-bottom: 20px; }

.grank-list { display: flex; flex-direction: column; gap: 18px; }
.grank { display: flex; gap: 16px; align-items: flex-start; }
/* Rank badges fade down the list: --rank-depth is 0 for #1 and 1 at the last
   pick, so the ramp holds its shape whatever the guide's length. It darkens
   toward the heading ink rather than lightening, so contrast against the white
   numeral only improves as it descends. */
.grank-num {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; margin-top: 18px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 17px; color: #fff;
  background: color-mix(in srgb, var(--cat) calc(100% - (var(--rank-depth, 0) * 55%)), var(--pf-heading));
  box-shadow: var(--pf-shadow-card);
}
.grank-card { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--pf-line); border-radius: var(--pf-radius-lg); box-shadow: var(--pf-shadow-card); padding: 20px; }
.grank-id { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.grank-titles { flex: 1; min-width: 0; }
.grank-name { font-family: var(--font-display); font-size: 18px; color: var(--pf-heading); }
.grank-name:hover { color: var(--cat); }
.grank-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.grank-desc { font-size: 14.5px; color: var(--pf-muted); line-height: 1.6; margin: 14px 0 16px; padding-bottom: 0; }
.grank-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid var(--pf-line-soft); border-bottom: 1px solid var(--pf-line-soft); margin-bottom: 16px; }
.grank-stat { text-align: center; }
.grank-stat .v { font-family: var(--font-display); font-size: 16px; color: var(--pf-heading); }
.grank-stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--pf-faint); margin-top: 2px; }
/* .fp-deal owns its spacing on the firm page; inside a rank card the stats rule
   above it already provides the gap. */
.grank-deal { margin: 0 0 16px; }
.grank-cta { display: flex; gap: 8px; }

.gd-side-cta { margin-top: 8px; }
/* The aside's table is the firm page's .fee-table with a third column, so it
   reuses that class and adds only what a two-value row needs. Keeping the
   display font off the firm name leaves one emphasised column, as there. */
.gd-quick th:not(:first-child), .gd-quick td:not(:first-child) { text-align: right; }
.gd-quick td:not(:first-child) { font-family: var(--font-display); color: var(--pf-heading); }
.gd-quick td:first-child a { color: var(--pf-text); }
.gd-quick td:first-child a:hover { color: var(--pf-green); }

.gd-related { background: var(--pf-subtle); border-top: 1px solid var(--pf-line); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
  .gd-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .guide-grid { grid-template-columns: 1fr; }
  .grank-stats { grid-template-columns: repeat(2, 1fr); }
  .grank-num { width: 28px; height: 28px; font-size: 15px; margin-top: 0; }
  .grank { gap: 12px; }
}