/* ════════════════════════════════════════════════════════════════════════
   guide-modules.css — Hyper Drop "图文" modules for the 3 editorial sections
   inside /guide/{slug}/ (built by lib/guide-modules.js). Scoped to .fl-rich so
   it only touches the lifted editorial body. Copy is verbatim; this is layout.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · RANKED — Top N by Score (compact 2-up cards) ─────────────────────── */
.fl-rich .gm-rank-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0 8px;
}

.fl-rich .gm-rank {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--fl-ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--fl-ink);
  padding: 16px 18px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.fl-rich .gm-rank:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--fl-ink); }

/* head row: number · name · score */
.fl-rich .gm-rank-head { display: flex; align-items: center; gap: 12px; }
.fl-rich .gm-rank-no {
  flex: none;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  color: var(--fl-ink);
  background: var(--fl-cream2);
  border: 2px solid var(--fl-ink);
  border-radius: 9px;
}
.fl-rich .gm-rank[data-seq="1"] .gm-rank-no { background: var(--fl-acid); }
.fl-rich .gm-rank[data-seq="2"] .gm-rank-no { background: var(--fl-cyan); }
.fl-rich .gm-rank[data-seq="3"] .gm-rank-no { background: var(--fl-amber); }
.fl-rich .gm-rank-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 18px; line-height: 1.05;
  margin: 0;
  color: var(--fl-ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
/* suppress the inherited h3 "purple key square" ::before inside card headers */
.fl-rich .gm-rank-name::before { content: none !important; display: none !important; }
.fl-rich .gm-rank-name a.gm-rank-flink {
  color: var(--fl-purple);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.fl-rich .gm-rank-name a.gm-rank-flink:hover { color: var(--fl-hot); }
.fl-rich .gm-rank-tied {
  font-size: 9px; letter-spacing: .12em;
  background: var(--fl-hot); color: #fff;
  padding: 2px 6px; border-radius: 4px; font-weight: 700;
}
.fl-rich .gm-rank-score {
  flex: none;
  font-size: 17px; line-height: 1;
  color: #fff; background: var(--fl-ink);
  padding: 5px 9px; border-radius: 999px;
}
.fl-rich .gm-rank-score small { font-size: 10px; opacity: .65; font-weight: 600; }

/* compact 6-axis equalizer — ONE row of mini bars */
.fl-rich .gm-eq {
  display: flex; gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--fl-cream);
  border: 2px solid var(--fl-rule);
  border-radius: 10px;
}
.fl-rich .gm-eq-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fl-rich .gm-eq-v { font-size: 11px; font-weight: 700; color: var(--fl-ink); }
.fl-rich .gm-eq-track {
  width: 14px; height: 42px;
  background: #fff;
  border: 2px solid var(--fl-ink);
  border-radius: 5px;
  display: flex; align-items: flex-end;
  overflow: hidden;
}
.fl-rich .gm-eq-fill { display: block; width: 100%; }
.fl-rich .gm-eq-l { font-size: 9px; letter-spacing: .04em; font-weight: 700; color: var(--fl-ink2); }

.fl-rich .gm-rank > p { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; color: var(--fl-ink); }
.fl-rich .gm-rank > p:last-child { margin-bottom: 0; }

/* edge callout */
.fl-rich .gm-edge {
  background: rgba(255, 61, 110, .08);
  border-left: 5px solid var(--fl-hot);
  border-radius: 0 8px 8px 0;
  padding: 9px 12px !important;
  font-size: 13px !important;
  margin-top: auto !important;
}
.fl-rich .gm-edge strong { font-family: var(--fl-font-display); color: var(--fl-hot); }

@media (max-width: 720px) {
  .fl-rich .gm-rank-list { grid-template-columns: 1fr; }
}

/* ── 2 · FLAVOR MAP — family spectrum color cards ─────────────────────────── */
.fl-rich .gm-fam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 24px 0 8px;
}
.fl-rich .gm-fam {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--fl-ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--fl-ink);
  padding: 18px 18px 16px;
}
.fl-rich .gm-fam-pct {
  font-size: 44px; line-height: .85;
  display: flex; align-items: baseline; gap: 2px;
}
.fl-rich .gm-fam-pct small { font-size: 18px; font-weight: 700; }
.fl-rich .gm-fam-name {
  font-size: 20px; line-height: 1.02;
  margin-top: 8px;
}
.fl-rich .gm-fam-cnt {
  font-size: 10px; letter-spacing: .14em; font-weight: 700;
  opacity: .7; margin-top: 6px;
}
.fl-rich .gm-fam-desc {
  font-size: 13px; line-height: 1.55; font-weight: 500;
  margin-top: 10px; opacity: .92;
}
.fl-rich .gm-fam-desc strong { font-weight: 800; }

