/* ============================================================
   ui-variants.css — Structural UI variants driven by data-attributes
   on .app-shell (set by AppShell.razor from UiConfig in pack.json).

   Selector pattern:
     .app-shell[data-X="Y"] .target { --variable: value; }

   All variants override CSS variables extracted in Fas 4.
   Fallbacks in ui.css / v6-additions.css ensure full backward compat.
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   HEADER STYLE
   "surface"      — default, uses --color-surface (no override needed)
   "primary"      — pack primary colour as header background
   "transparent"  — glass-morphism, blurs content behind
   ══════════════════════════════════════════════════════════════ */

.app-shell[data-header-style="primary"] {
  --header-background: var(--color-primary);
  --header-border:     none;
}

/* Text and icon colours on a primary-coloured header */
.app-shell[data-header-style="primary"] .app-header__name,
.app-shell[data-header-style="primary"] .app-header__subtitle {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.app-shell[data-header-style="primary"] .app-header .icon-btn {
  color: #fff;
}

.app-shell[data-header-style="transparent"] {
  --header-background: rgba(255,255,255,0.72);
  --header-border:     1.5px solid rgba(255,255,255,0.4);
}

.app-shell[data-header-style="transparent"] .app-header {
  backdrop-filter:         saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* Dark mode adjustments */
html.dark .app-shell[data-header-style="transparent"] {
  --header-background: rgba(30,30,30,0.72);
  --header-border:     1.5px solid rgba(255,255,255,0.1);
}

/* ══════════════════════════════════════════════════════════════
   CARD STYLE  (grid view — .activity-card)
   "default"   — existing style, no override
   "compact"   — tighter padding, smaller emoji, flatter shadow
   "magazine"  — large emoji, extra padding, stronger shadow
   ══════════════════════════════════════════════════════════════ */

.app-shell[data-card-style="compact"] {
  --card-emoji-size:           1.5rem;
  --card-border-width:         1px;
  --card-border-left-width:    2px;
  --card-hover-translate-y:    -1px;
}

.app-shell[data-card-style="compact"] .activity-card {
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  border-radius: var(--border-radius-md, 12px);
}

.app-shell[data-card-style="compact"] .activity-card__title {
  font-size: var(--font-size-sm, 0.875rem);
}

.app-shell[data-card-style="magazine"] {
  --card-emoji-size:           2.6rem;
  --card-hover-translate-y:    -3px;
}

.app-shell[data-card-style="magazine"] .activity-card {
  padding:       var(--spacing-lg, 24px);
  border-radius: var(--border-radius-xl, 28px);
  flex-direction: column;
  align-items:   flex-start;
  gap:           var(--spacing-sm, 8px);
}

.app-shell[data-card-style="magazine"] .activity-card__title {
  font-size: var(--font-size-lg, 1.125rem);
}

.app-shell[data-card-style="magazine"] .activity-card__description {
  display: block; /* ensure visible even when truncated by default */
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ── List-view row variants (v6-additions.css rows) ────────────── */

.app-shell[data-card-style="compact"] {
  --row-padding:       8px 12px;
  --row-border-radius: 8px;
  --row-gap:           3px;
  --row-emoji-size:    1.3rem;
  --row-title-size:    0.9rem;
}

.app-shell[data-card-style="magazine"] {
  --row-padding:       16px;
  --row-border-radius: 16px;
  --row-gap:           8px;
  --row-emoji-size:    2rem;
  --row-title-size:    1.05rem;
  --font-weight-row-title: 700;
}

/* ══════════════════════════════════════════════════════════════
   GRID STYLE
   "single"     — default 1fr (no override needed)
   "two-column" — 2 equal columns; falls back to single on small screens
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 360px) {
  .app-shell[data-grid-style="two-column"] {
    --grid-columns: repeat(2, 1fr);
    --grid-gap:     var(--spacing-sm, 8px);
  }

  /* Magazine + two-column: stacked layout already works, just tighten radius */
  .app-shell[data-grid-style="two-column"][data-card-style="magazine"] .activity-card {
    border-radius: var(--border-radius-lg, 18px);
  }
}

/* ══════════════════════════════════════════════════════════════
   DETAIL STYLE
   "sheet"      — default bottom-sheet (no override needed)
   "fullscreen" — expands to fill viewport
   ══════════════════════════════════════════════════════════════ */

.app-shell[data-detail-style="fullscreen"] .detail-overlay {
  align-items: stretch;
  justify-content: stretch;
}

.app-shell[data-detail-style="fullscreen"] .detail-panel {
  --detail-panel-radius: 0px;
  --detail-animation:    slideUp 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 100dvh;
  height:     100dvh;
  border-radius: 0;
}

/* ══════════════════════════════════════════════════════════════
   REDUCED-MOTION SAFETY
   All variant animations respect prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .app-shell[data-detail-style="fullscreen"] .detail-panel {
    --detail-animation: none;
  }
}