/**
 * Rich-description typography.
 *
 * Applies to .property-description--rich (Markdown-rendered Property.description).
 * Targets headings, lists, strong text, and call-out boxes inside the article body.
 * All values pulled from design-system tokens — no raw hex.
 */

.property-description--rich {
    color: var(--color-text-primary, #0c2340);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.7;
}

.property-description--rich h2 {
    font-family: var(--font-family-display, 'Playfair Display', Georgia, serif);
    font-size: var(--font-size-xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #0c2340);
    margin: var(--space-5) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border, rgba(12, 35, 64, 0.1));
    letter-spacing: -0.01em;
}

.property-description--rich h2:first-child {
    margin-top: 0;
}

.property-description--rich h3 {
    font-family: var(--font-family-display, 'Playfair Display', Georgia, serif);
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-text-primary, #0c2340);
    margin: var(--space-4) 0 var(--space-2);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.property-description--rich h3::before {
    content: '';
    width: 4px;
    height: 1em;
    background: var(--color-accent, #d4af37);
    border-radius: 999px;
    display: inline-block;
    transform: translateY(0.15em);
}

.property-description--rich p {
    margin: 0 0 var(--space-3);
}

.property-description--rich strong {
    color: var(--color-text-primary, #0c2340);
    font-weight: var(--font-weight-semibold, 600);
}

.property-description--rich ul {
    margin: var(--space-2) 0 var(--space-4);
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.property-description--rich ul li {
    position: relative;
    padding-inline-start: var(--space-4);
    color: var(--color-text-primary, #0c2340);
}

.property-description--rich ul li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.6em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent, #d4af37);
}

.property-description--rich a {
    color: var(--color-primary, #0c2340);
    text-decoration: underline;
    text-decoration-color: var(--color-accent, #d4af37);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.property-description--rich a:hover {
    color: var(--color-accent, #d4af37);
}