/* =========================================================
   File: html/css/portal.css
   Purpose:
   - Portal 的「唯一版型真相」（Single Source of Truth）
   - 自動排版：不針對任何機型/尺寸寫死（尺寸無關）
   - 卡片等高（同列視覺一致）
   - 補回舊版「凹槽小提醒」+ footer 左右角小字排版

   Notes:
   - Grid: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr)))
     欄數完全由可用寬度決定，不需針對任何裝置特判。
   - Spacing: clamp() 流體縮放，避免特定尺寸變「海報」。
   ========================================================= */

:root{
  /* Glass layers */
  --cardA: rgba(255,255,255,.10);
  --cardB: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.14);
  --stroke2: rgba(255,255,255,.22);

  /* Typography */
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);

  /* ✅ Fluid sizing tokens (device-agnostic) */
  --radius: clamp(14px, 1.6vw, 18px);
  --gap:    clamp(10px, 1.6vw, 16px);
  --pad:    clamp(12px, 1.8vw, 18px);

  /* ✅ Key: fluid min card width */
  --card-min: clamp(240px, 28vw, 320px);

  /* Icon sizing */
  --ico:   clamp(34px, 4vw, 40px);
  --ico-r: clamp(12px, 1.6vw, 14px);
  --ico-s: clamp(18px, 2.2vw, 20px);

  /* Font sizes */
  --fs-title: clamp(14px, 1.6vw, 16px);
  --fs-desc:  clamp(12px, 1.35vw, 13px);
  --fs-url:   clamp(11px, 1.2vw, 12px);
  --fs-tag:   11px;

  /* Hint / footer */
  --fs-hint:  clamp(12px, 1.2vw, 12.5px);
  --hint-bg: rgba(0,0,0,.22);
  --hint-stroke: rgba(255,255,255,.16);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  color: var(--text);
  /* 背景與 header 在 index.html inline（此處不碰） */
}

/* =========================================================
   GRID
   ========================================================= */
.grid{
  margin-top: 0; /* header 與 grid 的距離由 index.html header margin-bottom 控制 */
  display: grid;
  gap: var(--gap);

  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr));
  align-items: stretch;
}


/* ✅ If total cards is odd -> last card should look intentional (centered), not a full-width slab */
.grid > .card:last-child:nth-child(odd){
  /* 在 >=2 欄時：讓最後一張變成「置中、跨兩欄」的主動作卡 */
  grid-column: span 2;
  justify-self: center;

  /* 寬度上限：兩張卡 + gap（看起來平均、漂亮） */
  width: 100%;
  max-width: calc((var(--card-min) * 2) + var(--gap));
}

/* =========================================================
   SPECIAL: More button style
   ========================================================= */
.card.is-more{
  border-color: rgba(255,255,255,.22);
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(0,209,255,.18), transparent 60%),
    radial-gradient(700px 220px at 80% 20%, rgba(0,255,170,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.07));
}

.card.is-more::before{
  opacity: .75;
}

.card.is-more:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.30);
}

/* More 卡片內容更像 button：水平置中、更有「主動作」感 */
.card.is-more > a{
  align-items: center;
}

.card.is-more .meta .desc{
  -webkit-line-clamp: 1;
}

.card.is-more .url{
  opacity: .78;
}



/* =========================================================
   CARD
   ========================================================= */
.card{
  height: 100%;
  display: flex;

  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--cardA), var(--cardB));

  box-shadow:
    0 clamp(8px, 1.4vw, 12px) clamp(18px, 2.8vw, 30px) rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10);

  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);

  overflow: hidden;
  position: relative;
  transform: translateZ(0);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* subtle premium shine */
.card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(650px 180px at 18% 0%,
    rgba(255,255,255,.18),
    transparent 60%);
  opacity: .55;
  pointer-events:none;
}

.card:hover{
  transform: translateY(-2px);
  border-color: var(--stroke2);
  box-shadow:
    0 clamp(10px, 1.8vw, 18px) clamp(26px, 3.8vw, 48px) rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.14);
}

/* Whole card clickable */
.card > a{
  flex: 1 1 auto;
  display:flex;
  align-items:flex-start;
  gap: clamp(10px, 1.4vw, 14px);

  padding: var(--pad);
  text-decoration:none;
  color: inherit;

  width: 100%;
  height: 100%;
  min-width: 0;
}

