/* ============================================================
   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);
}

/* ── v18: "image" — a photo fills the header instead of a flat colour.
   AppShell sets --header-image-url as an inline custom property (from
   UiConfig.HeaderImage, already resolved through AssetUrlResolver) —
   this file never references the URL directly, so a broken/missing image
   just falls back to --color-primary underneath, never a CSS 404. ── */
.app-shell[data-header-style="image"] .app-header {
  --header-background: var(--color-primary);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%),
    var(--header-image-url, none);
  background-size:     cover;
  background-position: center;
  --header-border:     none;
}

.app-shell[data-header-style="image"] .app-header__name,
.app-shell[data-header-style="image"] .app-header__subtitle {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

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

html.dark .app-shell[data-header-style="image"] .app-header {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%),
    var(--header-image-url, none);
}

/* ══════════════════════════════════════════════════════════════
   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;
}

/* ── v18: "wall" — edge-to-edge photo tiles, title as a caption over a
   gradient instead of a text block below. Deliberately built on top of
   the *existing* card markup (.activity-card__emoji wrapper +
   .activity-card__body) rather than a new template, so every card variant
   ActivityCard.razor can already produce — image, video-thumb, map-pin,
   emoji, locked, quiz — automatically gets a "wall" treatment for free
   instead of needing its own case here. Best suited to packs where most
   activities have a heroImage/thumbnail; an emoji-only card still works,
   it just shows a centered emoji tile instead of a photo. ── */
.app-shell[data-card-style="wall"] .activity-card {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  position: relative;
  display: block;
  border-radius: var(--border-radius-md, 12px);
}

.app-shell[data-card-style="wall"] .activity-card__emoji {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem; /* emoji-only fallback stays legible at full tile size */
}

.app-shell[data-card-style="wall"] .activity-card__emoji img,
.app-shell[data-card-style="wall"] .activity-card__emoji .card-visual {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-shell[data-card-style="wall"] .activity-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px) var(--spacing-sm, 8px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.60) 100%);
  z-index: 1; /* sits above the absolutely-positioned emoji/media layer */
}

.app-shell[data-card-style="wall"] .activity-card__title {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  font-size: var(--font-size-sm, 0.875rem);
  margin: 0;
}

/* The wall is deliberately caption-only — description/meta/header chips
   are one tap away in the detail view, not repeated on every tile. */
.app-shell[data-card-style="wall"] .activity-card__header,
.app-shell[data-card-style="wall"] .activity-card__description,
.app-shell[data-card-style="wall"] .activity-card__meta {
  display: none;
}

/* Favourite button stays a top-corner overlay, just bumped above the media layer */
.app-shell[data-card-style="wall"] .activity-card__fav {
  z-index: 2;
}

/* ── 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);
  }
}

/* ── v18: "profile-grid" — many small tiles instead of a few wide cards.
   Pairs naturally with Activity.CardTemplate = "profile" (portrait +
   name/role — see ProfileCardVariant.razor) for directory/roster-style
   packs (staff list, club members, contact directory), but only changes
   the *grid's* column sizing — it works with plain activity cards too,
   it just makes them narrower. ── */
.app-shell[data-grid-style="profile-grid"] {
  --grid-columns: repeat(auto-fill, minmax(132px, 1fr));
  --grid-gap:     var(--spacing-sm, 8px);
}

.app-shell[data-grid-style="profile-grid"] .profile-card {
  padding: var(--spacing-sm, 8px);
}

.app-shell[data-grid-style="profile-grid"] .profile-card__portrait {
  aspect-ratio: 1 / 1;
}

@media (min-width: 640px) {
  .app-shell[data-grid-style="profile-grid"] {
    --grid-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════
   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;
  }
}