/* ── 3 · HOW TO CHOOSE — decision-lane cards ──────────────────────────────── */
.fl-rich .gm-choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 8px;
}
.fl-rich .gm-choose {
  background: #fff;
  border: 2px solid var(--fl-ink);
  border-top: 6px solid var(--fl-purple);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--fl-ink);
  padding: 18px 18px 8px;
}
.fl-rich .gm-choose-h { font-size: 17px; line-height: 1.1; margin: 0 0 12px; color: var(--fl-ink); }
.fl-rich .gm-choose-h::before { content: none !important; display: none !important; }
.fl-rich .gm-choose-row { padding: 11px 0; border-bottom: 2px solid var(--fl-rule); }
.fl-rich .gm-choose-row:last-child { border-bottom: 0; }
.fl-rich .gm-choose-tag {
  display: inline-block;
  background: var(--fl-cream2);
  color: var(--fl-ink);
  border: 2px solid var(--fl-ink);
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px;
  margin-bottom: 7px;
}
.fl-rich .gm-choose-txt { display: block; font-size: 13px; line-height: 1.55; color: var(--fl-ink); }
.fl-rich .gm-choose-txt a { color: var(--fl-purple); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
@media (max-width: 720px) {
  .fl-rich .gm-choose-grid { grid-template-columns: 1fr; }
}

/* ── 4 · FULL TASTING PROFILES — uniform Hyper Drop flavor cards ───────────── */
/* (loads last → overrides the soft 1px inline .fl-flavor-card some guides ship,
   and styles the wrappers lib/guide-modules.js adds to guides that lacked them) */
.fl-rich .fl-flavor-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin: 18px 0 10px !important;
}
.fl-rich .fl-flavor-card {
  background: #fff !important;
  border: 2px solid var(--fl-ink) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--fl-ink) !important;
  padding: 18px !important;
  margin: 0 !important;
}
.fl-rich .fl-flavor-card h4 {
  font-family: var(--fl-font-display);
  font-size: 19px; line-height: 1.05;
  margin: 0 0 8px; color: var(--fl-ink);
}
.fl-rich .fl-flavor-card h4::before { content: none !important; display: none !important; }
@media (max-width: 720px) {
  .fl-rich .fl-flavor-grid { grid-template-columns: 1fr !important; }
}

/* ── Shop-section quick-link chips (Browse by Family + By Device) ──────────── */
.fl-rich .gm-shopfilter { margin: 4px 0 22px; display: flex; flex-direction: column; gap: 12px; }
.fl-rich .gm-sf-row { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; }
.fl-rich .gm-sf-label { font-size: 10px; letter-spacing: .14em; font-weight: 700; color: var(--fl-ink2); padding-top: 9px; }
.fl-rich .gm-sf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-rich a.gm-sf-chip {
  display: inline-block; font-size: 13px; font-weight: 700; line-height: 1.1;
  padding: 7px 14px; border-radius: 999px;
  border: 2px solid var(--fl-ink); background: #fff; color: var(--fl-ink) !important;
  text-decoration: none !important; box-shadow: 2px 2px 0 var(--fl-ink);
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.fl-rich a.gm-sf-chip:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--fl-ink); background: var(--fl-purple); color: #fff !important; }
.fl-rich a.gm-sf-all { background: var(--fl-ink); color: var(--fl-cream) !important; }
.fl-rich a.gm-sf-more { background: var(--fl-cream2); }
.fl-rich a.gm-sf-chip[data-fam="fruit-flavors"]  { background: var(--fl-acid); }
.fl-rich a.gm-sf-chip[data-fam="menthol-ice"]    { background: var(--fl-cyan); }
.fl-rich a.gm-sf-chip[data-fam="tropical"]       { background: var(--fl-amber); }
.fl-rich a.gm-sf-chip[data-fam="dessert-candy"]  { background: var(--fl-cream2); }
.fl-rich a.gm-sf-chip[data-fam="beverage"]       { background: #ffd9e3; }
.fl-rich a.gm-sf-chip[data-fam="mixed-blends"]   { background: #e9defc; }
.fl-rich a.gm-sf-chip[data-fam="tobacco"]        { background: #d9cdbb; }
@media (max-width: 720px) {
  .fl-rich .gm-sf-row { grid-template-columns: 1fr; gap: 6px; }
  .fl-rich .gm-sf-label { padding-top: 0; }
}