/*
 * Showcase Styles
 * Polite Platform :: Gallery
 * Path: /shared/gallery-presentation/static/showcase.css
 * Description: Guest collection grid, hero and usage guidance presentation.
 * Context: UI
 * Author: Polite Platform Team
 * Date: 2026-09-24T18:55:21Z
 * Generated by: GPT-6 Codex
 */
.gallery-showcase-view { padding:0; background:var(--gallery-background,#fff); color:var(--gallery-text,#1d2939); font-family:system-ui,sans-serif; }
.gallery-showcase-view [hidden] { display:none!important; }
.showcase-hero { position:relative; display:grid; width:100%; box-sizing:border-box; place-items:center; isolation:isolate; padding:56px 24px; background:var(--gallery-surface,#eaeaea); }
.showcase-hero.has-image { min-height:320px; aspect-ratio:16/7; color:#fff; }
.showcase-hero.has-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.58)); z-index:-1; }
.showcase-hero img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; z-index:-2; }
.showcase-title { margin:0; max-width:20ch; text-align:center; font-size:clamp(2rem,4.6vw,4.5rem); line-height:1.08; font-weight:600; text-wrap:balance; overflow-wrap:anywhere; }
.showcase-hero.has-image .showcase-title { text-shadow:0 2px 16px rgb(0 0 0 / 45%); }
.showcase-collection { padding:16px; }
.showcase-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; }
.showcase-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.showcase-tile { display:block; padding:0; position:relative; overflow:hidden; border:0; border-radius:0; aspect-ratio:3/4; background:var(--gallery-surface,#eaeaea); color:var(--gallery-text,#1d2939); }
.showcase-tile:disabled { opacity:1; cursor:default; }
.showcase-tile img { width:100%; height:100%; object-fit:cover; }
.showcase-sample { display:grid; place-items:center; height:100%; background:linear-gradient(145deg,var(--gallery-surface,#eee),var(--gallery-accent,#9aacac)); }
.showcase-media-kind { position:absolute; bottom:8px; left:8px; padding:4px 8px; background:#111; color:#fff; }
.showcase-preview-note { font-size:.8rem; text-align:center; }
.showcase-downloads { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-left:auto; }
.gallery-showcase-view .showcase-downloads .gallery-guest-button { width:auto; white-space:nowrap; }
.showcase-usage-dialog { box-sizing:border-box; width:min(560px,calc(100% - 32px)); max-height:calc(100dvh - 48px); border:1px solid var(--gallery-border,#ccc); padding:24px; color:var(--gallery-text,#1d2939); background:var(--gallery-background,#fff); text-align:left; }
.showcase-usage-dialog::backdrop { background:rgb(0 0 0 / 60%); }
.showcase-usage-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.showcase-usage-heading h2 { margin:0; font-size:1.35rem; }
.showcase-usage-close { display:grid; place-items:center; width:44px; height:44px; border:0; background:transparent; color:inherit; font:inherit; font-size:1.8rem; cursor:pointer; }
.showcase-usage-dialog p { white-space:pre-wrap; margin:20px 0; }
.showcase-usage-dialog a { color:inherit; text-decoration:underline; }

@media(max-width:480px) { .showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .showcase-hero.has-image { min-height:280px; } .showcase-downloads { margin-left:0; } }