/* ============================================================
 * Grovyn 五感體驗 · Core 樣式（從 sensory-pages.css 拆出）
 * 涵蓋：Hub / index + Landing Hero A1（團體）+ Landing Hero B1（企業）
 * 拆檔日期：2026-05-19
 * ============================================================ */

/* ==========================================================================
   縮時森林 — Page-specific：landing hero、detail hero、gallery、CTA
   ========================================================================== */

/* ============== Hub / index ============== */
.ts-hub {
  padding-block-start: calc(var(--ts-header-h) + var(--ts-sp-7));
  padding-block-end: var(--ts-sp-8);
}
/* .ts-hub__* legacy Hub CSS removed 2026-05-28 — replaced by .ts-hubx__* in sensory-modules.css §9 */

/* ============== Landing Hero — A1 (Group) ============== */
.ts-hero-a {
  position: relative;
  padding-block: calc(var(--ts-header-h) + var(--ts-sp-7)) var(--ts-sp-8);
  overflow: hidden;
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(237, 205, 194, 0.4), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(163, 172, 153, 0.35), transparent 60%),
    var(--ts-cream);
}
.ts-hero-a__inner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--ts-sp-6);
  align-items: center;
}
@media (max-width: 900px) {
  .ts-hero-a__inner { grid-template-columns: 1fr; }
}
.ts-hero-a__copy {
  display: flex;
  flex-direction: column;
  gap: var(--ts-sp-3);
}
.ts-hero-a__title {
  font-family: var(--ts-font-serif-zh);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ts-fg);
}
.ts-hero-a__title-line {
  display: block;
  overflow: hidden;
}
.ts-hero-a__title-en {
  font-family: var(--ts-font-serif-en-display);
  font-style: italic;
  font-weight: 500;
  color: var(--ts-forest);
  letter-spacing: -0.05em;
}
.ts-hero-a__lede {
  font-size: var(--ts-text-md);
  line-height: 1.85;
  color: var(--ts-fg-muted);
  max-width: 36ch;
  margin-block-start: var(--ts-sp-2);
}
.ts-hero-a__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--ts-radius-lg);
}
.ts-hero-a__rive {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* 手繪底線 */
.ts-handdrawn {
  position: relative;
  display: inline-block;
}
.ts-handdrawn::after {
  content: "";
  position: absolute;
  inset-block-end: -8px;
  inset-inline: -4px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' fill='none'><path d='M2 8 C 40 2, 90 12, 130 6 S 200 3, 218 7' stroke='%23B96B4D' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ============== Landing Hero — B1 (Corporate) ============== */
.ts-hero-b {
  position: relative;
  padding-block: calc(var(--ts-header-h) + var(--ts-sp-7)) var(--ts-sp-8);
  background: var(--ts-cream);
  overflow: hidden;
}
.ts-hero-b__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--ts-sp-6);
  align-items: end;
}
@media (max-width: 900px) {
  .ts-hero-b__inner { grid-template-columns: 1fr; }
}
.ts-hero-b__title {
  font-family: var(--ts-font-serif-zh);
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ts-fg);
}
.ts-hero-b__title em {
  font-family: var(--ts-font-serif-en-display);
  font-style: italic;
  color: var(--ts-forest);
}
.ts-hero-b__lede {
  font-size: var(--ts-text-md);
  line-height: 1.85;
  color: var(--ts-fg-muted);
  max-width: 44ch;
}
.ts-hero-b__visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--ts-radius-lg);
}

/* benefits / icon cards */
.ts-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ts-sp-3);
}
@media (max-width: 900px) { .ts-benefit-grid { grid-template-columns: 1fr; } }

.ts-benefit {
  padding: var(--ts-sp-4);
  background: var(--ts-cream);
  border: 1px solid var(--ts-border);
  border-radius: var(--ts-radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--ts-sp-2);
  transition: all var(--ts-dur-base) var(--ts-ease-natural);
}
.ts-benefit:hover {
  border-color: var(--ts-forest);
  box-shadow: var(--ts-shadow-sm);
}
.ts-benefit__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--ts-radius-md);
  background: var(--ts-forest-soft);
  color: var(--ts-forest);
  margin-block-end: var(--ts-sp-2);
}
.ts-benefit__stat {
  font-family: var(--ts-font-serif-en-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ts-forest);
  line-height: 1;
}
.ts-benefit__title {
  font-family: var(--ts-font-serif-zh);
  font-size: var(--ts-text-md);
  font-weight: 500;
}
.ts-benefit__desc {
  font-size: 14px;
  color: var(--ts-fg-muted);
  line-height: 1.7;
}

/* Case study */
.ts-case {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--ts-sp-5);
  align-items: center;
}
@media (max-width: 900px) { .ts-case { grid-template-columns: 1fr; } }

.ts-case__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--ts-radius-lg);
}
.ts-case__head {
  margin-block-end: var(--ts-sp-3);
}
.ts-case__title {
  font-family: var(--ts-font-serif-zh);
  font-size: var(--ts-text-2xl);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.ts-case__metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ts-sp-3);
  margin-block-start: var(--ts-sp-4);
}
.ts-case__metric {
  padding: var(--ts-sp-3);
  background: var(--ts-warm);
  border-radius: var(--ts-radius-md);
}
.ts-case__metric-before,
.ts-case__metric-after {
  display: flex;
  justify-content: space-between;
  padding-block: 6px;
}
.ts-case__metric-after {
  border-block-start: 1px dashed var(--ts-border-strong);
}
.ts-case__metric-after strong {
  font-family: var(--ts-font-mono);
  color: var(--ts-forest);
}
.ts-case__metric-label {
  font-family: var(--ts-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-fg-muted);
  margin-block-end: var(--ts-sp-2);
  display: block;
}