/* ========================================================================
   figure.css -- ScribeHold figure slot

   Component layer of the modular CSS bundle. Consumes tokens from
   tokens.css. Provides the designed image/illustration slot used across
   marketing pages:

     .figure               -- block wrapper (margin, max-width)
     .figure__frame        -- the bordered, elevated surface holding media
     .figure__media        -- the <img> / <svg> / embedded facsimile
     .figure__caption      -- <figcaption> below the frame
     .figure__badge        -- provenance chip inside the frame corner
     .figure--wide         -- breaks out to the wider measure
     .figure--phone        -- portrait phone bezel asset, capped at 260px
     .figure--plain        -- no frame chrome (bare media + caption)
     .figure--placeholder  -- dashed slot for not-yet-captured assets

   Expected HTML structure (see Pages/Shared/_Figure.cshtml):

       <figure class="figure">
           <div class="figure__frame">
               <img class="figure__media" src="..." alt="..."
                    width="1200" height="800" loading="lazy" decoding="async" />
               <span class="figure__badge">Illustrative</span>
           </div>
           <figcaption class="figure__caption">Caption text.</figcaption>
       </figure>

   The frame carries an explicit background so a transparent PNG never
   sits directly on the page cream, and `overflow: hidden` so the media's
   corners follow the frame radius.

   Breakpoints (inlined per project convention -- CSS custom properties
   cannot appear inside @media queries):
       md: 768px

   Bundle order: tokens -> base -> layout -> components/* -> pages/*
   ======================================================================== */

/* ------------------------------------------------------------------------
   1. .figure -- block wrapper
   ------------------------------------------------------------------------ */

.figure {
    margin: var(--space-8) 0;
    max-width: var(--measure);
}

@media (min-width: 768px) {
    .figure {
        margin-block: var(--space-10);
    }
}

.figure--wide {
    max-width: none;
}

/* A portrait phone bezel asset. The PNG is 770x1630, so anything wider
   than this renders taller than a viewport; 260px puts it at ~550px,
   the same order as the card column it sits beside. */
.figure--phone {
    max-width: 260px;
    margin-inline: auto;
}

.figure--centered {
    margin-inline: auto;
}

/* ------------------------------------------------------------------------
   2. .figure__frame -- bordered, elevated media surface
   ------------------------------------------------------------------------ */

.figure__frame {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.figure--plain .figure__frame {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.figure--elevated .figure__frame {
    box-shadow: var(--shadow-xl);
}

/* ------------------------------------------------------------------------
   3. .figure__media -- the image itself

   base.css already sets display:block / max-width:100% / height:auto on
   img. The width/height attributes on the element reserve the aspect box
   before the bytes arrive, so `height: auto` here is what keeps that
   reservation proportional instead of letterboxed.
   ------------------------------------------------------------------------ */

.figure__media {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------------
   4. .figure__badge -- provenance chip

   Sits inside the frame so the qualifier travels with the image when the
   figure is screenshotted or shared, not just with the caption.
   ------------------------------------------------------------------------ */

.figure__badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: var(--z-base);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-bg-parchment);
    border: 1px solid var(--color-border-strong);
    color: var(--color-ink);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    line-height: var(--line-height-snug);
}

/* ------------------------------------------------------------------------
   5. .figure__caption -- figcaption below the frame
   ------------------------------------------------------------------------ */

.figure__caption {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-muted);
    text-align: left;
}

.figure__caption strong {
    color: var(--color-ink);
    font-weight: var(--font-weight-semibold);
}

.figure--centered .figure__caption {
    text-align: center;
}

/* ------------------------------------------------------------------------
   6. .figure--placeholder -- designed empty slot

   Used where the page rebuild has a slot but no captured asset yet. The
   dashed rule and manila wash read as deliberately reserved space rather
   than a broken image.
   ------------------------------------------------------------------------ */

.figure--placeholder .figure__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--space-40);
    padding: var(--space-8);
    background: var(--color-bg-manila);
    border-style: dashed;
    border-color: var(--color-border-strong);
    box-shadow: none;
    text-align: center;
}

.figure__placeholder-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    color: var(--color-muted);
}