/* ══════════════════════════════════════════════════════════════
   demo_components.css — TITC Common Components
   Device Frame · Glass Card · Grid · Shared Utilities
   Scope: demo2/3/4 home pages, corporate bottom-layer
   ══════════════════════════════════════════════════════════════ */

/* ── CSS Variables (theme-agnostic shared tokens) ── */
:root {
  --dc-font-system: "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
  --dc-radius-sm: 8px;
  --dc-radius-md: 14px;
  --dc-radius-lg: 20px;
  --dc-radius-xl: 28px;
  --dc-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
  --dc-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.1);
  --dc-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.14);
  --dc-shadow-glow: 0 0 30px rgba(61, 139, 255, 0.25);
  --dc-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════
   MODULE 1: Device Frame (Phone / Tablet Mockups)
   Usage: .dc-device-frame .dc-device-frame--phone|--tablet
   ══════════════════════════════════════════════════════════════ */

.dc-device-frame {
  position: relative;
  display: inline-block;
  border-radius: 24px;
  background: #1a1d28;
  padding: 10px;
  box-shadow:
    var(--dc-shadow-lg),
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    inset 0 2px 4px rgba(255, 255, 255, 0.04);
  transition: transform var(--dc-transition);
}

.dc-device-frame:hover {
  transform: translateY(-4px);
}

/* Phone (tall aspect) */
.dc-device-frame--phone {
  width: 260px;
  max-width: 100%;
  border-radius: 28px;
  padding: 12px;
  aspect-ratio: 9 / 19;
}

/* Tablet (wider, for system diagrams etc.) */
.dc-device-frame--tablet {
  width: 100%;
  max-width: 540px;
  border-radius: 20px;
  padding: 8px;
  aspect-ratio: 4 / 3;
}

/* Landscape phone (for gameplay scenes) */
.dc-device-frame--landscape {
  width: 100%;
  max-width: 460px;
  border-radius: 20px;
  padding: 8px;
  aspect-ratio: 16 / 9;
}

/* Inner screen area */
.dc-device-frame__screen {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--dc-radius-lg) - 2px);
  overflow: hidden;
  background: #0f111a;
  position: relative;
}

.dc-device-frame--phone .dc-device-frame__screen {
  border-radius: 20px;
}

.dc-device-frame__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Notch for phone */
.dc-device-frame__notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  border-radius: 3px;
  background: #2a2d38;
  z-index: 2;
}

/* Status bar mock */
.dc-device-frame__status {
  position: absolute;
  top: 14px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 0.04em;
  z-index: 2;
  pointer-events: none;
}

/* Home indicator bar */
.dc-device-frame__indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  z-index: 2;
}

/* Floating labels beside/on frame */
.dc-device-badge {
  position: absolute;
  z-index: 3;
  background: #fff;
  border-radius: var(--dc-radius-sm);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--dc-shadow-md);
  color: #1a2233;
  animation: dc-float 4s ease-in-out infinite;
}

.dc-device-badge--left { left: -20px; top: 20%; }
.dc-device-badge--right { right: -16px; bottom: 25%; }
.dc-device-badge--top { top: -14px; left: 50%; transform: translateX(-50%); }

@keyframes dc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ══════════════════════════════════════════════════════════════
   MODULE 2: Glass Card (Frosted Glass Morphism)
   Usage: .dc-glass .dc-glass--dark|--light|--accent
   ══════════════════════════════════════════════════════════════ */

.dc-glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--dc-radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--dc-shadow-sm);
  transition: transform var(--dc-transition), border-color var(--dc-transition),
              background var(--dc-transition);
}

.dc-glass:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
}

