/* ==========================================================================
   demo-pages.css — PRODUCT page-level components for the FW Gallery demo.
   Sits ABOVE the portable demo-frame chrome (foundation -> tokens -> frame ->
   THIS). Chrome (demo-frame.css) stays product-agnostic; page furniture lives
   here. No raw hex — only var(--demo-*) tokens + neutral white/black alphas.
   ========================================================================== */

/* — page header — */
.demo-page { max-width: 1180px; }
/* .demo-section-head retired with the sidebar demo-frame (stand-restructure-spec.md §8). */
.demo-page-caption {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--demo-ink-muted);
  margin: 0 0 1.5rem;
}
.demo-page-shows {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  color: var(--demo-ink-muted);
  margin: 1.1rem 0 0;
}
.demo-page-shows-key {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--demo-on-accent);
  background: var(--demo-gradient);
  padding: .18rem .5rem;
  border-radius: 999px;
}

/* — proof strip: honest, price-free reassurance under the headline — */
.demo-proof {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .65rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.demo-proof li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .34rem .7rem .34rem .6rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--demo-ink);
  background: var(--demo-surface);
  border: 1px solid var(--demo-border);
  border-radius: 999px;
  box-shadow: var(--demo-shadow-sm);
}
.demo-proof li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--demo-gradient);
  flex-shrink: 0;
}

/* — the stage: where the REAL captured component markup renders — */
.demo-stage {
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius);
  background: var(--demo-surface);
  box-shadow: var(--demo-shadow);
  padding: clamp(.75rem, 2vw, 1.5rem);
  overflow: hidden;
}
.demo-stage > #fwgallery { margin: 0; }              /* the captured component root */

/* honest "not-yet-seeded" placeholder (extends the frame's .demo-slot look) */
.demo-slot-pending {
  border: 1px dashed var(--demo-border-strong);
  border-radius: var(--demo-radius-sm);
  background: rgba(255, 255, 255, 0.02);
  padding: 1.5rem;
  text-align: center;
}
.demo-slot-pending .demo-slot-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--demo-ink);
  font-weight: 600;
  margin-bottom: .5rem;
}
.demo-slot-pending .demo-slot-label [fwk-icon] { color: var(--demo-accent); }
.demo-slot-pending .demo-slot-shot-cap {
  color: var(--demo-ink-muted);
  font-size: .88rem;
  max-width: 64ch;
  margin: 0 auto;
}
.demo-slot-pending code {
  font-size: .82em;
  padding: .05em .35em;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
}

/* — Source / backlog mapping (the page <-> component-view link).
     No card of its own — it lives flat inside the .demo-devview banner. — */
.demo-source { margin-top: 1.25rem; }
.demo-source-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 0 0 .5rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--demo-ink);
}
.demo-source-status {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .14rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--demo-border-strong);
  color: var(--demo-ink-muted);
}
.demo-source-status-rendered    { color: var(--demo-info);  border-color: var(--demo-info); }
.demo-source-status-pending     { color: var(--demo-warm);  border-color: var(--demo-warm); }
.demo-source-status-head-only   { color: var(--demo-accent-2); }
.demo-source-status-source-tbd  { color: var(--demo-accent); border-color: var(--demo-accent); }
.demo-source-status-not-seeded,
.demo-source-status-seeded-thin { color: var(--demo-ink-muted); }

.demo-source-body {
  padding: .6rem 0 0;
  border-top: 1px solid var(--demo-border);
}
.demo-source-lead { color: var(--demo-ink-muted); font-size: .85rem; margin: .7rem 0 .6rem; }
.demo-source-files { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .3rem; }
.demo-source-files code,
.demo-source-meta code {
  font-size: .8rem;
  padding: .22em .5em;
  border-radius: 5px;
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  color: var(--demo-ink);
  word-break: break-all;
}
.demo-source-meta { font-size: .82rem; color: var(--demo-ink-muted); margin: .3rem 0; }
.demo-source-note { font-size: .82rem; color: var(--demo-ink-muted); margin: .4rem 0 0; font-style: italic; }

/* — per-page CTA (price-free, single neutral route) — */
.demo-page-cta { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem 1rem; margin-top: 1.6rem; }
.demo-page-cta-note { font-size: .85rem; color: var(--demo-ink-muted); }

/* — developer-view region (hidden by default via the frame; dev-facing only).
     Shown at the TOP when toggled on — a self-contained banner above the page. — */
.demo-devview {
  margin: 0 0 1.75rem;
  padding: .85rem 1.1rem 1.1rem;
  border: 1px dashed var(--demo-border-strong);
  border-radius: var(--demo-radius);
  background: var(--demo-surface-2);
}
.demo-devview-label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--demo-ink-muted); margin: 0 0 .15rem;
}
.demo-devview-label [fwk-icon] { color: var(--demo-info); }

/* ==========================================================================
   Home / design-system strip headings + the card icon.
   The hero, benefit cards and design/media tiles were rebuilt from the UIKit
   (fwk-card in fwk-grid, themed via .ds-skin) — their old bespoke classes
   (.demo-home-hero/.demo-home-grid/.demo-tilecard) are retired. The accent
   card icon stays as a small utility (also themed in demo-skin.css).
   ========================================================================== */
.demo-tilecard-ic { color: var(--demo-accent); display: inline-flex; }

.demo-strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 2rem 0 .75rem;
}
.demo-strip-head h2 { font-size: 1.15rem; margin: 0; color: var(--demo-ink); }
.demo-strip-head p { margin: 0; font-size: .85rem; color: var(--demo-ink-muted); }