/* ---------- Icon ---------- */
.ico{
  flex: 0 0 auto;
  width: var(--ico);
  height: var(--ico);
  border-radius: var(--ico-r);

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.ico svg{
  width: var(--ico-s);
  height: var(--ico-s);
  stroke: currentColor;
  opacity: .92;
}

/* ---------- Text / Meta ---------- */
.meta{
  min-width: 0;
  flex: 1 1 auto;
}

.name{
  display:flex;
  align-items:center;
  gap: clamp(8px, 1.2vw, 10px);

  font-weight: 760;
  letter-spacing: .2px;
  line-height: 1.25;
  margin: 0;

  font-size: var(--fs-title);
}

.tag{
  font-size: var(--fs-tag);
  color: rgba(255,255,255,.78);
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}

.desc{
  margin: clamp(6px, 1.2vw, 8px) 0 0 0;
  color: var(--muted);
  font-size: var(--fs-desc);
  line-height: 1.45;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.url{
  margin-top: clamp(8px, 1.4vw, 10px);
  font-size: var(--fs-url);
  color: var(--muted2);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .92;
}

/* =========================================================
   HINT GROOVE (凹槽 + 小提醒)
   Fixes:
   - 與上方卡片保持距離（margin-top）
   - 具有「凹槽」視覺：inset shadow + 內圈高光
   ========================================================= */
.hint{
  /* ✅ 跟上方卡片拉開距離（流體，不針對機型） */
  margin-top: clamp(14px, 2.2vw, 20px);

  padding: clamp(10px, 1.6vw, 12px) clamp(12px, 2vw, 16px);

  border-radius: 999px;

  /* ✅ 凹槽的外框：使用較柔的 dashed（像舊版那種槽） */
  border: 1px dashed rgba(255,255,255,.18);

  /* ✅ 凹槽底色 */
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.20));

  color: rgba(255,255,255,.78);
  font-size: var(--fs-hint);
  line-height: 1.5;

  display:flex;
  align-items:center;
  gap: 10px;

  /* ✅ 這兩個陰影是凹槽靈魂：看起來像內凹 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 22px rgba(0,0,0,.32),
    0 10px 26px rgba(0,0,0,.10);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  position: relative;
}

/* 內圈薄高光：更像「槽」 */
.hint::before{
  content:"";
  position:absolute;
  inset: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events:none;
}

.hint strong{
  color: rgba(255,255,255,.90);
  font-weight: 760;
}

.hint code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
}

/* =========================================================
   FOOTER (左下 / 右下小字回到正確位置)
   Fixes:
   - 永遠左右分開（桌機）
   - 寬度不足時才換行（正常響應式，不是針對機型）
   ========================================================= */
.footer{
  margin-top: clamp(12px, 1.8vw, 18px);
  padding: 0 6px clamp(12px, 2vw, 18px);

  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;

  color: rgba(255,255,255,.50);
  font-size: 12px;
}

/* 左右兩塊都至少留一點寬度，避免擠在一起 */
.footer > div{
  min-width: 240px;
}

.footer .right{
  text-align: right;
  opacity: .9;
}

/* 寬度真的不夠時，右邊才回到左對齊（避免難看斷字） */
@media (max-width: 560px){
  .footer > div{ min-width: 100%; }
  .footer .right{ text-align: left; }
}


/* =========================================================
   ULTRA-WIDE: Apple/Stripe rhythm (4 + 1 centered CTA)
   - 需要配合 index.html / more.html 的 .wrap max-width 提升
   ========================================================= */
@media (min-width: 1240px){
  .grid{
    /* 超寬螢幕直接鎖 4 欄，節奏最漂亮：第一列 4 張，第二列留給 CTA */
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 5 張時：最後一張（More）放第二列中間，跨兩欄 => 4 + 1（置中 CTA） */
  .grid > .card:last-child:nth-child(odd){
    grid-column: 2 / span 2;
    justify-self: stretch;
    max-width: none; /* 在 4 欄模式用 grid 控制即可 */
  }
}

/* =========================================================
   CTA upgrade: More button looks like a real primary action
   ========================================================= */
.card.is-more{
  /* 更像 Stripe：更亮、更金屬、更強的漸層層次 */
  border-color: rgba(255,255,255,.28);
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(255,255,255,.16), transparent 58%),
    radial-gradient(900px 260px at 88% 10%, rgba(0,209,255,.22), transparent 60%),
    radial-gradient(900px 260px at 55% 120%, rgba(0,255,170,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
}

/* 光暈外圈：讓它跟一般卡片有「主按鈕」區別 */
.card.is-more::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: var(--radius);
  pointer-events:none;
  background:
    radial-gradient(600px 180px at 30% 0%, rgba(0,209,255,.22), transparent 60%),
    radial-gradient(540px 180px at 80% 20%, rgba(0,255,170,.18), transparent 62%);
  opacity:.55;
  filter: blur(10px);
}

.card.is-more:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.38);
}

/* CTA 的字更像「按鈕」：更大更集中 */
.card.is-more .name{
  font-size: calc(var(--fs-title) + 1px);
  letter-spacing: .3px;
}

.card.is-more .tag{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.16);
}

.card.is-more .desc{
  color: rgba(255,255,255,.75);
  -webkit-line-clamp: 1;
}

.card.is-more .url{
  opacity: .85;
}