/* Showcase pages (DESIGN-showcase.md §5) — public show page + archive index +
   the landing card (step 3). Uses the theme variable contract (--paper, --ink,
   --accent, …) so every skin styles these for free. */

/* ---- draft banner --------------------------------------------------------- */
.showcase-draft-banner {
    background: var(--accent, #b4533e);
    color: var(--paper, #f7f2e6);
    padding: .6rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.25rem;
    font-weight: 600;
}
.showcase-draft-banner a { color: inherit; text-decoration: underline; }

/* ---- show page header: cover left, intro right ----------------------------
   The intro sits on a PAPER card: themes paint the page background as a desk
   (wood, kraft, night purple…), so text placed straight on it is unreadable.
   Same trick every other text surface here uses — ink on paper, always. */
.showcase-header {
    display: grid;
    grid-template-columns: 1fr;          /* no cover picked yet: full width */
    gap: 2rem;
    align-items: start;
    margin-bottom: 2rem;
}
.showcase-header.has-cover {
    grid-template-columns: minmax(260px, 42%) 1fr;   /* cover left, essay right */
}
.showcase-cover img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 14px var(--shadow, rgba(0,0,0,.3));
}
.showcase-intro {
    background: var(--paper, #f7f2e6);
    color: var(--ink, #3c3429);
    padding: 1.5rem 1.75rem;
    border-radius: 6px;
    box-shadow: 0 3px 10px var(--shadow, rgba(0,0,0,.25));
}
.showcase-intro h1,
.showcase-intro h2 { color: var(--ink, #3c3429); }
.showcase-kicker {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
    color: var(--ink-soft, #7a6e5c);
    margin: 0 0 .25rem;
}
.showcase-intro h1 { margin: 0 0 .25rem; }
.showcase-subtitle {
    font-weight: 400;
    font-style: italic;
    color: var(--ink-soft, #7a6e5c);
    margin: 0 0 .5rem;
    font-size: 1.1rem;
}
.showcase-body { margin-top: 1rem; line-height: 1.65; }
.showcase-shop {
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px dashed var(--card-line, #ddd2b8);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;   /* bottom corner, as requested */
}

/* ---- strip ---------------------------------------------------------------- */
.showcase-piece { display: flex; flex-direction: column; }
.showcase-caption {
    font-size: .9rem;
    font-style: italic;
    background: var(--paper, #f7f2e6);
    color: var(--ink-soft, #7a6e5c);
    padding: .45rem .7rem;
    margin-top: .4rem;
    border-radius: 4px;
    box-shadow: 0 2px 6px var(--shadow, rgba(0,0,0,.2));
    line-height: 1.45;
    align-self: stretch;
}

/* Small paper chips — anything textual on the desk needs paper under it. */
.showcase-hidden-note,
.showcase-empty,
.showcase-invitation,
.showcase-archive-link {
    display: inline-block;
    background: var(--paper, #f7f2e6);
    color: var(--ink, #3c3429);
    padding: .5rem .9rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px var(--shadow, rgba(0,0,0,.2));
}
.showcase-hidden-note,
.showcase-empty { font-style: italic; margin: 0 0 1.25rem; }

/* ---- anonymous invitation (§3.2: once, at the end, after the gift) -------- */
.showcase-invitation {
    display: block;
    text-align: center;
    margin: 2.5rem 0 1rem;
    font-size: 1.05rem;
}
.showcase-archive-link { margin-top: 1.5rem; }

/* ---- archive index -------------------------------------------------------- */
.showcase-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.showcase-index-card {
    display: block;
    background: var(--paper, #f7f2e6);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,.25));
    text-decoration: none;
    color: var(--ink, #3c3429);
    transition: transform .12s ease, box-shadow .12s ease;
}
.showcase-index-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--shadow, rgba(0,0,0,.3));
}
.showcase-index-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.showcase-index-text { padding: .75rem 1rem 1rem; }
.showcase-index-text h3 { margin: .25rem 0 .15rem; }
.showcase-live-chip {
    display: inline-block;
    background: var(--accent, #b4533e);
    color: var(--paper, #f7f2e6);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .15rem .5rem;
    border-radius: 999px;
}

/* ---- landing card ----------------------------------------------------------
   Sits between Newest Arrivals and the favorites row on both landings. */
.landing-showcase { margin: 2rem 0; }
.showcase-landing-read {
    font-weight: 600;
    color: var(--accent, #b4533e);
    margin-top: .5rem;
}
.showcase-landing-card {
    display: grid;
    grid-template-columns: minmax(200px, 34%) 1fr;
    gap: 1.25rem;
    align-items: center;
    background: var(--paper, #f7f2e6);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 3px 10px var(--shadow, rgba(0,0,0,.25));
    margin-bottom: 2rem;
    text-decoration: none;
    color: var(--ink, #3c3429);
}
.showcase-landing-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase-landing-text { padding: 1rem 1.25rem 1rem 0; }
.showcase-landing-text h2 { margin: .2rem 0; }
.showcase-landing-more {
    font-size: .85rem;
    background: var(--paper, #f7f2e6);
    padding: .25rem .7rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px var(--shadow, rgba(0,0,0,.2));
    display: table;
    margin: .5rem 0 0 auto;   /* hug the card's bottom-right */
}

/* ---- small screens --------------------------------------------------------- */
@media (max-width: 700px) {
    .showcase-header, .showcase-landing-card { grid-template-columns: 1fr; }
    .showcase-landing-text { padding: 0 1rem 1rem; }
}