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