/* ============================================================
   EkoStone — Stone Broker page CSS
   ------------------------------------------------------------
   Deploy: /wp-content/themes/generatepress-child/assets/stone-broker.css
   Enqueued only on /stone-broker/ (functions.php → is_page).
   Base section styles (.trade / .bullets / .trade-card / .row /
   .submit) stay in ekostone.css — this file adds page-only rules.
   ============================================================ */

/* Breadcrumb bar */
.page-head{border-bottom:1px solid var(--hairline);background:var(--bone)}
.page-head .wrap{padding-block:18px}
.crumbs{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--quarry)}
.crumbs a{color:var(--smoke)}
.crumbs a:hover{color:var(--oxide)}
.crumbs .sep{opacity:.5}

/* ────────── Stone Broker intro (light, above Trade) ────────── */
.broker-intro{background:var(--paper);padding:112px 0 104px;border-bottom:1px solid var(--hairline)}
.broker-intro .top{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:end;margin-bottom:72px}
.broker-intro h2{margin:18px 0 0}
.broker-intro h2 em{color:var(--oxide)}
.broker-intro .lede{max-width:52ch;margin:0}
.broker-intro .lede + .lede{margin-top:18px}
.broker-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.broker-step{padding:32px 32px 8px 0;display:flex;flex-direction:column;gap:12px}
.broker-step + .broker-step{padding-left:32px;border-left:1px solid var(--hairline)}
.broker-step .n{font-family:var(--serif);font-style:italic;font-weight:300;font-size:44px;line-height:1;color:var(--oxide)}
.broker-step h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;margin:0}
.broker-step p{margin:0;font-size:14px;line-height:1.6;color:var(--smoke);max-width:36ch;text-wrap:pretty}

/* ────────── Trade section as a full page ────────── */
.trade--page{padding-top:104px;padding-bottom:80px;border-bottom:1px solid var(--hairline-d)}
.trade--page .h1{margin-top:18px;color:var(--bone)}
.trade--page .cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* Application card */
.trade--page .trade-card .h3{color:var(--bone);font-size:28px}
.trade--page .trade-card .intro{color:rgba(244,241,235,.6);margin:8px 0 0;font-size:14px}
.trade--page .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.trade--page .check{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:rgba(244,241,235,.7);line-height:1.5;font-family:var(--sans);letter-spacing:0;text-transform:none}
.trade--page .check input{width:16px;height:16px;flex-shrink:0;accent-color:var(--oxide);margin-top:1px}
.trade--page .submit .btn{background:var(--oxide);color:var(--bone);border:0}
.trade--page .submit .btn:hover{background:var(--bone);color:var(--ink)}
.trade--page .submit .btn[disabled]{opacity:.6;cursor:wait}

/* Success state (injected by stone-broker.js) */
.trade-ok{padding:8px 0}
.trade-ok h3{margin:0 0 6px;color:var(--bone);font-family:var(--serif);font-weight:400;font-size:24px}
.trade-ok p{margin:0;color:rgba(244,241,235,.7);font-size:14px}
.trade-err{margin:12px 0 0;font-size:13px;color:#e8a88a}

/* ────────── Reveal system — "napływanie" (same as About Us) ──────────
   Hidden state applies only once stone-broker.js adds .eko-anim to <html>,
   so content stays visible if JS is blocked or fails. */
.eko-anim .fl{opacity:0;transition:opacity 380ms var(--ease-out),transform 380ms var(--ease-out);transition-delay:var(--d,0ms)}
.eko-anim .fl[data-dir="up"]   {transform:translate3d(0,12px,0) scale(.985)}
.eko-anim .fl[data-dir="down"] {transform:translate3d(0,-12px,0) scale(.985)}
.eko-anim .fl[data-dir="left"] {transform:translate3d(-16px,0,0) scale(.985)}
.eko-anim .fl[data-dir="right"]{transform:translate3d(16px,0,0) scale(.985)}
.eko-anim .fl[data-dir="fade"] {transform:scale(.985)}
.eko-anim .fl.in{opacity:1;transform:none}
.flow-word{display:inline-block;opacity:0;transform:translateY(.3em);transition:opacity 240ms var(--ease-out),transform 240ms var(--ease-out)}
.flow-word.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .eko-anim .fl,.flow-word{transform:none!important;transition:opacity 200ms ease}
}

@media (max-width:980px){
  .broker-intro{padding:72px 0 64px}
  .broker-intro .top{grid-template-columns:1fr;gap:28px;margin-bottom:48px}
  .broker-steps{grid-template-columns:1fr}
  .broker-step,.broker-step + .broker-step{padding:28px 0 20px;border-left:0}
  .broker-step + .broker-step{border-top:1px solid var(--hairline)}
  .trade--page{padding-top:64px;padding-bottom:56px}
}