/* FYSH — Listing builder demo page
   Page creation: 10/10/2026 22:10
   Page modified: 11/10/2026 21:53
   CR: fysh-listing-demo-2026-10-10
   CR: fysh-listing-demo-photos-2026-10-11 — actions row for the photos step
   CR: fysh-demo-title-style-2026-10-11 — locked demo title in red on grey
   Chrome around the real builder form on the public demo page. The form itself
   is styled by workbench.css and the builder stylesheets, which this page loads.
   Content cards use the 4px radius. Mobile first. */

/* Demo photos step: actions row (back to details + leave the demo). */
.ld-demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.ld-demo-actions__exit { margin-left: auto; }
@media (max-width: 560px) {
    .ld-demo-actions__exit { margin-left: 0; width: 100%; }
    .ld-demo-actions__exit .wb-btn { width: 100%; justify-content: center; }
}

.ld-hero {
    background: var(--navy, #0F2340);
    padding: 3.5rem 0 3rem;
    text-align: center;
}
.ld-hero__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold, #C9A84C);
    margin: 0 0 0.75rem;
}
.ld-hero__title {
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.9rem;
    line-height: 1.15;
}
.ld-hero__title em { color: var(--gold, #C9A84C); font-style: italic; }
.ld-hero__sub {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.7;
}

.ld-note {
    background: #FFF8E6;
    border-top: 1px solid #EBD9A6;
    border-bottom: 1px solid #EBD9A6;
    padding: 0.85rem 0;
}
.ld-note .container {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}
.ld-note i { color: #A8863A; font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.ld-note span { font-size: 0.9rem; line-height: 1.6; color: #5A4A1E; }
.ld-note strong { color: #3F3514; }

/* The demo listing title is locked (readonly). Mark it clearly in red on a
   light grey field so it reads as a fixed demo label. CR: fysh-demo-title-style-2026-10-11 */
#title[readonly] { color: #C0392B; background: #F3F4F6; }

.ld-body {
    background: var(--cream, #EEF2F8);
    padding: 2.5rem 0 4rem;
}
.ld-body .container { max-width: 900px; }

.ld-unavailable {
    background: #fff;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
    color: var(--muted, #6B7A8D);
}

.ld-saved {
    background: #fff;
    border: 1px solid var(--border, #E2E8F0);
    border-left: 3px solid var(--gold, #C9A84C);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem;
    color: var(--navy, #0F2340);
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 720px) {
    .ld-hero { padding: 2.5rem 0 2.25rem; }
    .ld-body { padding: 1.75rem 0 3rem; }
}