/* ==========================================================================
   VASTORE — SHOWCASE, ERP DEMO, CLIENT PORTAL & STUDIO TOOLS
   Shared by the public site, /work, /erp-demo, /portal and the studio tools.
   Requires /theme.css to be loaded first — it owns every token used here.
   ========================================================================== */

.growth-section,.demo-wrap,.tools-wrap{
 font-family:var(--body);color:var(--ink);
 font-size:var(--fs-body);line-height:1.65;
}

/* ==========================================================================
   SHOWCASE SECTIONS
   ========================================================================== */

.growth-section{
 position:relative;
 padding:var(--section-y) var(--gutter);
 background:var(--paper);
}
.growth-wrap{max-width:var(--shell);margin-inline:auto}

.growth-kicker{
 display:flex;align-items:center;gap:var(--s-3);
 font-size:var(--fs-label);font-weight:700;letter-spacing:var(--track-label);
 text-transform:uppercase;color:var(--brand-deep);
}
.growth-kicker::before{content:'';width:var(--s-5);height:2px;border-radius:2px;background:var(--grad-ember)}

.growth-heading,.demo-heading{
 display:grid;grid-template-columns:1.3fr 1fr;align-items:end;
 gap:var(--s-6) var(--s-8);margin-bottom:var(--s-7);
}
.growth-heading>p{max-width:44ch;color:var(--ink-muted)}
.growth-section h2,.demo-wrap h1{
 margin:var(--s-3) 0 0;
 font-family:var(--display);font-size:var(--fs-h2);line-height:1.1;
 font-weight:650;letter-spacing:-.045em;
}
.growth-section em,.demo-wrap em{font-style:normal;color:var(--brand-deep)}

/* Dark showcase variant */
.film-section{background:var(--ink-900);color:var(--on-dark)}
.film-section .growth-kicker{color:var(--ember-400)}
.film-section .growth-heading>p{color:var(--on-dark-muted)}

/* Soft notice used when live showcase records cannot be loaded */
.growth-section [role=status]{
 display:block;margin-bottom:var(--s-5);padding:var(--s-4) var(--s-5);
 border-radius:var(--r-sm);border:1px solid var(--line);
 background:var(--surface);color:var(--ink-muted);font-size:var(--fs-small);
}
.film-section [role=status]{background:var(--glass);border-color:var(--on-dark-line);color:var(--on-dark-muted)}

/* ==========================================================================
   CARD GRIDS
   ========================================================================== */

.story-grid,.record-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}

.story-card,.film-card{
 position:relative;isolation:isolate;overflow:hidden;
 text-align:left;cursor:pointer;
 background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
 transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),
            border-color var(--t-base) var(--ease);
}
.story-card:hover,.film-card:hover{
 transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--ember-300);
}
.story-card picture{display:block;overflow:hidden}
.story-card img{
 width:100%;aspect-ratio:1.5;object-fit:cover;object-position:top;
 transition:transform .85s var(--ease-out);
}
.story-card:hover img{transform:scale(1.045)}
.story-card>div{padding:clamp(20px,2.2vw,28px)}
.story-card small,.record-card small{
 font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.story-card h3,.film-card h3,.record-card h3{
 margin:var(--s-3) 0;font-size:var(--fs-h4);font-weight:650;letter-spacing:var(--track-tight);
}
.story-card span,.growth-link{display:inline-flex;align-items:center;gap:var(--s-2);font-weight:650}
.story-card span{font-size:var(--fs-small);color:var(--brand-deep)}
.story-card span svg,.growth-link svg{transition:transform var(--t-base) var(--ease-spring)}
.story-card:hover span svg{transform:translate(3px,-3px)}

.growth-link{
 margin-block:var(--s-4);font-size:var(--fs-small);color:var(--brand-deep);
 transition:gap var(--t-base) var(--ease-out);
}
.growth-link:hover{gap:var(--s-4)}
.growth-link:hover svg{transform:translate(3px,-3px)}

/* Film cards sit on the dark ground but stay light themselves */
.film-card{padding:var(--s-5);color:var(--ink)}
.film-thumb{
 position:relative;display:grid;place-items:center;overflow:hidden;
 height:210px;border-radius:var(--r-md);
 background:var(--ink-700);color:var(--on-dark);
}
.film-thumb img{width:100%;height:100%;object-fit:cover}
.film-thumb>svg{
 position:absolute;width:52px;height:52px;padding:13px;border-radius:50%;
 background:var(--ember-500);color:var(--ink-900);
 transition:transform var(--t-base) var(--ease-spring);
}
.film-card:hover .film-thumb>svg{transform:scale(1.12)}

.video-player{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-sm)}

