/* =============================================================================
 * atomicplan/download-list — Block-CSS
 *
 * Gescoped auf `.frame-type-atomicplan_downloadlist`. KEIN Sektions-Hintergrund,
 * KEIN Sektions-Padding, KEINE Container-Breite (Frame-System). Farben ueber
 * Bootstrap-Tokens, damit `.frame.-colorized` automatisch invertiert.
 * ========================================================================== */

.frame-type-atomicplan_downloadlist {

  --pl-dl-gap: 1rem;
  --pl-dl-line: color-mix(in srgb, var(--bs-body-color, #333) 16%, transparent);
  --pl-dl-muted: color-mix(in srgb, var(--bs-body-color, #333) 68%, transparent);
  --pl-dl-accent: var(--bs-primary, #0d6efd);
  --pl-dl-badge-bg: color-mix(in srgb, var(--bs-body-color, #333) 8%, transparent);

  .pl-dl__intro {
    /* Reine Text-Zeilenlaenge — KEIN Sektions-Container. */
    max-width: 60rem;
    margin-block: 0 var(--pl-dl-gap);
  }
  .pl-dl__intro > *:last-child { margin-bottom: 0; }

  .pl-dl__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
  }

  .pl-dl__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--pl-dl-gap);
    /* Zeilen-Innenpolster der Komponente, kein Sektions-Padding. */
    padding-block: 1rem;
    border-top: 1px solid var(--pl-dl-line);
    min-width: 0;
  }
  .pl-dl__item:last-child { border-bottom: 1px solid var(--pl-dl-line); }

  .pl-dl__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    background: var(--pl-dl-badge-bg);
    color: var(--pl-dl-accent);
  }

  .pl-dl__body { flex: 1 1 auto; min-width: 0; }

  .pl-dl__title { margin: 0; font-weight: 600; }
  .pl-dl__link { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
  /* Ganze Zeile klickbar, ohne den Link aus dem Titel zu loesen. */
  .pl-dl__link::after { content: ''; position: absolute; inset: 0; }
  .pl-dl__item:hover .pl-dl__link { color: var(--pl-dl-accent); }

  .pl-dl__desc { margin: 0.2rem 0 0; color: var(--pl-dl-muted); }

  .pl-dl__meta {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--pl-dl-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .pl-dl__meta-item + .pl-dl__meta-item::before {
    content: '·';
    margin-right: 0.5rem;
  }

  .pl-dl__cta {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pl-dl-accent);
    white-space: nowrap;
  }
  .pl-dl__cta::after { content: ' \2193'; }

  /* ---- Variante: cards (zweispaltig) ------------------------------------ */
  .pl-dl.-cards .pl-dl__items { gap: var(--pl-dl-gap); }
  .pl-dl.-cards .pl-dl__item {
    align-items: flex-start;
    flex-wrap: wrap;
    /* Karten-Innenpolster ist Komponenten-CSS (echte Karte). */
    padding: 1.25rem;
    border: 1px solid var(--pl-dl-line);
  }
  .pl-dl.-cards .pl-dl__item:last-child { border-bottom: 1px solid var(--pl-dl-line); }
  .pl-dl.-cards .pl-dl__cta { width: 100%; }

  @media (min-width: 768px) {
    .pl-dl.-cards .pl-dl__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Auf schmalen Viewports bricht die Zeilenvariante die CTA in die naechste Zeile. */
  @media (max-width: 575.98px) {
    .pl-dl__item { flex-wrap: wrap; }
    .pl-dl__cta { width: 100%; }
  }
}