/* ============================================================================
   Empty-State Corporate Mode
   ============================================================================
   Visual treatment for empty fields when Brand Identity -> Display ->
   "Empty State Treatment" is set to "corporate."

   Philosophy: Corporate placeholders look like real content with generic
   copy and a subtle gold accent denoting their placeholder status. Distinct
   from shimmer (loading feel) and placeholder mode (dotted-border helper
   text for mid-authoring). Corporate mode is the "marketing screenshot"
   look, intended for demos and pre-content polish.

   Color philosophy: brand-aware accent. Uses var(--brand-color-primary)
   for the gold accent, falling back to Zorn Ochre (#C49A3C) when Brand
   Identity is unset. Text colors inherit from section context so Corporate
   placeholders read on both light and dark sections (the section background
   has to be set deliberately by the editor; Corporate respects whatever
   typography color is in effect).

   Surface philosophy: transparent. No panel backgrounds on placeholders.
   Each placeholder occupies real-content space and mimics real-content
   styling. The "this is placeholder" signal is the gold accent (the gold
   overline, the gold-underlined heading, the gold-filled CTA).

   Emitted by guidelines_field_state() in block-helpers.php. Per-block
   render templates that bypass that helper for special placeholder logic
   (image fields, container outlines) are tracked in potential-additions.md
   as polish-pass items.
============================================================================ */

/* -- Overline -------------------------------------------------------------- */
/* The overline IS the gold accent. Real overline styling (small uppercase
   letterspaced text), color set to brand-primary so it reads as the
   signature gold element of the placeholder set. */

.empty-state-corporate--overline {
    display: inline-block;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var( --brand-color-primary, #C49A3C );
    user-select: none;
}

/* -- Heading --------------------------------------------------------------- */
/* Real heading styling. Color inherits from section so it reads on whatever
   text color the section has set. No explicit marker; the heading's role as
   placeholder is signaled by the gold-accented overline above it and the
   generic copy itself. Original spec had a subtle gold underline beneath
   the text; removed 2026-05-22 because it read too "underlined header"
   rather than "subtle placeholder marker." */

.empty-state-corporate--header {
    display: block;
    font-family: inherit;
    font-size: clamp( 2rem, 5vw, 3rem );
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: inherit;
    user-select: none;
}

/* -- Subheader ------------------------------------------------------------- */
/* Real subheader styling. No explicit gold marker; reads as placeholder
   via context with the gold-accented overline and underlined heading
   sitting above it. Slight opacity to recede from a real subheader's
   visual weight. */

.empty-state-corporate--subheader {
    display: block;
    font-family: inherit;
    font-size: clamp( 1.125rem, 2.5vw, 1.375rem );
    font-weight: 400;
    line-height: 1.4;
    color: inherit;
    opacity: 0.8;
    user-select: none;
}

/* -- Content (body) -------------------------------------------------------- */
/* Real body styling. No marker. Slight opacity to read as placeholder
   without changing color. */

.empty-state-corporate--content {
    display: block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: inherit;
    opacity: 0.7;
    user-select: none;
}

/* -- CTA primary ----------------------------------------------------------- */
/* Gold-filled button. Brand-primary background with dark text for contrast.
   Real CTA padding and typography. No hover state since placeholders are
   not interactive. */

.empty-state-corporate--cta {
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    padding: 0.85rem 1.75rem;
    background-color: var( --brand-color-primary, #C49A3C );
    color: #1a1a1a;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    user-select: none;
}

/* -- CTA secondary --------------------------------------------------------- */
/* Transparent background, gold border, gold text. Blocks opt into this
   variant by passing 'cta-secondary' as the type to guidelines_field_state()
   for repeater items beyond the first when cta_layout is multiple. No
   block is wired up yet; this variant is ready for the per-block wiring
   pass (Scope B per launch-roadmap.md). */

.empty-state-corporate--cta-secondary {
    display: inline-block;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    padding: 0.75rem 1.65rem;
    background-color: transparent;
    color: var( --brand-color-primary, #C49A3C );
    border: 2px solid var( --brand-color-primary, #C49A3C );
    border-radius: 4px;
    text-decoration: none;
    user-select: none;
}

/* -- Image ---------------------------------------------------------------- */
/* Aspect-ratio-preserving box with a thin gold border and a small centered
   gold geometric mark. Field label text is visually hidden but remains in
   the DOM for accessibility. Default aspect ratio 16:9; blocks that need
   a different ratio can override via inline style or a wrapper class. */

.empty-state-corporate--image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var( --brand-color-primary, #C49A3C );
    background-color: transparent;
    color: transparent; /* hides the field-label text content visually */
    font-size: 0;       /* belt-and-suspenders text hide */
    overflow: hidden;
    user-select: none;
}

/* Small centered gold square as the "image goes here" mark. Minimal,
   intentional, reads as a design element rather than an icon. */
.empty-state-corporate--image::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-color: var( --brand-color-primary, #C49A3C );
    opacity: 0.45;
}