/* path: wp-content/themes/bedrebyttede/assets/css/components/surface-listing-body.css */
@layer components {

  /* ============ LISTING INNER ============ */
  .listing-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 100%;
  }

  /* ============ CONTENT GRID ============ */
  .bb-surface-grid {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);

    /* Track list: prefer typed custom prop animation when supported */
    /* Fallback track list using your existing variables */
    grid-template-columns:
      var(--bb-surface-grid-columns, var(--bb-surface-grid-columns-idle));

    /* Named areas so mobile can deterministically reorder */
    grid-template-areas: "details sidebar";

    /* Smooth fallback if you're animating track list directly */
    transition:
      grid-template-columns var(--bb-surface-grid-transition, 240ms) var(--ease-in-out, ease-in-out);
  }

  .bb-surface-details {
    grid-area: details;
    min-width: 0;
    /* Prevent blowout */
  }

  .bb-surface-sidebar {
    grid-area: sidebar;
    min-width: 0;
    /* Prevent blowout */
  }

  /* Desktop/tablet active swap */
  .listing-inner.is-offer-active .bb-surface-grid {
    --bb-surface-grid-columns: var(--bb-surface-grid-columns-active);
  }

  /* Optional: Safari-buttery variant using --left percentage.
     Enable by setting these per state (they override the track list above). */
  .bb-surface-grid[data-smooth-cols="true"] {
    grid-template-columns:
      minmax(0, var(--left, 64%)) minmax(0, calc(100% - var(--left, 64%)));
    transition:
      --left var(--bb-surface-grid-transition, 240ms) var(--ease-in-out, ease-in-out);
  }

  .listing-inner.is-offer-active .bb-surface-grid[data-smooth-cols="true"] {
    --left: 36%;
  }

  /* ============ OFFER TRIGGER STATES ============ */
  .listing-inner [data-bb-action="start-offer"] {
    transition:
      transform var(--dur-1) var(--ease-out, ease-out),
      box-shadow var(--dur-1) var(--ease-out, ease-out),
      background var(--dur-2),
      color var(--dur-2);
  }

  .listing-inner.is-offer-active [data-bb-action="start-offer"],
  .listing-inner [data-bb-action="start-offer"].is-offer-trigger-active,
  [data-bb-action="start-offer"][aria-pressed="true"] {
    --_bg: var(--btn-toggle-bg);
    --_fg: var(--btn-toggle-fg);
    --_bd: var(--btn-toggle-border);
    box-shadow: var(--btn-toggle-shadow);
  }

  .listing-inner.is-offer-active [data-bb-action="start-offer"]:hover,
  .listing-inner [data-bb-action="start-offer"].is-offer-trigger-active:hover,
  [data-bb-action="start-offer"][aria-pressed="true"]:hover {
    box-shadow: var(--shadow-1);
  }

  /* ============ COPY / TITLE ============ */
  .bb-surface-copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
  }

  .bb-surface-title {
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 !important;
  }

  .bb-surface-subtitle {
 font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-2);
    margin: 0 0 var(--space-3) 0;
  }
  
  /* ============ META ROW ============ */
  .bb-meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-4);
    flex-wrap: wrap;
  }

  .bb-dot {
    color: var(--text-3);
    margin: 0 4px;
  }

  .bb-meta-row .bb-pill {
    border: var(--border-1) solid var(--line);
    border-radius: var(--radius-round);
    font-size: var(--fs-sm);
    background: var(--surface-2);
    padding: var(--space-1) var(--space-2);
    color: var(--text-2);
  }

  /* ============ PROSE (BODY TEXT) ============ */
  /* Deliberately subordinate to title (fs-xl) and pills (fs-sm/600):
     same size as pills but lighter weight + softer color + generous
     line-height signals "read when ready" instead of competing
     for the initial scan. Whitespace alone separates zones. */
  .bb-prose {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-3);
    max-width: 65ch;
    margin-top: var(--space-5);
  }

  .bb-prose p {
    margin: var(--space-3) 0;
  }

  .bb-prose p:first-child {
    margin-top: 0;
  }

  .bb-prose p:last-child {
    margin-bottom: 0;
  }

  /* ============ WISHES SECTION ============ */
  .bb-listing-wishes {
    margin-top: var(--space-6);
  }

  .bb-listing-wishes__label {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
  }
}