/* Testimonials */
.review-card{
 position:relative;
 padding:clamp(24px,2.6vw,34px);border-radius:var(--r-lg);
 background:var(--surface);border:1px solid var(--line);
 transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out);
}
.review-card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.review-card>svg{width:28px;height:28px;color:var(--ember-400)}
.review-card blockquote{
 margin:var(--s-5) 0;font-family:var(--display);font-size:var(--fs-h4);
 line-height:1.5;letter-spacing:-.02em;
}
.review-card figcaption strong{font-size:var(--fs-small)}
.review-card figcaption span{display:block;font-size:var(--fs-small);color:var(--ink-muted)}

/* ==========================================================================
   RIBBON — ERP demo & portal entry points
   ========================================================================== */

.growth-ribbon{
 position:relative;isolation:isolate;overflow:hidden;
 display:grid;gap:var(--s-4);
 padding:clamp(34px,4vw,54px) max(var(--gutter),calc((100% - var(--shell)) / 2));
 background:var(--ink-800);color:var(--on-dark);
}
.growth-ribbon::before{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(ellipse 60% 100% at 92% 50%,
   color-mix(in srgb,var(--ember-700) 26%,transparent),transparent 64%);
}
.growth-ribbon>div{
 position:relative;z-index:1;
 display:flex;align-items:center;gap:var(--s-5);
 padding:var(--s-5);border-radius:var(--r-md);
 background:var(--glass);border:1px solid var(--on-dark-line);
 transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out);
}
.growth-ribbon>div:hover{border-color:color-mix(in srgb,var(--ember-500) 46%,transparent);transform:translateY(-3px)}
.growth-ribbon>div>svg{flex:none;width:26px;height:26px;color:var(--ember-400)}
.growth-ribbon span{flex:1}
.growth-ribbon strong{font-size:var(--fs-body);font-weight:650}
.growth-ribbon small{display:block;margin-top:3px;font-size:var(--fs-small);color:var(--on-dark-muted)}
.growth-ribbon a{
 display:flex;align-items:center;gap:var(--s-3);flex:none;min-height:44px;
 font-size:var(--fs-small);font-weight:700;color:var(--ember-400);
 transition:gap var(--t-base) var(--ease-out);
}
.growth-ribbon a svg{transition:transform var(--t-base) var(--ease-spring)}
.growth-ribbon a:hover{gap:var(--s-4)}
.growth-ribbon a:hover svg{transform:translate(3px,-3px)}

/* ==========================================================================
   DIALOGS
   ========================================================================== */

.case-dialog,.tools-dialog{max-height:90vh;overflow:auto;color:var(--ink);font-size:var(--fs-body)}
.case-image{
 width:100%;max-height:48vh;object-fit:cover;object-position:top;
 border-radius:var(--r-sm);
}
.case-copy{padding:var(--s-3)}
.case-copy h3{margin-top:var(--s-5);font-size:var(--fs-h4);font-weight:700}
.case-copy p,.preserve{white-space:pre-wrap}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.growth-button,.growth-outline{
 display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
 min-height:46px;padding:12px 22px;border-radius:var(--r-sm);
 font-size:var(--fs-small);font-weight:700;cursor:pointer;
 transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),
            border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out);
}
.growth-button{background:var(--ink-700);color:var(--n-0)}
.growth-button:hover{background:var(--ink-800);transform:translateY(-2px)}
.growth-outline{background:var(--surface);border:1px solid var(--line-strong);color:var(--ink)}
.growth-outline:hover{border-color:var(--ember-400);color:var(--brand-deep)}
button:disabled{opacity:.5;cursor:not-allowed}

/* ==========================================================================
   INNER-PAGE NAV
   ========================================================================== */

.growth-nav{
 position:sticky;top:0;z-index:50;
 display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
 padding:var(--s-5) var(--gutter);
 background:color-mix(in srgb,var(--ink-900) 92%,transparent);
 color:var(--n-0);backdrop-filter:blur(14px);
 border-bottom:1px solid var(--on-dark-line);
 font:700 var(--fs-body) var(--display);
}
.growth-nav small{
 display:block;font-size:var(--fs-micro);font-weight:600;
 letter-spacing:var(--track-label);color:var(--ember-400);
}
.growth-nav>a:last-child{
 display:inline-flex;align-items:center;gap:var(--s-2);
 font-size:var(--fs-small);font-weight:650;color:var(--on-dark-muted);
 transition:color var(--t-base) var(--ease);
}
.growth-nav>a:last-child:hover{color:var(--ember-400)}

