/* ============================================================================
   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. */
}

/* Icon variant — a small dashed circle standing in for a single icon slot
   (menu dietary/allergen tags, brand social links). */
.empty-state-placeholder--icon {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 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: 330px;
    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 ────────────────────────────────────────── */
/* 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. */

.is-aligned-left   { --placeholder-justify: flex-start; }
.is-aligned-center { --placeholder-justify: center; }
.is-aligned-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 );
}

/* ── Multi-tile, layout-emulating placeholders ────────────────────────────────
   Emitted by guidelines_empty_tiles() for repeating blocks (galleries,
   carousels, card carousels, blog feed). Instead of one pill, the empty state
   previews the block's real arrangement so the editor sees where content lands.
   Tiles reuse the single pill's dashed-frame + faint icon look.             */

.empty-state-tiles-group {
    width: 100%;
}

.empty-state-tiles__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba( 0, 0, 0, 0.4 );
    border-radius: 6px;
    /* Soft diagonal wash + inset edge give the tiles depth so a field of them
       doesn't read as one flat rectangle. */
    background-image: linear-gradient( 135deg, rgba( 252, 248, 240, 0.94 ), rgba( 244, 238, 227, 0.94 ) );
    box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.5 ), 0 1px 3px rgba( 0, 0, 0, 0.06 );
    min-height: 120px;
}

/* Gentle tonal + icon-opacity variation across the set — breaks the uniform
   grid so it feels like distinct images will land here. */
.empty-state-tiles__tile:nth-child( 3n + 2 ) {
    background-image: linear-gradient( 135deg, rgba( 250, 245, 236, 0.94 ), rgba( 240, 233, 220, 0.94 ) );
}

.empty-state-tiles__tile:nth-child( 3n ) {
    background-image: linear-gradient( 135deg, rgba( 248, 242, 232, 0.94 ), rgba( 246, 240, 229, 0.94 ) );
}

.empty-state-tiles__tile svg {
    width: 44px;
    height: 44px;
    opacity: 0.45;
    /* Match the single pill: SVG's own stroke handles the outlined look. */
}

.empty-state-tiles__tile:nth-child( 2n ) svg {
    opacity: 0.32;
}

/* Grid — even columns. */
.empty-state-tiles--grid {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 12px;
}

/* Masonry — CSS columns, staggered tile heights for the offset look. */
.empty-state-tiles--masonry {
    column-count: 3;
    column-gap: 12px;
}

.empty-state-tiles--masonry .empty-state-tiles__tile {
    margin-bottom: 12px;
    break-inside: avoid;
}

.empty-state-tiles--masonry .empty-state-tiles__tile:nth-child( 3n + 1 ) { min-height: 160px; }
.empty-state-tiles--masonry .empty-state-tiles__tile:nth-child( 3n + 2 ) { min-height: 220px; }
.empty-state-tiles--masonry .empty-state-tiles__tile:nth-child( 3n )     { min-height: 130px; }

/* Row — horizontal strip of slide-sized tiles (image carousels). */
.empty-state-tiles--row {
    display: flex;
    gap: 12px;
    overflow: hidden;
}

.empty-state-tiles--row .empty-state-tiles__tile {
    flex: 0 0 calc( ( 100% - 24px ) / 3 );
    min-height: 180px;
}

/* Scrolling row — continuous marquee crawl for blocks that move on their own
   (marquee gallery, smooth-loop logo carousel). The track holds the tile set
   twice; translateX(-50%) lands on the duplicate, so the loop is seamless. */
.empty-state-tiles--scroll {
    overflow: hidden;
}

.empty-state-tiles--scroll .empty-state-tiles__track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: empty-state-tiles-scroll 30s linear infinite;
}

.empty-state-tiles--scroll .empty-state-tiles__tile {
    flex: 0 0 auto;
    width: 220px;
    min-height: 180px;
}

@keyframes empty-state-tiles-scroll {
    from { transform: translateX( 0 ); }
    to   { transform: translateX( -50% ); }
}

/* Honor reduced-motion — hold the strip still for visitors who opt out. */
@media ( prefers-reduced-motion: reduce ) {
    .empty-state-tiles--scroll .empty-state-tiles__track {
        animation: none;
    }
}

/* Cards — horizontal strip of card-shaped tiles (menu / team / blog feed). */
.empty-state-tiles--cards {
    display: flex;
    gap: 16px;
    overflow: hidden;
}

.empty-state-tiles__tile--card {
    flex: 0 0 calc( ( 100% - 32px ) / 3 );
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px;
    min-height: 240px;
}

.empty-state-tiles__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border-radius: 4px;
    background-color: rgba( 0, 0, 0, 0.03 );
}

.empty-state-tiles__line {
    height: 12px;
    border-radius: 3px;
    background-color: rgba( 0, 0, 0, 0.08 );
}

.empty-state-tiles__line--short {
    width: 60%;
}

/* Stack — vertical column of full-width card tiles (single-column blog feed).
   Reuses the card tile; overrides the horizontal flex-basis to fill the column
   and gives the media box a wide 16:9 shape like a real blog-card image. */
.empty-state-tiles--stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.empty-state-tiles--stack .empty-state-tiles__tile--card {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
}

.empty-state-tiles--stack .empty-state-tiles__media {
    aspect-ratio: 16 / 9;
    min-height: 160px;
}

/* Slideshow — one large featured tile above a strip of thumbnail tiles. */
.empty-state-tiles--slideshow {
    display: block;
}

.empty-state-tiles__featured {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba( 0, 0, 0, 0.4 );
    border-radius: 6px;
    background-image: linear-gradient( 135deg, rgba( 252, 248, 240, 0.94 ), rgba( 244, 238, 227, 0.94 ) );
    box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.5 ), 0 1px 3px rgba( 0, 0, 0, 0.06 );
    min-height: 320px;
}

.empty-state-tiles__featured svg {
    width: 64px;
    height: 64px;
    opacity: 0.45;
}

.empty-state-tiles__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.empty-state-tiles__thumb {
    flex: 1;
    min-height: 64px;
    border: 1px dashed rgba( 0, 0, 0, 0.35 );
    border-radius: 4px;
    background-image: linear-gradient( 135deg, rgba( 250, 245, 236, 0.94 ), rgba( 242, 235, 223, 0.94 ) );
    box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.45 );
}

/* Caption — one muted label under the whole tile group. */
.empty-state-tiles__caption {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-style: italic;
    font-size: 0.85rem;
    color: rgba( 60, 55, 50, 0.7 );
    user-select: none;
}

/* Narrow viewport / container — collapse to two columns. */
@media ( max-width: 768px ) {
    .empty-state-tiles--grid { grid-template-columns: repeat( 2, 1fr ); }
    .empty-state-tiles--masonry { column-count: 2; }
    .empty-state-tiles--row .empty-state-tiles__tile { flex-basis: calc( ( 100% - 12px ) / 2 ); }
    .empty-state-tiles__tile--card { flex-basis: calc( ( 100% - 16px ) / 2 ); }
}