/* ==========================================================================
   Composed demo pages (app/Data/pages/<slug>.php → front/fwre_demo_page.php on CI4, the same
   markup emitted into the Joomla article / WP post by the demo-site importers): a main column
   with prose + live modules, an optional sidebar, and an optional full-width band above them.
   ========================================================================== */

.fwre-page-lead {
    max-width: 62ch;
    margin: .35rem 0 1.75rem;
    font-size: 1.1rem;
    line-height: 1.55;
    color: #56616e;
}

/* full-width band above the columns (a hero search bar only reads right full-bleed) */
.fwre-page-hero {
    margin-bottom: 2.5rem;
}

.fwre-page-cols {
    display: block;
}

@media (min-width: 960px) {
    .fwre-page-cols--sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 2.5rem;
        align-items: start;
    }
}

.fwre-page-main > * + * {
    margin-top: 1.5rem;
}

.fwre-page-prose {
    max-width: 68ch;
}

.fwre-page-prose p {
    margin: 0;
    line-height: 1.65;
}

.fwre-page-h {
    margin: 0 0 .5rem;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.3;
}

/* a module block breathes a little more than a paragraph does */
.fwre-page-main > .fwre-page-module {
    margin-top: 1.75rem;
    margin-bottom: 2.25rem;
}

/* a block that demonstrates the sidebar shape on a page that has no sidebar */
.fwre-page-module--narrow {
    max-width: 360px;
}

/* Grid children default to min-width:auto, which lets a wide card push past its column. */
.fwre-page-main,
.fwre-page-side {
    min-width: 0;
}

/* The main column is a CONTAINER, not the viewport: a page with a sidebar leaves it ~640px, where a
   fwk-child-width-1-3@l grid still tries three cards across and every card turns into a column of
   wrapped fragments. Container queries let the cards react to the space they actually have. */
.fwre-page-main {
    container-type: inline-size;
}

@container (max-width: 800px) {
    .fwre-page-main .fwre-grid-view > * {
        width: 50%;
    }
}

@container (max-width: 520px) {
    .fwre-page-main .fwre-grid-view > * {
        width: 100%;
    }
}

/* Card grids size themselves off the VIEWPORT (fwk-child-width-1-3@l), so in a deliberately narrow
   block on a wide screen they still try three across. Inside a narrow block or the sidebar, one card
   per row — scoped to the card grid so the modules' own field grids are left alone. */
.fwre-page-module--narrow .fwre-grid-view > *,
.fwre-page-side .fwre-grid-view > * {
    width: 100%;
}

/* The agent module is capped to one live-module card width (300px) by the design skin. In a page
   block that cap squeezes a 2- or 4-across row into a single card's width, so let the block decide:
   full width in the main column, card width where the block is deliberately narrow. */
.fwre-page-module #fwre.fwre-mod-agent-card {
    max-width: none;
}

.fwre-page-module--narrow #fwre.fwre-mod-agent-card,
.fwre-page-side .fwre-page-module #fwre.fwre-mod-agent-card {
    max-width: 320px;
}

.fwre-page-module-title {
    margin: 0 0 .6rem;
    font-size: 1.05rem;
    font-weight: 600;
}

/* sidebar: sticky on wide screens, plain stacked blocks below the fold on narrow ones */
@media (min-width: 960px) {
    .fwre-page-side {
        position: sticky;
        top: 1.5rem;
    }
}

.fwre-page-side > * + * {
    margin-top: 2rem;
}

@media (max-width: 959px) {
    .fwre-page-side {
        margin-top: 2.5rem;
    }
}

/* Bands — a full-width row of its own, optionally with a narrow column beside the wide part
   (the live design-showcase rhythm: full, full, 2/3 + 1/3, 2/3 + 1/3, full). A band is a BLOCK,
   so the page stays one ordered list and still reads top to bottom. */
.fwre-band {
    margin: 2.5rem 0;
}

.fwre-band-main > * + *,
.fwre-band-aside > * + * {
    margin-top: 1.5rem;
}

@media (min-width: 960px) {
    .fwre-band--split {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }
}

.fwre-band-main,
.fwre-band-aside {
    min-width: 0;
}

@media (max-width: 959px) {
    .fwre-band--split .fwre-band-aside {
        margin-top: 2rem;
    }
}

/* the narrow half of a band is sidebar-width: one card per row, like the real sidebar */
.fwre-band-aside .fwre-grid-view > * {
    width: 100%;
}

/* ==========================================================================
   Imported info-page port (Joomla tpl_fw_demo / WP fw-demo)
   --------------------------------------------------------------------------
   On CI4 an info page (app/Views/front/fwre_info.php) owns the whole page
   frame: a FULL-BLEED hero, then the shell-constrained body, then the
   full-bleed closing CTA band. On a demo site the same markup is the BODY of
   a native article/post, which the template drops inside its own
   `.fwre-site-shell .fwre-site-page` container — so the two loud zones would
   render boxed at content width.

   The imported body wraps itself in `.fwre-info-port`
   (demo-sites/scripts/lib/article-body.php) and re-creates the CI4 frame
   inside, including its own shell. These rules just take the width and
   padding OFF the container that holds it, so the hero and the CTA band go
   edge to edge exactly as they do on CI4. Everything else (the info-page
   components themselves) is demo-property.css, shipped beside this file.
   ========================================================================== */
.fwre-site-page:has(.fwre-info-port) {
    max-width: none;
    padding: 0;
}

/* the platform's own article wrappers (Joomla com_content, the WP page template) */
.fwre-site-page:has(.fwre-info-port) .com-content-article,
.fwre-site-page:has(.fwre-info-port) .com-content-article__body,
.fwre-site-page:has(.fwre-info-port) > .demo-page,
.fwre-site-page:has(.fwre-info-port) > article {
    margin: 0;
    padding: 0;
    max-width: none;
}