/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.list.fromJson
   Classification : UI Atom | JSON-Driven List | Wrapping-Aware
   Version        : 1.1.0 | Genesis-Final • Layered • Token-Scoped
   File           : /tools/modules/ui.list.fromJson/ui.list.fromJson.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

@layer ui.list {
  /* ─── Wrapper ───────────────────────────────────────────────────────────── */
  .ui-list__wrap {
    width: 100%;
    display: block;
    box-sizing: border-box;
  }

  /* ─── Title ─────────────────────────────────────────────────────────────── */
  .ui-list__title {
    margin: 0 0 1rem 0;
    font-size: var(--ui-list-title-fs, 1.25rem);
    font-weight: var(--ui-list-title-fw, 600);
    color: var(--ui-list-title-fg, #000);
  }

  /* ─── Root List ─────────────────────────────────────────────────────────── */
  .ui-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--ui-list-gap, 16px);
  }

  /* Auto-fill grid - only for non-variant lists */
  @media (min-width: 700px) {
    .ui-list:not(.ui-list--portfolio) {
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
  }

  /* ─── Items ─────────────────────────────────────────────────────────────── */
  .ui-list__item {
    margin: 0;
    line-height: 1.5;
    color: var(--ui-list-fg, #333);
  }

  /* ─── Links ─────────────────────────────────────────────────────────────── */
  .ui-list__link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: color 0.25s ease, opacity 0.25s ease;
  }

  .ui-list__link:hover {
    opacity: 0.85;
  }

  /* ─── Thumbnails ─────────────────────────────────────────────────────────── */
  .ui-list__thumb {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--ui-list-thumb-radius, 0); /* Default to 0 for clean corners */
  }

  /* ─── Labels ────────────────────────────────────────────────────────────── */
  .ui-list__label {
    display: block;
    margin-top: 8px;
    font-size: var(--ui-list-label-fs, 1rem);
  }

  /* ─── Portfolio Variant ────────────────────────────────────────────────── */
  .ui-list--portfolio {
    display: grid;
    grid-template-columns: repeat(var(--ui-list-cols, 2), minmax(0, 1fr));
    gap: 0; /* No gap between images */
  }

  .ui-list__item--portfolio {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0; /* No padding */
  }

  .ui-list__link--portfolio {
    display: block;
    position: relative;
    width: 100%;
    min-height: 420px;
    text-decoration: none;
    color: inherit;
    transition: background 0.3s ease;
    margin: 0;
    padding: 0; /* No padding */
  }

  .ui-list__thumb--portfolio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0; /* No padding */
    border-radius: 0; /* Clean corners, no radius */
    transition: opacity 0.3s ease;
  }

  .ui-list__label--portfolio {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    z-index: 2;
    white-space: nowrap;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .ui-list__link--portfolio:hover {
    background: #fff;
  }

  .ui-list__link--portfolio:hover .ui-list__thumb--portfolio {
    opacity: 0;
  }

  .ui-list__link--portfolio:hover .ui-list__label--portfolio {
    opacity: 1;
  }

  /* Responsive: stack on mobile */
  @media (max-width: 700px) {
    .ui-list--portfolio {
      grid-template-columns: 1fr;
    }
  }

  /* ─── Feedback Variant ────────────────────────────────────────────────────── */
  .ui-list__item--feedback {
    position: relative;
    margin: 0;
    padding: 2rem;
    background: #fff; /* Pure white background */
    border: none; /* No decorative line */
    cursor: default !important; /* Lock: no pointer cursor */
    display: flex;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    min-height: 420px; /* Match portfolio card height for grid alignment */
  }

  .ui-list__item--feedback blockquote {
    margin: 0;
    padding: 0;
    border: none;
    text-align: center; /* Center text horizontally */
    width: 100%;
  }

  /* Quote text styling */
  .ui-list__item--feedback__quote {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ui-list-feedback-quote-fg, #333);
    margin: 0 0 1rem 0;
    font-style: italic;
    text-align: center; /* Center quote text */
  }

  /* Author attribution styling */
  .ui-list__item--feedback__cite {
    display: block;
    font-size: 0.875rem;
    color: var(--ui-list-feedback-cite-fg, #666);
    font-style: normal;
    font-weight: 500;
    text-align: center; /* Center attribution */
  }

  /* Lock: no hover effects for feedback */
  .ui-list__item--feedback:hover {
    background: #fff; /* Pure white, no change on hover */
  }

  /* Lock: ensure feedback items are not clickable */
  .ui-list__item--feedback a {
    pointer-events: none;
    cursor: default;
  }
}

/* ─── Wrapping Awareness Tokens (Optional) ───────────────────────────────────
   These ensure spacing behaves correctly when the list is wrapped
   by ui.canvas / ui.section.body / ui.grid containers.
   You can override them via theme or site tokens.
   -------------------------------------------------------------------------- */
:root {
  --ui-list-gap: 16px;
  --ui-list-thumb-radius: 0; /* Clean corners by default */
  --ui-list-fg: #333;
  --ui-list-title-fg: #000;
}