/*
 * Development placeholders (components/content-required, docs/10 §3).
 * Rendered only outside production. Quiet enough to keep the page's real
 * composition readable, distinct enough never to pass for content: a
 * small "In development" label, the exact [CONTENT REQUIRED …] marker in
 * muted text, a terracotta tick and a fine hatched ground that no
 * production component uses.
 */

.ru-placeholder {
    --ru-ph-ground: rgb(237 229 216 / 0.55);
    --ru-ph-line: rgb(156 143 126 / 0.18);
    --ru-ph-text: var(--ru-color-muted);
    --ru-ph-label: var(--ru-color-text-secondary);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ru-space-1);
    margin: var(--ru-space-4) 0;
    padding: var(--ru-space-4) var(--ru-space-5);
    border-left: 2px solid var(--ru-terracotta);
    background:
        repeating-linear-gradient(-45deg, transparent 0 9px, var(--ru-ph-line) 9px 10px),
        var(--ru-ph-ground);
}

.ru-placeholder__label {
    display: inline-flex;
    align-items: center;
    gap: var(--ru-space-2);
    font-size: var(--ru-fs-50);
    font-weight: 600;
    letter-spacing: var(--ru-tracking-label);
    text-transform: uppercase;
    color: var(--ru-ph-label);
}

.ru-placeholder__label::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--ru-terracotta);
}

.ru-placeholder__text {
    font-size: var(--ru-fs-100);
    line-height: 1.5;
    color: var(--ru-ph-text);
}

/* Media: an empty frame of the final shape, label centred low. */
.ru-placeholder--media {
    justify-content: flex-end;
    width: 100%;
    margin: 0;
    padding: clamp(1rem, 5%, 2rem);
    border-left: 0;
    box-shadow: inset 0 0 0 1px rgb(156 143 126 / 0.35);
}

/* Action: the shape of the future button, outlined, inert. */
.ru-placeholder--action {
    margin: 0;
    padding: var(--ru-space-3) var(--ru-space-4);
    border: 1px solid rgb(156 143 126 / 0.6);
    border-left: 2px solid var(--ru-terracotta);
}

/* Gallery: three empty frames standing for the grid to come. */
.ru-placeholder--gallery {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.ru-placeholder__frames {
    display: grid;
    max-width: 42rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ru-gutter);
    margin: 0 0 var(--ru-space-4);
    padding: 0;
    list-style: none;
}

.ru-placeholder__frames li {
    aspect-ratio: 4 / 5;
    background:
        repeating-linear-gradient(-45deg, transparent 0 9px, var(--ru-ph-line) 9px 10px),
        var(--ru-ph-ground);
    box-shadow: inset 0 0 0 1px rgb(156 143 126 / 0.3);
}

.ru-placeholder__caption {
    display: flex;
    flex-direction: column;
    gap: var(--ru-space-1);
    margin: 0;
    padding-left: var(--ru-space-4);
    border-left: 2px solid var(--ru-terracotta);
}

@media (max-width: 575.98px) {
    .ru-placeholder__frames li:nth-child(3) {
        display: none;
    }

    .ru-placeholder__frames {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* On dark grounds (hero, statement band). */
.ru-on-dark .ru-placeholder {
    --ru-ph-ground: rgb(255 255 255 / 0.03);
    --ru-ph-line: rgb(185 174 159 / 0.08);
    --ru-ph-text: var(--ru-night-muted);
    --ru-ph-label: var(--ru-night-soft);
}

.ru-on-dark .ru-placeholder--media {
    box-shadow: inset 0 0 0 1px rgb(185 174 159 / 0.2);
}