/* ============================================================================
   Empty-State Placeholders — Global Utility
   ============================================================================
   Visual treatment for empty fields when Brand Identity →
   Display → "Empty State Treatment" is set to "placeholder."

   Emitted by guidelines_field_state() in block-helpers.php as a sibling
   alternative to the existing shimmer skeleton treatment. Each placeholder
   carries a `.empty-state-placeholder--{type}` modifier that sizes it to
   echo the visual heft of the element it stands in for.

   Container outline (.has-empty-state-placeholders) is opt-in — block render
   templates add it to column-like containers to visually frame the
   placeholders during authoring.
============================================================================ */

/* ── Placeholder base ────────────────────────────────────────────────────── */

.empty-state-placeholder {
    display: block;
    border: 1px dashed rgba( 0, 0, 0, 0.4 );
    border-radius: 6px;

    /* ── PILL BACKDROP (trial — added 2026-05-02) ──────────────────────────
       Warm cream backdrop + neutral system font so placeholders read
       against any block background (color, gradient, image, brand-color var).
       To revert: replace these three rules with the originals below and
       delete this comment block.
           background-color: rgba( 0, 0, 0, 0.025 );
           color:            rgba( 0, 0, 0, 0.5 );
           font-family:      inherit;       (was unset; placeholders inherited)
       ────────────────────────────────────────────────────────────────── */
    background-color: rgba( 252, 248, 240, 0.88 );
    color: rgba( 60, 55, 50, 0.7 );
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

    font-style: italic;
    line-height: 1.4;
    user-select: none;
}

/* ── Per-type sizing — each placeholder echoes the shape of its real element */

.empty-state-placeholder--overline {
    display: inline-block;
    width: fit-content;
    padding: 4px 10px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.empty-state-placeholder--header {
    width: 80%;
    min-height: 56px;
    padding: 16px 18px;
    font-size: 1.3rem;
    line-height: 1.15;
    border-radius: 8px;
    display: flex;
    align-items: center;
    /* Mirror parent text-align — set via --placeholder-justify on alignment classes */
    justify-content: var( --placeholder-justify, flex-start );
}

.empty-state-placeholder--subheader {
    width: 65%;
    padding: 10px 14px;
    font-size: 1rem;
}

.empty-state-placeholder--content {
    width: 100%;
    min-height: 88px;
    padding: 18px;
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    justify-content: var( --placeholder-justify, flex-start );
}

.empty-state-placeholder--cta {
    display: inline-block;
    width: fit-content;
    padding: 10px 22px;
    font-size: 0.85rem;
    border-width: 1.5px;
    margin-top: 4px;
    /* Inherits border-radius: 6px from .empty-state-placeholder base — was
       previously 999px (pill-shaped) but unified to 6px to match the rest of
       the placeholder family. */
}

/* Image variant — replaces shimmer for image fields when placeholder treatment is active.
   Trial added 2026-05-02. To revert: delete this rule + the matching elseif branch
   in any image-rendering block (e.g. element__image/render.php). */
.empty-state-placeholder--image {
    width: 100%;
    min-height: 180px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    font-size: 0.85rem;
    height: 100%;
}

.empty-state-placeholder--image svg {
    width: 64px;
    height: 64px;
    opacity: 0.55;
    /* Don't set fill — the SVG's own fill="none" + stroke="currentColor" handles
       the outlined sketch look. CSS fill would override and make shapes solid. */
}

.empty-state-placeholder__label {
    display: inline-block;
}

/* Vertical rhythm — adjacent stacked pills get a default gap between them.
   Mirrors the typical 12px heading-stack rhythm of real content (overline →
   heading → subheader → body). Block-specific overrides (e.g. inside a flex
   row) can disable this by setting margin-top: 0 on the relevant pills. */
.empty-state-placeholder + .empty-state-placeholder {
    margin-top: 12px;
}

/* ── Alignment-aware placeholders ────────────────────────────────────────── */
/* Hero alignment classes propagate horizontal alignment to flex-based
   placeholders (header, content) via the --placeholder-justify variable.
   Custom properties cascade, so descendants pick this up automatically. */

.hero--align-left   { --placeholder-justify: flex-start; }
.hero--align-center { --placeholder-justify: center; }
.hero--align-right  { --placeholder-justify: flex-end; }

/* ── Container outline (opt-in via class) ────────────────────────────────── */
/* Blocks add .has-empty-state-placeholders to a column-like container when
   guidelines_in_placeholder_mode( $is_preview ) is true, so the placeholders
   read as "contained inside something" during authoring.                     */

.has-empty-state-placeholders {
    padding: 24px;
    border: 1px dashed rgba( 0, 0, 0, 0.18 );
    border-radius: 10px;
    background-color: rgba( 0, 0, 0, 0.005 );
}