/* ══ Illuminate — Refined Multi-Stack Card Layouts ══
   2026-grade card systems with blended morphism
   Glass-Clay hybrid cards, proper depth, meaningful interactions
   ═══════════════════════════════════════════════════════════════════════ */

@layer components {
  /* ══ Base Card — Glass-Clay Hybrid ══ */
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: transform var(--transition-normal) var(--ease-out),
                box-shadow var(--transition-normal) var(--ease-out),
                border-color var(--transition-fast);
    overflow: hidden;
    contain: layout style paint;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--color-border-strong);
  }

  .card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring-focus);
  }

  .card:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: var(--card-shadow);
  }

  /* Card variants */
  .card--glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }

  .card--glass:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
    box-shadow: var(--glass-shadow);
  }

  .card--clay {
    background: var(--clay-bg);
    border: 1px solid var(--clay-border);
    border-radius: var(--clay-radius);
    box-shadow: var(--clay-shadow-outer);
  }

  .card--clay:hover {
    box-shadow: var(--clay-shadow-float);
  }

  .card--clay:active {
    box-shadow: var(--clay-shadow-inner);
  }

  .card--neumorph {
    background: var(--neumorph-bg);
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--neumorph-convex-soft);
  }

  .card--neumorph:hover {
    box-shadow: var(--neumorph-convex);
  }

  .card--neumorph:active {
    box-shadow: var(--neumorph-pressed);
  }

  .card--elevated {
    box-shadow: var(--shadow-4);
  }

  .card--elevated:hover {
    box-shadow: var(--shadow-5);
  }

  .card--flat {
    box-shadow: none;
    border: 1px solid var(--color-border);
  }

  .card--flat:hover {
    box-shadow: var(--shadow-2);
    border-color: var(--color-border-strong);
  }

  /* Card sizes */
  .card--sm { padding: var(--space-4); }
  .card--md { padding: var(--space-5); }
  .card--lg { padding: var(--space-6); }
  .card--xl { padding: var(--space-8); }

  /* ══ Stack Layouts ══ */

  /* Horizontal Carousel Stack */
  .stack {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--space-4);
    padding: var(--space-4);
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
  }

  .stack::-webkit-scrollbar { height: 6px; }
  .stack::-webkit-scrollbar-track { background: transparent; }
  .stack::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 3px;
  }

  .stack__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 320px;
    max-width: 100%;
  }

  @media (max-width: 640px) {
    .stack__item { width: 280px; }
  }

  @container (max-width: 480px) {
    .stack__item { width: 100%; }
  }

  /* Vertical Stack */
  .stack--vertical {
    flex-direction: column;
    overflow-y: visible;
    overflow-x: hidden;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
  }

  .stack--vertical .stack__item {
    width: 100%;
    max-width: none;
  }

  /* Masonry Stack */
  .stack--masonry {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    grid-auto-rows: var(--space-20);
    grid-auto-flow: dense;
    padding: 0;
    margin: 0;
    overflow: visible;
  }

  .stack--masonry .stack__item {
    width: 100%;
    max-width: none;
  }

  .stack__item--tall { grid-row: span 2; }
  .stack__item--wide { grid-column: span 2; }
  .stack__item--large { grid-column: span 2; grid-row: span 2; }

  @media (max-width: 640px) {
    .stack--masonry {
      grid-template-columns: 1fr;
    }
    .stack__item--wide,
    .stack__item--large { grid-column: span 1; }
  }

  /* Layered Card Stack — 3D depth */
  .card-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    perspective: 1000px;
    padding: var(--space-4);
  }

  .card-stack__layer {
    position: relative;
    flex-shrink: 0;
    transform-style: preserve-3d;
    transition: transform var(--transition-normal) var(--ease-out),
                box-shadow var(--transition-normal) var(--ease-out),
                z-index 0s var(--transition-fast);
    cursor: pointer;
  }

  /* Staggered layers */
  .card-stack__layer:nth-child(1) { transform: translateY(0) rotateX(0) scale(1); z-index: 6; }
  .card-stack__layer:nth-child(2) { transform: translateY(6px) rotateX(-0.5deg) scale(0.98); z-index: 5; }
  .card-stack__layer:nth-child(3) { transform: translateY(12px) rotateX(-1deg) scale(0.96); z-index: 4; }
  .card-stack__layer:nth-child(4) { transform: translateY(18px) rotateX(-1.5deg) scale(0.94); z-index: 3; }
  .card-stack__layer:nth-child(5) { transform: translateY(24px) rotateX(-2deg) scale(0.92); z-index: 2; }
  .card-stack__layer:nth-child(6) { transform: translateY(30px) rotateX(-2.5deg) scale(0.9); z-index: 1; }

  .card-stack__layer:hover {
    transform: translateY(-8px) rotateX(0) scale(1.02) !important;
    box-shadow: var(--card-shadow-float) !important;
    z-index: 50 !important;
  }

  .card-stack__layer:focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring-focus) !important;
    z-index: 50 !important;
  }

  .card-stack__layer:active {
    transform: translateY(0) scale(0.98) !important;
  }

  /* Fan Stack — Radial spread */
  .fan-stack {
    position: relative;
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: var(--space-8);
    perspective: 800px;
  }

  .fan-stack__card {
    position: absolute;
    bottom: 0;
    width: 260px;
    height: 180px;
    border-radius: var(--card-radius);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transform-origin: center bottom;
    transform-style: preserve-3d;
    transition: transform var(--transition-normal) var(--ease-spring),
                box-shadow var(--transition-normal),
                z-index 0s var(--transition-fast);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .fan-stack__card[data-position="-2"] { transform: rotate(-20deg) translateX(-100px) scale(0.82); z-index: 1; opacity: 0.5; }
  .fan-stack__card[data-position="-1"] { transform: rotate(-10deg) translateX(-50px) scale(0.9); z-index: 2; opacity: 0.7; }
  .fan-stack__card[data-position="0"] { transform: rotate(0deg) translateX(0) scale(1); z-index: 3; opacity: 1; }
  .fan-stack__card[data-position="1"] { transform: rotate(10deg) translateX(50px) scale(0.9); z-index: 2; opacity: 0.7; }
  .fan-stack__card[data-position="2"] { transform: rotate(20deg) translateX(100px) scale(0.82); z-index: 1; opacity: 0.5; }

  .fan-stack__card:hover {
    transform: translateY(-24px) rotate(0) scale(1.08) !important;
    box-shadow: var(--shadow-6) !important;
    z-index: 50 !important;
    opacity: 1 !important;
  }

  .fan-stack__card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring-focus) !important;
    z-index: 50 !important;
  }

  /* Deck Stack — Vertical with peek */
  .deck-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 480px;
  }

  .deck-stack__card {
    position: relative;
    border-radius: var(--card-radius);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform var(--transition-normal) var(--ease-out),
                box-shadow var(--transition-normal) var(--ease-out),
                margin var(--transition-normal) var(--ease-out);
  }

  .deck-stack__card:not(:last-child) {
    margin-bottom: -56px; /* Peek amount */
  }

  .deck-stack__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    z-index: 10;
    margin-bottom: 0;
  }

  .deck-stack__card:hover + .deck-stack__card {
    margin-bottom: -56px;
  }

  .deck-stack__card:focus-visible {
    outline: none;
    box-shadow: var(--shadow-ring-focus);
    z-index: 10;
  }

  .deck-stack__card:last-child { margin-bottom: 0; }

  /* Bento Grid — CSS Grid based, responsive */
  .bento {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .bento__item {
    display: flex;
    flex-direction: column;
  }

  /* Bento specific sizes */
  .bento__item--featured { grid-column: span 2; grid-row: span 2; }
  .bento__item--wide { grid-column: span 2; }
  .bento__item--tall { grid-row: span 2; }
  .bento__item--large { grid-column: span 2; grid-row: span 2; }

  @media (max-width: 640px) {
    .bento {
      grid-template-columns: 1fr;
    }
    .bento__item--featured,
    .bento__item--wide,
    .bento__item--tall,
    .bento__item--large {
      grid-column: span 1;
      grid-row: span 1;
    }
  }

  /* ══ Card Components ══ */
  .card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
  }

  .card__title-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
  }

  .card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-ink);
    line-height: var(--leading-tight);
  }

  .card__subtitle {
    font-size: var(--text-sm);
    color: var(--color-ink-dim);
    line-height: var(--leading-normal);
  }

  .card__badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .card__badge--sage { background: var(--color-sage-light); color: var(--color-sage); }
  .card__badge--amber { background: var(--color-amber-light); color: var(--color-amber); }
  .card__badge--coral { background: var(--color-coral-light); color: var(--color-coral); }
  .card__badge--lavender { background: var(--color-lavender-light); color: var(--color-lavender); }

  .card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }

  .card__actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  /* ══ KPI Card ══ */
  .kpi {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .kpi__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    font-size: var(--text-xl);
  }

  .kpi__icon--sage { background: var(--color-sage-light); color: var(--color-sage); }
  .kpi__icon--amber { background: var(--color-amber-light); color: var(--color-amber); }
  .kpi__icon--coral { background: var(--color-coral-light); color: var(--color-coral); }
  .kpi__icon--lavender { background: var(--color-lavender-light); color: var(--color-lavender); }

  .kpi__trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
  }

  .kpi__trend--up { background: var(--color-success-light); color: var(--color-success); }
  .kpi__trend--down { background: var(--color-error-light); color: var(--color-error); }
  .kpi__trend--neutral { background: var(--color-surface-subtle); color: var(--color-ink-muted); }

  .kpi__value {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1;
  }

  .kpi__label {
    font-size: var(--text-sm);
    color: var(--color-ink-dim);
    font-weight: 500;
  }

  .kpi__subvalue {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
  }

  /* ══ Activity Card ══ */
  .activity {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .activity__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
  }

  .activity__item:hover {
    background: var(--color-surface-hover);
  }

  .activity__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    flex-shrink: 0;
  }

  .activity__icon--sage { background: var(--color-sage-light); color: var(--color-sage); }
  .activity__icon--amber { background: var(--color-amber-light); color: var(--color-amber); }
  .activity__icon--coral { background: var(--color-coral-light); color: var(--color-coral); }
  .activity__icon--lavender { background: var(--color-lavender-light); color: var(--color-lavender); }

  .activity__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .activity__title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    line-height: var(--leading-snug);
  }

  .activity__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
  }

  .activity__time {
    font-family: var(--font-mono);
  }

  /* ══ Schedule Card ══ */
  .schedule {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .schedule__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all var(--transition-fast);
  }

  .schedule__item:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-2);
  }

  .schedule__time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 56px;
    padding: var(--space-2);
    background: var(--color-surface-subtle);
    border-radius: var(--radius-md);
    flex-shrink: 0;
  }

  .schedule__hour {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1;
  }

  .schedule__period {
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--color-ink-muted);
    text-transform: uppercase;
  }

  .schedule__details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .schedule__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .schedule__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
  }

  .schedule__type {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    font-size: var(--text-2xs);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .schedule__type--session { background: var(--color-sage-light); color: var(--color-sage); }
  .schedule__type--group { background: var(--color-lavender-light); color: var(--color-lavender); }
  .schedule__type--checkin { background: var(--color-coral-light); color: var(--color-coral); }

  /* ══ Mood Card ══ */
  .mood-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
    padding: var(--space-6);
  }

  .mood-card__face {
    font-size: clamp(4rem, 8vw, 6rem);
    line-height: 1;
    animation: mood-breathe 3s ease-in-out infinite;
  }

  @keyframes mood-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
  }

  .mood-card__label {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-ink);
  }

  .mood-card__note {
    font-size: var(--text-base);
    color: var(--color-ink-dim);
    line-height: var(--leading-relaxed);
  }

  .mood-card__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }

  /* ══ Reveal Animation ══ */
  .reveal {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-spring);
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .reveal:nth-child(1) { transition-delay: 0ms; }
  .reveal:nth-child(2) { transition-delay: 60ms; }
  .reveal:nth-child(3) { transition-delay: 120ms; }
  .reveal:nth-child(4) { transition-delay: 180ms; }
  .reveal:nth-child(5) { transition-delay: 240ms; }
  .reveal:nth-child(6) { transition-delay: 300ms; }
  .reveal:nth-child(7) { transition-delay: 360ms; }
  .reveal:nth-child(8) { transition-delay: 420ms; }

  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }
    .mood-card__face { animation: none; }
  }

  /* ══ Container Query Responsive ══ */
  @container (max-width: 480px) {
    .stack__item { width: 100%; }
    .kpi__value { font-size: var(--text-3xl); }
    .card__title { font-size: var(--text-base); }
  }

  @container (min-width: 480px) and (max-width: 720px) {
    .stack__item { width: 300px; }
  }

  /* ══ Print Styles ══ */
  @media print {
    .card,
    .stack__item,
    .card-stack__layer,
    .fan-stack__card,
    .deck-stack__card,
    .bento__item {
      box-shadow: none;
      border: 1px solid #ccc;
      break-inside: avoid;
      transform: none !important;
    }
    .stack { overflow: visible; }
  }
}
</layer>