/**
 * PublicFeedDestination — layout for the anonymous public-feed views (Forside
 * landing cards + Færd snippet teaser) rendered into the SHARED player-portal
 * content mounts (#player-overview-mount / #quest-feed-mount).
 *
 * Migrated from the retired ulogged-landing.css (forside/faerd subset only).
 * Uses design-tokens fra public/css/design-tokens.css (Luminous Spindle); no
 * hardcoded colors. Card surfaces (papir+guld) come from .hd-portal-fg-card
 * (player-portal-bg.css), added on the cards in JS — paritet med den indloggede
 * portal. The outer wrapper owns `container-type` so the forside two-column
 * grid resolves regardless of the shared mount it lives in.
 */

@layer components {

  /* =============================================================================
     Root wrapper — owns the container-context for the forside grid query.
     The shared content mounts (.hd-player-content-mount) do NOT establish a
     container, so we anchor the query here instead of on the mount.
     ============================================================================= */

  .hd-public-feed-destination {
    container-type: inline-size;
    width: 100%;
  }

  /* =============================================================================
     Base section (forside + faerd share this layout)
     ============================================================================= */

  .hd-public-feed {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
    padding: var(--hd-space-4) var(--hd-space-3);
    max-width: 600px;
    margin: 0 auto;
  }

  /* =============================================================================
     Card
     ============================================================================= */

  /* Surface (baggrund + kant + radius) leveres af .hd-portal-fg-card, som
   * public-feed-destination.js tilføjer på kortene — paritet med den indloggede
   * portal. Her beholdes kun padding. */
  .hd-public-feed__card {
    padding: var(--hd-space-3);
  }

  /* Card heading — same section-heading voice as logged-in portal cards */
  .hd-public-feed__card-heading {
    color: var(--hd-accent-primary);
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h4);
    font-weight: var(--hd-weight-semibold);
    line-height: var(--hd-leading-snug);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: var(--hd-space-1);
  }

  /* Card body — main content text */
  .hd-public-feed__card-body {
    color: var(--hd-text-primary);
    font-size: var(--hd-text-body);
    line-height: var(--hd-leading-normal);
  }

  /* =============================================================================
     Card modifiers
     ============================================================================= */

  /* did-you-know — italic flavor for "vidste du at…" snippets */
  .hd-public-feed__card--did-you-know .hd-public-feed__card-body {
    font-style: italic;
  }

  /* private-hint — dashed border, muted, centered */
  .hd-public-feed__card--private-hint {
    border-style: dashed;
    opacity: 0.6;
    text-align: center;
  }

  /* faerd-item / chronicles / mentioned — inherit base card style; no extra rules. */

  /* =============================================================================
     Empty / hint states
     ============================================================================= */

  .hd-public-feed__empty-hint {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-body);
    text-align: center;
    padding: var(--hd-space-4) 0;
  }

  /* =============================================================================
     Desktop wide-layout (container query on the wrapper)
     ============================================================================= */

  @container (min-width: 720px) {
    .hd-public-feed--forside {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--hd-space-3);
    }

    .hd-public-feed--forside .hd-public-feed__card--did-you-know {
      grid-column: 1 / -1;
    }
  }

} /* end @layer components */