/**
 * FlowMediaKit - public surfaces.
 *
 * Built to the frames' slot tables (P0.4 report 7.1-7.3). The engine shipped
 * first and this is the drawn layer over it; every class here has a slot in
 * those tables rather than being invented at the keyboard.
 *
 * ⚠ Deliberately template-agnostic. Flow's sites run Cassiopeia derivatives and
 * this must not fight them: no resets, no element selectors, everything under
 * an fmk- prefix, and spacing in rem so a template's own scale carries through.
 */

:root {
    --fmk-gap: 1rem;
    --fmk-radius: 6px;
    --fmk-border: #dfe3e8;
    --fmk-muted: #5b6570;
    --fmk-ink: #1c2126;
    --fmk-bg-soft: #f6f7f9;
    --fmk-accent: #1a4f8a;
    --fmk-ok: #1e7a4a;
}

/* ---------------------------------------------------------------- gallery */

.fmk-gallery-head { margin-bottom: 1.5rem; }
.fmk-gallery-head__intro { color: var(--fmk-muted); max-width: 60ch; }

/* The views row: chips for the operator's published saved views, then the two
   facets that are true for every file today. Views are not a taxonomy - the
   operator decides what appears and in what order. */
.fmk-views {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    padding: .75rem 0;
    border-top: 1px solid var(--fmk-border);
    border-bottom: 1px solid var(--fmk-border);
    margin-bottom: 1.25rem;
}

.fmk-views__chip {
    display: inline-block;
    padding: .3rem .75rem;
    border: 1px solid var(--fmk-border);
    border-radius: 999px;
    font-size: .875rem;
    text-decoration: none;
    color: var(--fmk-ink);
    background: #fff;
    white-space: nowrap;
}