.workspace-logo{display:flex;align-items:center;gap:var(--s-5)}
.workspace-logo img{width:clamp(170px,15vw,217px);height:auto}
.workspace-logo small{
 padding-left:var(--s-5);border-left:1px solid var(--on-dark-line-strong);
 font-size:var(--fs-micro)!important;letter-spacing:.1em!important;
}

/* ==========================================================================
   ERP DEMO
   ========================================================================== */

.demo-wrap{max-width:var(--shell);margin-inline:auto;padding:var(--s-8) var(--gutter) var(--s-10)}
.demo-heading p{max-width:74ch;color:var(--ink-muted)}
.demo-badge{
 display:inline-flex;align-items:center;
 padding:8px 13px;border-radius:var(--r-xs);
 background:var(--warn-bg);color:var(--warn-ink);
 font-size:var(--fs-label);font-weight:700;
}

.demo-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin:var(--s-6) 0}
.demo-stats article{
 padding:var(--s-5);border-radius:var(--r-md);
 background:var(--surface);border:1px solid var(--line);
 transition:border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-out);
}
.demo-stats article:hover{border-color:var(--ember-300);transform:translateY(-3px)}
.demo-stats small{display:block;font-size:var(--fs-small);color:var(--ink-muted)}
.demo-stats strong{
 display:block;margin-top:var(--s-2);
 font:700 clamp(24px,2.4vw,32px)/1 var(--display);letter-spacing:-.04em;
}

.growth-panel{
 margin:var(--s-5) 0;padding:clamp(20px,2.2vw,30px);
 background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
}
.growth-panel h2{font-size:var(--fs-h3);font-weight:700}
.growth-panel h3{margin:var(--s-5) 0 var(--s-2);font-size:var(--fs-h4);font-weight:700}

.panel-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-5)}
.panel-bar input{max-width:280px}
.panel-bar>[data-slot=select-trigger]{max-width:300px}

.demo-tabs{height:auto;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-5)}
.demo-tabs button{padding:12px 22px}

.inline-actions{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-3)}
.inline-actions button,.inline-actions a{font-weight:700;color:var(--brand-deep)}
.low-stock{font-weight:700;color:var(--bad-ink)}

.demo-leave{
 display:flex;justify-content:space-between;gap:var(--s-5);
 padding:var(--s-5) 0;border-bottom:1px solid var(--line);
}
.demo-report-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s-5)}
.demo-report{margin:var(--s-5) 0}
.demo-report>div:first-child{display:flex;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-2)}

.demo-insight{
 position:relative;isolation:isolate;overflow:hidden;
 margin:var(--s-5) 0;padding:clamp(26px,3vw,40px);
 border-radius:var(--r-xl);background:var(--grad-ink);color:var(--on-dark);
}
.demo-insight::before{
 content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
 background:radial-gradient(ellipse 70% 80% at 88% 10%,
   color-mix(in srgb,var(--ember-600) 28%,transparent),transparent 62%);
}
.demo-insight>*{position:relative;z-index:1}
.demo-insight h2{margin:var(--s-5) 0;font-size:clamp(28px,3vw,38px);font-weight:700;line-height:1.14}
.demo-insight strong{display:block;margin-top:var(--s-6);font-size:clamp(26px,2.8vw,34px)}
.demo-insight span,.demo-insight a{display:block}
.demo-insight a{margin-top:var(--s-5);color:var(--ember-400);font-weight:650}
.demo-footnote{margin-top:var(--s-6);font-size:var(--fs-small);color:var(--ink-muted)}

.growth-notice{
 margin:var(--s-4) 0;padding:var(--s-4) var(--s-5);border-radius:var(--r-sm);
 background:var(--warn-bg);color:var(--warn-ink);
}

/* ==========================================================================
   STUDIO TOOLS
   ========================================================================== */

.tools-nav{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-5) 0 var(--s-6)}
.tools-nav button{
 padding:10px 15px;border-radius:var(--r-xs);
 border:1px solid var(--line);font-size:var(--fs-small);
 transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),
            border-color var(--t-base) var(--ease);
}
.tools-nav button:hover{border-color:var(--ember-300)}
.tools-nav .active{background:var(--ink-700);color:var(--n-0);border-color:var(--ink-700)}

.record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.record-card{
 padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);
 overflow-wrap:anywhere;background:var(--surface);
}
.record-card p{white-space:pre-wrap;color:var(--ink-muted)}
.empty-copy{padding:var(--s-7) 0;color:var(--ink-muted)}

