/* ============================================================
   radio-card.css · 並排可選卡（radio 卡）
   ------------------------------------------------------------
   建立在 Segmented 之上：一組 .segmented 容器加 .radio-cards，
   把段內 .segmented__btn 從「軌道內文字切換」改成「兩張並排的
   可選卡」——卡面 + 右上 radio 點，可帶標題＋描述。
   卡面＝扁平 1px --border、無陰影（2026-07-16 對齊 icon 選擇卡的邊框化，
   Figma node 781-4166 血統，STYLE-DECISIONS Q13）。已選＝無橘外框（只留灰邊框），
   標記為右上置中小橘實心點、無外圈；未選＝無可見標記（對齊 Figma node 781-4386）。
   用於：單一/多規格、不限量/限量、取貨方式等二選一。
   JS 沿用 segmented 的 toggle（.segmented__btn--active）。
   anatomy
     .segmented.radio-cards
     .segmented__btn  (.segmented__btn--active)
         .radio-card__text
           .radio-card__title
           .radio-card__sub
         .radio-card__icon
   ============================================================ */

/* 用兩個 class（.segmented.radio-cards）＝specificity 0,2,0，穩定蓋過 segmented.css 的
   `.segmented`（0,1,0）軌道底＋邊框＋padding，不受兩支 CSS 的連結順序影響
   （2026-07-23：product-detail 先連 radio-card 後連 segmented，單 class 的 .radio-cards 會被
   後載入的 .segmented 蓋回去、露出一圈外框；提高權重根治）。 */
.segmented.radio-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  background: transparent;     /* 覆蓋 segmented 的軌道底 */
  padding: 0;
  border: 0;
  box-shadow: none;
}
.radio-cards .segmented__btn {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-10);
  height: auto;
  padding: var(--sp-14) var(--sp-16);
  border-radius: var(--radius-xl);
  /* 2026-07-21：--card → --input-surface，與型別選項卡（.selection-card--icon）、
     上傳投放區（.upload-tile）看齊——Q19 已把「可互動的填色面」統一成比卡亮一階，
     本元件當時漏改，暗色下讀起來像凹進卡面而非可點的選項。 */
  background: var(--input-surface);
  border: 1px solid var(--border);
  box-shadow: none;
  /* 2026-07-27 Q8 裁決 A 註記：這條 (0,2,0) 刻意壓過 .segmented__btn--active 的橘字 (0,1,0)——
     不是漏改。radio-card 是「標題＋副標」的卡片，整段標題染橘會變成在讀橘色內文；
     本元件的橘由右上角的實心標記點（下方 --active::after）與 .radio-card__icon 承擔，
     所以「已選態一定有橘」這條規則仍然成立，只是橘落在標記而不是文字上。 */
  color: var(--foreground);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
}
/* 右上標記位（18px 佔位框）。未選＝無可見標記（對齊 Figma node 781-4386：未選圈透明）。 */
.radio-cards .segmented__btn::after {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-top: 1px;
}
/* 單行卡（無副標，如 單一/多規格）：文字與橘點垂直置中對齊；有副標的（標題＋描述）維持置頂。 */
.radio-cards .segmented__btn:not(:has(.radio-card__sub)) { align-items: center; }
.radio-cards .segmented__btn:not(:has(.radio-card__sub))::after { margin-top: 0; }
/* 已選＝扁平卡面、無橘外框（只留灰邊框）；標記＝置中小橘實心點、無外圈（對齊 Figma node 781-4386）。 */
.radio-cards .segmented__btn--active { box-shadow: none; }
.radio-cards .segmented__btn--active::after {
  background: radial-gradient(circle at center, var(--primary) 0 3px, transparent 3.5px);
}

/* Optional Icon atom marker. Existing cards continue to use the CSS pseudo marker. */
.radio-cards--icon .segmented__btn::after { content: none; }
.radio-card__icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 0; color: var(--border); border-radius: 50%; }
.radio-cards .segmented__btn--active .radio-card__icon { color: var(--primary); background: radial-gradient(circle at center, var(--primary) 0 4px, transparent 5px); }

/* 卡內標題＋描述 */
.radio-card__text { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; }
.radio-card__title { font-weight: var(--fw-regular); }
.radio-card__sub { font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--foreground-muted); line-height: var(--lh-comfy); white-space: normal; }

/* 3-up 變體（建立專案的專案類型 picker）：預設 radio-cards 為 2 欄，本變體改 3 欄等寬。
   雙 class 提權（0,2,0）以蓋過 .segmented.radio-cards 的 grid 設定。已選＝右上小橘點（Q13）
   ＋卡底提亮（使用者裁示 2026-07-25，讓流程內選取更明顯）。 */
.radio-cards.radio-cards--3 { grid-template-columns: repeat(3, 1fr); }
/* 已選卡底提亮——僅流程內表單（`--3` 不含 `--gate`）；閘門無持久選取態、不套。 */
.radio-cards--3:not(.radio-cards--gate) .segmented__btn--active { background: color-mix(in srgb, var(--foreground) 6%, var(--accent)); }

/* --gate 變體（建立專案閘門，Q28 2026-07-24）：卡內加頂部引導圖示（`.radio-card__lead`）、
   內容縱向堆疊（圖示→標題→描述），標題／描述間距加大；radio 點維持右上角（::after 絕對定位）。
   僅閘門使用，流程內表單（純標題）不套。 */
.radio-cards--gate .segmented__btn { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--sp-10); position: relative; }
.radio-cards--gate .segmented__btn::after { position: absolute; top: var(--sp-14); right: var(--sp-16); margin-top: 0; }
.radio-cards--gate .radio-card__lead { width: 24px; height: 24px; color: var(--muted-foreground); }
/* 閘門是「選了就進下一步」的 picker，無持久選取態（Q28，對齊使用者兩張截圖：
   default＝無點、hover＝右上橘點）：resting 覆蓋掉 base 的已選橘點＝完全無指示點；
   hover 任一卡時右上（`::after`）才冒橘點。 */
.radio-cards--gate .segmented__btn--active::after { background: none; }
.radio-cards--gate .segmented__btn:hover { background: color-mix(in srgb, var(--foreground) 6%, var(--accent)); }   /* hover 底色比 Q9 --accent 亮一點（閘門專用，使用者裁示） */
.radio-cards--gate .segmented__btn:hover::after { background: radial-gradient(circle at center, var(--primary) 0 3px, transparent 3.5px); }
.radio-cards--gate .radio-card__text { gap: var(--sp-6); }