.fmk-views__chip:hover { border-color: var(--fmk-accent); color: var(--fmk-accent); }
.fmk-views__chip.is-current { background: var(--fmk-accent); border-color: var(--fmk-accent); color: #fff; }
.fmk-views__facets { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.fmk-views__facets select { font-size: .875rem; padding: .25rem .5rem; }

.fmk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

/*
 * Layout presets for entity pages (lock 4).
 *
 * ⚠ THESE EXIST BECAUSE THE PARAM DID NOT.
 *
 * `layout_preset` has been stored on saved views since the schema was written
 * and NOTHING has ever read it - no template, no view, no CSS. Shipping the
 * same param on entity menu items without these rules would have shipped a
 * control that looks like it works and does nothing, which is exactly the
 * defect 0.14.29 fixed on the picker beside it.
 *
 * ⚠ Declared BEFORE the responsive blocks, deliberately. Those set
 * `.fmk-grid` at equal specificity and later in the file, so a narrow viewport
 * still collapses every preset to its own column count rather than a preset
 * overriding the phone layout. `grid` needs no rule of its own - it IS the base.
 */
.fmk-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

/* The first tile leads, at twice the size. A "featured strip" with nothing
   featured would be indistinguishable from the plain grid. */
.fmk-grid--featured > .fmk-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

/* Columns rather than grid: masonry means tiles of unequal height packing
   vertically, which CSS grid cannot do without fixed row tracks. */
.fmk-grid--masonry {
    display: block;
    columns: 3;
    column-gap: 1.25rem;
}

.fmk-grid--masonry > .fmk-card {
    break-inside: avoid;
    margin-bottom: 1.25rem;
}

.fmk-card {
    border: 1px solid var(--fmk-border);
    border-radius: var(--fmk-radius);
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* ⚠ 4:3 box with the image CONTAINED, not cropped. The frames are explicit:
   portraits must read. object-fit: cover would centre-crop a headshot, which on
   a media kit is somebody's face cut off. */
.fmk-card__media {
    aspect-ratio: 4 / 3;
    background: var(--fmk-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--fmk-border);
}

.fmk-card__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fmk-card__placeholder { color: var(--fmk-muted); font-size: .8125rem; padding: 1rem; text-align: center; }
.fmk-card__body { padding: .875rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.fmk-card__title { font-weight: 600; line-height: 1.3; }
.fmk-card__title a { text-decoration: none; color: var(--fmk-ink); }
.fmk-card__title a:hover { color: var(--fmk-accent); text-decoration: underline; }
.fmk-card__facts { font-size: .8125rem; color: var(--fmk-muted); }

.fmk-card__credit { font-size: .8125rem; display: flex; gap: .5rem; align-items: baseline; }
.fmk-card__credit-text { color: var(--fmk-ink); }

/* A missing credit is stated quietly on a PUBLIC surface. The admin shows it in
   alert red because it is a rights problem an operator must fix; a visitor is
   not the person who can fix it, and shouting at them about it would publish an
   internal to-do. */
.fmk-card__credit--none { color: var(--fmk-muted); font-style: italic; }
.fmk-card__actions { margin-top: auto; display: flex; gap: .5rem; padding-top: .25rem; }

.fmk-btn {
    display: inline-block;
    padding: .4rem .75rem;
    border-radius: var(--fmk-radius);
    border: 1px solid var(--fmk-border);
    background: #fff;
    color: var(--fmk-ink);
    font-size: .875rem;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
}

.fmk-btn:hover { border-color: var(--fmk-accent); color: var(--fmk-accent); }
.fmk-btn--primary { background: var(--fmk-accent); border-color: var(--fmk-accent); color: #fff; }
.fmk-btn--primary:hover { color: #fff; opacity: .92; }
.fmk-btn--quiet { border-color: transparent; padding-left: .35rem; padding-right: .35rem; }
.fmk-btn[disabled] { opacity: .55; cursor: default; }

.fmk-foot {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--fmk-border);
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.fmk-foot__text { color: var(--fmk-muted); }

/* ------------------------------------------------------------ asset page */

.fmk-asset { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 2rem; }
.fmk-asset__media { background: var(--fmk-bg-soft); border: 1px solid var(--fmk-border); border-radius: var(--fmk-radius); display: flex; align-items: center; justify-content: center; min-height: 18rem; }
.fmk-asset__media img { max-width: 100%; max-height: 32rem; object-fit: contain; }
.fmk-asset__title { margin-top: 0; }
.fmk-asset__desc { color: var(--fmk-muted); }

.fmk-permalink { margin-top: 1rem; }
.fmk-permalink__label { font-size: .8125rem; font-weight: 600; display: block; margin-bottom: .25rem; }
.fmk-permalink__row { display: flex; gap: .5rem; }
.fmk-permalink__input { flex: 1 1 auto; font-size: .8125rem; padding: .4rem .5rem; border: 1px solid var(--fmk-border); border-radius: var(--fmk-radius); background: #fff; color: var(--fmk-ink); }
.fmk-permalink__note { font-size: .8125rem; color: var(--fmk-muted); margin: .4rem 0 0; }

/* The facts card in the D-P8 grammar: one row per fact, a check per row. */
.fmk-facts { border: 1px solid var(--fmk-border); border-radius: var(--fmk-radius); margin: 1.25rem 0; }
.fmk-facts__row { display: flex; gap: .625rem; padding: .625rem .875rem; border-bottom: 1px solid var(--fmk-border); align-items: baseline; }
.fmk-facts__row:last-child { border-bottom: 0; }
.fmk-facts__check { color: var(--fmk-ok); flex: 0 0 auto; font-weight: 700; }
.fmk-facts__label { flex: 0 0 7.5rem; color: var(--fmk-muted); font-size: .8125rem; }
.fmk-facts__value { flex: 1 1 auto; }
.fmk-facts__value a { color: var(--fmk-accent); }

.fmk-ladder { margin-top: 1.25rem; }
.fmk-ladder__primary { margin-bottom: .625rem; }
.fmk-ladder__sizes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ⚠ The original's ROW IS ALWAYS PRESENT. Public visitors see "Request", a user
   holding the download-originals right sees "Download". The state changes the
   LABEL, never the presence - hiding it would make the rule invisible to the
   people it applies to. */
.fmk-ladder__original { margin-top: .625rem; padding-top: .625rem; border-top: 1px dashed var(--fmk-border); }
.fmk-ladder__note { font-size: .8125rem; color: var(--fmk-muted); margin: .4rem 0 0; }

.fmk-related { margin-top: 2.5rem; }
.fmk-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }

/* ---------------------------------------------------------------- module */

/* ⚠ THE BLOCK IS A GUEST IN SOMEBODY ELSE'S PAGE.
   It sits in a template position beside content nobody here wrote, so it gets a
   container of its own and a single-column list rather than the gallery's grid:
   a three-column grid inside a 260px sidebar is the block's most likely home
   rendered as three slivers. It also means the block never sets a page-level
   style - everything below is scoped under .fmk-block. */
.fmk-block { margin: 0 0 1.25rem; }
.fmk-block__item { display: flex; gap: .625rem; align-items: flex-start; }
.fmk-block__item .fmk-card__media { flex: 0 0 84px; margin: 0; }
.fmk-block__item .fmk-card__body { padding: 0; }
.fmk-block__item .fmk-card__facts { margin: .15rem 0 .35rem; }
.fmk-block__link { font-weight: 600; }

/* Same wording rule as the gallery's: vague about WHY, because a visitor must
   not learn from the copy whether a restricted view exists. */
.fmk-block__unavailable { color: var(--fmk-muted); font-size: .875rem; margin: 0; }

.fmk-block__head { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.fmk-block__view-name { margin: 0; font-size: 1rem; }
.fmk-block__count { color: var(--fmk-muted); font-weight: 400; }
.fmk-block__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }

/* The first-day screen. Five of seven bases have no photos at launch, so this
   is the state most operators meet first - a dashed panel that says what is
   true and offers the request path, never a blank heading over nothing. */
.fmk-block__empty {
    border: 1px dashed var(--fmk-border);
    border-radius: var(--fmk-radius);
    padding: 1rem;
    background: var(--fmk-bg-soft);
}

.fmk-block__empty-title { font-weight: 600; margin: 0 0 .35rem; }
.fmk-block__empty-hint { color: var(--fmk-muted); margin: 0 0 .75rem; font-size: .875rem; }
.fmk-block__foot { margin-top: .875rem; }

/* ----------------------------------------------------------------- embed */

/* ⚠ THE EMBED IS INSIDE AN ARTICLE'S TYPOGRAPHY, not beside it.
   It inherits the article's font, measure and link colour by design - a media
   block that restyles the paragraph around it is the thing authors complain
   about. So this section sets structure and spacing and almost no colour. */
.fmk-embed { margin: 1.5rem 0; }
.fmk-embed__view-name { margin: 0 0 .5rem; font-size: 1.0625rem; }
.fmk-embed__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
}
.fmk-embed__item { margin: 0; }
.fmk-embed__link { font-weight: 600; }

/* Same first-day screen as the block's, drawn the same way, because an author
   who sees one and then the other should not have to work out that they mean
   the same thing. */
.fmk-embed__empty {
    border: 1px dashed var(--fmk-border);
    border-radius: var(--fmk-radius);
    padding: .875rem;
    background: var(--fmk-bg-soft);
}
.fmk-embed__empty p { margin: 0 0 .25rem; font-size: .875rem; }
.fmk-embed__empty p:last-child { margin: 0; color: var(--fmk-muted); }

.fmk-copy-flash { color: var(--fmk-ok); font-size: .8125rem; margin-left: .35rem; }

/* ----------------------------------------------------------------- phone */

@media (max-width: 900px) {
    .fmk-asset { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .fmk-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    /* Two columns at 390 so portraits stay readable, per 7.4. */
    .fmk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }

    /* The views row scrolls sideways rather than wrapping into a wall. */
    .fmk-views { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .fmk-views__facets { margin-left: .5rem; }

    .fmk-asset__media { border-left: 0; border-right: 0; border-radius: 0; }
    .fmk-facts__label { flex-basis: 6rem; }
}

/* Masonry sets `display: block`, so the responsive `grid-template-columns`
   rules above cannot reach it. It needs its own narrow-viewport rule or it
   would keep three columns on a phone. */
@media (max-width: 782px) {
    .fmk-grid--masonry { columns: 2; }
}

@media (max-width: 480px) {
    .fmk-grid--masonry { columns: 1; }
}

/* The editor-only note under an empty entity page. Deliberately quiet - it is
   an instruction to one person, not a banner for the page. */
.fmk-entity__editor-note {
    margin-top: .5rem;
    padding: .5rem .75rem;
    border-left: 3px solid #d97706;
    background: rgba(217, 119, 6, .07);
    font-size: .9375rem;
}