.tools-form{display:grid;gap:var(--s-5)}
.tools-form label{display:grid;gap:var(--s-2);font-size:var(--fs-small);font-weight:600;text-transform:none}
.tools-form label:has([data-slot=checkbox]){display:flex;align-items:center;gap:var(--s-3)}
.tools-form input,.tools-form textarea{font-size:var(--fs-body);font-weight:400}
.tools-form fieldset{padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-sm)}

.quote-item{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s-3);margin-bottom:var(--s-5)}
.quote-item>button{grid-column:1/-1;text-align:left;color:var(--brand-deep)}

.quote-paper{
 padding:var(--s-6);background:var(--surface);color:var(--ink-700);
 font-size:var(--fs-small);line-height:1.6;
}
.quote-head{
 display:flex;justify-content:space-between;gap:var(--s-5);
 padding-bottom:var(--s-5);margin-bottom:var(--s-6);
 border-bottom:3px solid var(--ember-500);
}
.quote-head>img{object-fit:contain;align-self:flex-start;max-width:230px}
.quote-head strong{font-size:clamp(22px,2.4vw,29px);letter-spacing:.04em}
.quote-head span{display:block;font-size:var(--fs-micro);letter-spacing:var(--track-wide)}
.quote-paper h2{margin:var(--s-5) 0;font-size:var(--fs-h3);font-weight:800}
.quote-paper p{margin:var(--s-4) 0}
.quote-paper table{width:100%;border-collapse:collapse;margin:var(--s-5) 0}
.quote-paper th,.quote-paper td{text-align:left;padding:var(--s-3);border-bottom:1px solid var(--line)}
.quote-paper th{background:var(--surface-sunken)}
.quote-totals{max-width:330px;margin-left:auto}
.quote-totals p,.quote-totals h3{display:flex;justify-content:space-between;gap:var(--s-5)}
.table-scroll{overflow:auto}

.upload-box{
 display:grid;gap:var(--s-3);margin:var(--s-5) 0;
 padding:var(--s-5);border:1px dashed var(--n-400);border-radius:var(--r-sm);
 font-size:var(--fs-small);
 transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
.upload-box:hover{border-color:var(--ember-400);background:var(--brand-tint)}
.upload-box small{font-size:var(--fs-small)}

.portal-project{margin:var(--s-7) 0}
.feedback{margin:var(--s-4) 0;padding:var(--s-4);border-radius:var(--r-sm);background:var(--surface-sunken)}
.feedback p{white-space:pre-wrap}
.feedback small{color:var(--ink-muted)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1000px){
 .growth-heading,.demo-heading{grid-template-columns:1fr}
 .story-grid,.record-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
 .story-grid,.record-grid,.demo-report-grid{grid-template-columns:1fr}
 .demo-stats{grid-template-columns:1fr 1fr}
 .demo-stats article{padding:var(--s-4)}
 .growth-ribbon>div{flex-wrap:wrap;align-items:flex-start}
 .growth-ribbon a{width:100%}
 .panel-bar{flex-wrap:wrap}
 .growth-panel{padding:var(--s-5)}
 .quote-paper{padding:0}
 .quote-head{flex-wrap:wrap}
 .quote-head>img{max-width:210px}
 .quote-item{grid-template-columns:1fr 1fr}
 .quote-item label:first-child{grid-column:1/-1}
 .demo-leave{display:block}
 .tools-wrap .growth-panel{padding:var(--s-4)}
 .demo-wrap{padding:var(--s-6) var(--gutter) var(--s-9)}
 .demo-tabs button{padding:10px 14px}
 .growth-nav{padding:var(--s-4) var(--gutter)}
 .workspace-logo{display:block}
 .workspace-logo img{width:186px}
 .workspace-logo small{padding:var(--s-1) 0 0;border:0;font-size:var(--fs-micro)!important}
}

/* ==========================================================================
   PRINT — quotations
   ========================================================================== */

@media print{
 body>*{visibility:hidden}
 [role=dialog]:has(.quote-paper),[role=dialog]:has(.quote-paper) *{visibility:visible}
 .quote-modal{
  position:absolute!important;inset:0!important;transform:none!important;
  max-width:none!important;width:100%!important;max-height:none!important;
  overflow:visible!important;box-shadow:none!important;border:0!important;display:block!important;
 }
 .quote-modal>[data-slot=dialog-title],.quote-modal>[data-slot=dialog-description],
 .quote-modal>button,.no-print{display:none!important}
 .quote-paper{padding:5mm;font-size:11pt}
 .quote-paper tr{break-inside:avoid}
 .quote-paper .table-scroll{overflow:visible}
 .quote-paper th{print-color-adjust:exact}
}