/* sub-entry.css — 🍵 訂閱配茶首頁導購入口（2026-07-08）
   手機＝深綠燙金精品卡（banner 家族之後、風格升級以示「服務」而非「遊戲」）；
   桌機＝#desktopHome 玻璃簾幕段（沉浸段語彙）。 */

/* ── 手機卡 ─────────────────────────────────────────── */
.hh-sub-entry {
  position: relative;
  margin: 14px 16px 4px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 0%, rgba(201, 168, 106, 0.16), transparent 42%),
    linear-gradient(160deg, #22412f 0%, #16301f 100%);
  border: 1px solid rgba(201, 168, 106, 0.28);
  box-shadow: 0 10px 28px rgba(22, 48, 31, 0.22);
}
.hh-sub-entry-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 249, 235, 0.05) 46%, transparent 62%);
}
.hh-sub-entry-eyebrow {
  margin: 0 0 6px;
  font: 600 10px/1 var(--font-ui, sans-serif);
  letter-spacing: 0.22em;
  color: #c9a86a;
}
.hh-sub-entry-title {
  margin: 0 0 6px;
  font: 700 18px/1.35 var(--font-serif, "Noto Serif TC", "Noto Serif TC Fallback", serif); /* 標題統一 700（2026-07-23 GPT 稽核） */
  color: #f6efe0;
}
.hh-sub-entry-desc {
  margin: 0 0 12px;
  font: 400 13px/1.7 var(--font-ui, sans-serif);
  color: rgba(246, 239, 224, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hh-sub-entry-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hh-sub-entry-plan {
  font: 500 12px/1.4 var(--font-ui, sans-serif);
  color: rgba(246, 239, 224, 0.72);
}
.hh-sub-entry-cta {
  flex: none;
  padding: 9px 16px;
  border: 1px solid rgba(201, 168, 106, 0.55);
  border-radius: 22px;
  background: rgba(201, 168, 106, 0.14);
  color: #e9d9b4;
  font: 600 13px/1 var(--font-ui, sans-serif);
  cursor: pointer;
  transition: background 0.2s ease;
}
.hh-sub-entry-cta:active { background: rgba(201, 168, 106, 0.3); }

/* 桌機隱藏手機卡（桌機有自己的段） */
@media (min-width: 1024px) {
  .hh-sub-entry { display: none; }
}

/* ── 桌機段（#desktopHome 內，僅 >=1024 顯示；<1024 desktopHome 本身 display:none） ── */
@media (min-width: 1024px) {
  .hh-dt-sub {
    padding: clamp(48px, 6vw, 96px) var(--dt-pad, 48px);
    background:
      radial-gradient(circle at 12% 20%, rgba(201, 168, 106, 0.1), transparent 46%),
      linear-gradient(165deg, #1c3a28 0%, #122619 100%);
  }
  .hh-dt-sub-inner {
    max-width: var(--dt-max, 1200px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
    padding: clamp(32px, 4vw, 56px);
    border-radius: 24px;
    background: rgba(255, 252, 244, 0.06);
    border: 1px solid rgba(201, 168, 106, 0.24);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .hh-dt-sub-eyebrow {
    margin: 0 0 12px;
    font: 600 12px/1 "Cormorant Garamond", var(--font-ui, sans-serif);
    letter-spacing: 0.3em;
    color: #c9a86a;
  }
  .hh-dt-sub-title {
    margin: 0 0 14px;
    font: 700 clamp(26px, 2.4vw, 34px)/1.3 var(--font-serif, "Noto Serif TC", "Noto Serif TC Fallback", serif);
    color: #f6efe0;
  }
  .hh-dt-sub-desc {
    margin: 0 0 18px;
    max-width: 46ch;
    font: 400 15px/1.9 var(--font-ui, sans-serif);
    color: rgba(246, 239, 224, 0.8);
  }
  .hh-dt-sub-plan {
    margin: 0 0 22px;
    font: 500 14px/1.4 var(--font-ui, sans-serif);
    color: rgba(233, 217, 180, 0.85);
  }
  .hh-dt-sub-cta {
    padding: 13px 30px;
    border: 1px solid rgba(201, 168, 106, 0.6);
    border-radius: 28px;
    background: rgba(201, 168, 106, 0.15);
    color: #e9d9b4;
    font: 600 15px/1 var(--font-ui, sans-serif);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .hh-dt-sub-cta:hover { background: rgba(201, 168, 106, 0.32); transform: translateY(-1px); }
  .hh-dt-sub-visual {
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(96px, 10vw, 150px);
    color: rgba(201, 168, 106, 0.4);
  }
}