/* Dark glass: sits on dark/colored backgrounds */
.dc-glass--dark {
  background: rgba(15, 31, 51, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dc-glass--dark:hover {
  background: rgba(15, 31, 51, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Light glass: sits on light/lighter backgrounds, subtle frost */
.dc-glass--light {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.dc-glass--light:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Accent glass: gradient border + glow */
.dc-glass--accent {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.dc-glass--accent::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 122, 61, 0.5), rgba(94, 224, 176, 0.5), rgba(123, 92, 255, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.dc-glass--accent:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dc-glass--accent > * {
  position: relative;
  z-index: 1;
}

/* Glass card content children */
.dc-glass__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 1rem;
  font-size: 20px;
  color: #fff;
}

.dc-glass__icon--orange { background: linear-gradient(135deg, #ff7a3d, #ffb347); }
.dc-glass__icon--mint { background: linear-gradient(135deg, #2ec49a, #5ee0b0); }
.dc-glass__icon--violet { background: linear-gradient(135deg, #7b5cff, #3d8bff); }
.dc-glass__icon--teal { background: linear-gradient(135deg, #1a7a6e, #2a9d8f); }

.dc-glass__title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: inherit;
}

.dc-glass__text {
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.85;
  margin: 0;
}

/* Glass stat row (metrics inside glass) */
.dc-glass-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dc-glass-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.dc-glass-stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════
   MODULE 3: Grid (Responsive Layout Utilities)
   Usage: .dc-grid .dc-grid--cols{N} .dc-grid--gap{size}
   ══════════════════════════════════════════════════════════════ */

.dc-grid {
  display: grid;
}

.dc-grid--cols2 { grid-template-columns: repeat(2, 1fr); }
.dc-grid--cols3 { grid-template-columns: repeat(3, 1fr); }
.dc-grid--cols4 { grid-template-columns: repeat(4, 1fr); }
.dc-grid--cols6 { grid-template-columns: repeat(6, 1fr); }

.dc-grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.dc-grid--auto-fill-sm {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* Hybrid: first item spans 2 cols */
.dc-grid--hero-left {
  grid-template-columns: 1.4fr 1fr;
}

.dc-grid--hero-right {
  grid-template-columns: 1fr 1.4fr;
}

/* Featured: first item spans 2 cols, rest in 3-col */
.dc-grid--featured {
  grid-template-columns: repeat(3, 1fr);
}

.dc-grid--featured > :first-child {
  grid-column: span 2;
}

/* Gap tokens */
.dc-grid--gap-xs { gap: 0.5rem; }
.dc-grid--gap-sm { gap: 0.75rem; }
.dc-grid--gap-md { gap: 1.25rem; }
.dc-grid--gap-lg { gap: 2rem; }
.dc-grid--gap-xl { gap: 3rem; }

/* ══════════════════════════════════════════════════════════════
   MODULE 4: Corporate Bottom-Layer (Professional + Playful)
   Usage: .dc-corporate-bar, .dc-corporate-strip
   ══════════════════════════════════════════════════════════════ */

/* Slim strip divider with gradient and subtle icon */
.dc-corporate-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c6b7a;
  position: relative;
}

.dc-corporate-strip::before,
.dc-corporate-strip::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26, 122, 110, 0.2), transparent);
}

.dc-corporate-strip i {
  opacity: 0.6;
}

/* Dual-tone section background (corporate + playful accent) */
.dc-section-corporate {
  background: linear-gradient(180deg, #f7f8fa 0%, #f0f4f8 50%, var(--d2-bg, #fff9f4) 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* ══════════════════════════════════════════════════════════════
   MODULE 5: Shared Utility Classes
   ══════════════════════════════════════════════════════════════ */

/* Section wrapper */
.dc-section {
  padding: 4.5rem 0;
}

.dc-section--tight { padding: 3rem 0; }
.dc-section--loose { padding: 6rem 0; }

/* Section header */
.dc-section__head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.dc-section__head--left {
  text-align: left;
  max-width: 640px;
}

.dc-section__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.dc-section__label--teal { color: #1a7a6e; }
.dc-section__label--blue { color: #2b9fd4; }
.dc-section__label--violet { color: #7b5cff; }
.dc-section__label--mint { color: #2ec49a; }

.dc-section__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: #1a2233;
  margin: 0;
}

.dc-section__title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff7a3d, #5ee0b0);
}

.dc-section__head--left .dc-section__title::after {
  margin-left: 0;
}

.dc-section__desc {
  font-size: 15px;
  color: #5c6b7a;
  max-width: 560px;
  margin: 0.75rem auto 0;
  line-height: 1.65;
}

.dc-section__head--left .dc-section__desc {
  margin-left: 0;
}

/* Button base */
.dc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none !important;
  transition: transform 0.2s, box-shadow 0.2s;
  border: none;
  cursor: pointer;
}

.dc-btn:hover {
  transform: translateY(-2px);
}

.dc-btn--primary {
  background: linear-gradient(135deg, #ff7a3d, #ff5c8a);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 92, 122, 0.35);
}

.dc-btn--ghost {
  background: #fff;
  color: #1a4fd4;
  border: 2px solid rgba(61, 139, 255, 0.35);
}

.dc-btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.dc-btn--outline-light:hover {
  border-color: #fff;
}

/* Tag chips */
.dc-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dc-chip--mint { background: rgba(46, 196, 154, 0.15); color: #1a8f5a; }
.dc-chip--orange { background: rgba(255, 122, 61, 0.15); color: #c75a10; }
.dc-chip--violet { background: rgba(123, 92, 255, 0.12); color: #5a3dd4; }
.dc-chip--blue { background: rgba(43, 159, 212, 0.15); color: #1a6fa8; }

/* Image card with overlay gradient */
.dc-img-card {
  border-radius: var(--dc-radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--dc-shadow-md);
}

.dc-img-card img {
  width: 100%;
  height: auto;
  display: block;
}

.dc-img-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15, 31, 51, 0.8) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem;
}

/* Link style */
.dc-link {
  font-size: 14px;
  font-weight: 700;
  color: #2b9fd4;
  text-decoration: none !important;
  transition: color 0.2s;
}

.dc-link:hover { color: #ff7a3d; }

/* Fade-in animation */
.dc-fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: dc-fade-in 0.6s ease-out forwards;
}

@keyframes dc-fade-in {
  to { opacity: 1; transform: translateY(0); }
}

.dc-delay-1 { animation-delay: 0.1s; }
.dc-delay-2 { animation-delay: 0.2s; }
.dc-delay-3 { animation-delay: 0.3s; }
.dc-delay-4 { animation-delay: 0.4s; }

/* ══════════════════════════════════════════════════════════════
   RWD: Responsive overrides
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .dc-grid--cols2,
  .dc-grid--cols3,
  .dc-grid--cols4,
  .dc-grid--cols6,
  .dc-grid--hero-left,
  .dc-grid--hero-right {
    grid-template-columns: 1fr;
  }

  .dc-grid--featured {
    grid-template-columns: 1fr;
  }

  .dc-grid--featured > :first-child {
    grid-column: span 1;
  }

  .dc-grid--auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .dc-device-frame--phone {
    max-width: 220px;
  }
}

@media (max-width: 575px) {
  .dc-grid--auto-fill,
  .dc-grid--auto-fill-sm {
    grid-template-columns: 1fr;
  }

  .dc-device-frame--phone {
    max-width: 200px;
  }

  .dc-glass-stats {
    flex-direction: column;
    gap: 0.75rem;
  }
}