/* Moodboard section on the public landing (#pl-moodboard).
   The widget itself is styled by moodboard.css; this file only frames it inside the
   landing's glass panel and lays out the signed-out sample. Not part of the nav. */

.pl-sec--mb { overflow-x: clip; }
.pl-mb { padding: clamp(0.75rem, 2vw, 1.25rem); border-radius: var(--radius-card-lg, 18px); min-width: 0; }
.pl-mb .mb { min-width: 0; }
.pl-mb .mb__loading { padding: var(--space-5, 1.25rem); text-align: center; }

/* signed-out / no-access: today's public sample + a way in */
.pl-mb__locked { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-5, 1.25rem); align-items: start; }
.pl-mb__sample { display: grid; gap: var(--space-3, 0.75rem); min-width: 0; }
.pl-mb__art svg, .pl-mb__bar svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.pl-mb__bar svg { height: 44px; }
.pl-mb__note { margin: 0; font-size: 0.8125rem; }
.pl-mb__cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3, 0.75rem); min-width: 0; }
.pl-mb__card { display: grid; gap: var(--space-2, 0.5rem); padding: var(--space-3, 0.75rem) var(--space-4, 1rem); border: 1px solid var(--q2-surface-border); border-radius: 14px; background: color-mix(in srgb, var(--q2-ink-0, #000) 3%, transparent); justify-items: start; }
.pl-mb__card p, .pl-mb__card h3 { margin: 0; }
.pl-mb__gate { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-4, 1rem); align-items: center; justify-content: space-between; padding: var(--space-4, 1rem) var(--space-5, 1.25rem); border-radius: 14px; border: 1px solid var(--q2-surface-border); background: color-mix(in srgb, var(--pl-brand, #2f6bff) 9%, transparent); }
.pl-mb__gate h3, .pl-mb__gate p { margin: 0; }
.pl-mb__gate p { margin-top: var(--space-1, 0.25rem); color: var(--q2-ink-2); max-width: 46rem; }
@container q2-workspace (max-width: 760px) { .pl-mb__locked { grid-template-columns: minmax(0, 1fr); } }

/* playground strip above the widget (visitors without a Moodboard of their own) */
.pl-mb__demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem); margin: 0 0 var(--space-3, 0.75rem); }
.pl-mb__demo-bar p { margin: 0; font-size: 0.8125rem; flex: 1 1 14rem; min-width: 0; }
.pl-mb__demo-bar .q2-btn { margin-inline-start: auto; }
.pl-mb__gate { margin-top: var(--space-4, 1rem); }