/* =====================================================================
   Showcase page (plugins.wpwebguru.com home).
   Loads AFTER style.css and reuses its tokens and components.
   ===================================================================== */

.sec { padding-top: clamp(56px, 9vw, 96px); }

/* ----- Hero ----- */
.sc-hero { padding: clamp(40px, 8vw, 88px) 0 0; }
.sc-hero h1 {
    font-size: clamp(2.6rem, 8vw, 5.6rem);
    font-weight: 800;
    font-stretch: 78%;
    letter-spacing: -.015em;
    line-height: .98;
    max-width: 14ch;
}
.sc-lede { margin-top: 22px; max-width: 58ch; font-size: 1.1875rem; color: var(--muted); }
.sc-lede strong { color: var(--ink); font-weight: 600; }
.sc-hero .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sc-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; color: var(--muted); font-size: .9688rem; }
.sc-facts li { display: inline-flex; align-items: center; gap: 8px; }
.sc-facts .icon { color: var(--ok); }

/* ----- Shelf: menu + stage ----- */
.shelf {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    margin-top: 36px;
    border: 1.5px solid var(--ink);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.menu {
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    background: #11151c;
    color: #dbe3ee;
}
.menu-label { padding: 6px 20px 10px; font-family: var(--font-code); font-size: .8rem; color: #7f8da3; }
.menu button {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 2px 12px;
    padding: 12px 20px;
    border: 0;
    border-inline-start: 3px solid transparent;
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
}
.menu button:hover { background: #1a212c; }
.menu button[aria-selected="true"] { background: #1d2635; border-inline-start-color: var(--spark); color: #fff; }
.menu .ico { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; color: #fff; }
.menu .ico .icon { width: 22px; height: 22px; }
.menu b { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; font-stretch: 90%; line-height: 1.15; }
.menu small { color: #8f9db2; font-size: .875rem; line-height: 1.2; }
.menu :focus-visible { outline-color: #fff; outline-offset: -3px; }
.tag-new { display: inline-block; margin-inline-start: 8px; padding: 2px 7px; border-radius: 4px; background: var(--spark); color: #fff; font: 600 .7rem/1.3 var(--font-body); vertical-align: 2px; }

.stage { padding: clamp(20px, 3.5vw, 36px); min-width: 0; }
.js .stage [role="tabpanel"][hidden] { display: none; }
.stage-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.stage h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; font-stretch: 82%; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: var(--font-code); font-size: .8438rem; color: var(--muted); }
.meta span { padding: 2px 8px; border: 1px solid var(--line); border-radius: 5px; }
.stage .tagline { margin-top: 10px; font-size: 1.125rem; max-width: 56ch; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; margin-top: 26px; align-items: start; }
.pts li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.pts li:first-child { border-top: 1px solid var(--line); }
.pts .icon { margin-top: 3px; color: var(--ok); }
.pts strong { color: var(--ink); font-weight: 600; }
.stage .cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.src-note { margin-top: 12px; font-size: .9rem; color: var(--muted); }

/* ----- Mini screens ----- */
.mock {
    border-radius: 10px;
    background: #11151c;
    color: #dbe3ee;
    font-family: var(--font-code);
    font-size: .8125rem;
    line-height: 1.55;
    overflow: hidden;
    border: 1px solid #2a3342;
}
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1a212c; border-bottom: 1px solid #2a3342; color: #8f9db2; }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a4558; }
.mock-bar span { margin-inline-start: 8px; }
.mock-body { padding: 12px 14px 14px; overflow-x: auto; }
.mock .dim { color: #7f8da3; }
.mock .hit { background: #ffa86b33; color: #ffc89b; border-radius: 3px; padding: 0 2px; }
.mock .ok { color: #5ed08f; }
.mock .key { color: #8bb4ff; }
.mock .str { color: #ffa86b; }
.mock .row { display: flex; gap: 12px; white-space: nowrap; }
.mock .ln { color: #5d6b82; width: 2ch; text-align: end; flex: none; }
.mock-field { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; margin-bottom: 10px; border: 1px solid #36425a; border-radius: 6px; }
.mock-grp { margin-top: 8px; color: #8bb4ff; }
.mock-tabs { display: flex; gap: 2px; margin: -12px -14px 10px; padding: 8px 10px 0; background: #1a212c; }
.mock-tabs span { padding: 6px 10px; border-radius: 6px 6px 0 0; color: #8f9db2; }
.mock-tabs span.on { background: #11151c; color: #fff; box-shadow: inset 0 2px 0 var(--spark); }
.mock-note { margin-top: 10px; padding: 7px 10px; border-radius: 6px; background: #173325; color: #5ed08f; }
.mock table { width: 100%; border-collapse: collapse; }
.mock td { padding: 5px 8px 5px 0; vertical-align: top; border-bottom: 1px solid #232c3b; white-space: nowrap; }
.mock td:first-child { color: #8bb4ff; }

.mock-recipe { background: #fffaf3; color: #2a1d12; border-color: #ecd9bf; font-family: var(--font-body); font-size: .9375rem; }
.mock-recipe .mock-bar { background: #f4e7d3; border-color: #ecd9bf; color: #7a5a38; }
.mock-recipe .mock-bar i { background: #d9c3a4; }
.mock-recipe h3 { font-size: 1.35rem; font-weight: 800; font-stretch: 85%; margin-bottom: 4px; }
.mock-recipe .stars { color: #c2410c; letter-spacing: 2px; }
.mock-recipe ul { margin-top: 8px; }
.mock-recipe li { padding: 5px 0; border-bottom: 1px dashed #ecd9bf; }
.mock-recipe li::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-inline-end: 9px; border: 1.5px solid #c2410c; border-radius: 3px; }
.mock-recipe .lay { display: flex; gap: 6px; margin-top: 12px; font-size: .8125rem; font-weight: 600; }
.mock-recipe .lay span { padding: 3px 10px; border: 1px solid #d9c3a4; border-radius: 99px; color: #7a5a38; }
.mock-recipe .lay span.on { background: #c2410c; border-color: #c2410c; color: #fff; }

/* ----- At a glance table ----- */
.glance-wrap { margin-top: 32px; overflow-x: auto; border-top: 1.5px solid var(--ink); }
.glance { width: 100%; min-width: 760px; border-collapse: collapse; text-align: start; }
.glance th, .glance td { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.glance thead th { font-family: var(--font-display); font-size: 1rem; font-stretch: 88%; color: var(--muted); font-weight: 600; }
.glance tbody th { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; font-stretch: 90%; white-space: nowrap; }
.glance td { color: var(--muted); }
.glance td.mono { font-family: var(--font-code); font-size: .9rem; color: var(--ink); white-space: nowrap; }
.glance a { font-weight: 600; white-space: nowrap; }

/* ----- Principles ----- */
.prin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin-top: 32px; border-top: 1.5px solid var(--ink); }
.prin li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.prin h3 { font-size: 1.25rem; font-weight: 700; font-stretch: 90%; margin-bottom: 6px; }
.prin p { color: var(--muted); max-width: 52ch; }

@media (max-width: 900px) {
    .shelf { grid-template-columns: 1fr; }
    .menu { flex-direction: row; overflow-x: auto; padding: 0; }
    .menu-label { display: none; }
    .menu button { flex: none; width: 230px; border-inline-start: 0; border-bottom: 3px solid transparent; }
    .menu button[aria-selected="true"] { border-bottom-color: var(--spark); }
    .stage-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .prin { grid-template-columns: 1fr; }
}