/* Bespoke module — builds on the tokens in solenne.css (Bespoke.dc.html prototype). */

.bsp-hero .hero-copy .h1 { font-size: clamp(36px, 4.6vw, 64px); }
.bsp-tint { background: var(--porcelain); }

.bsp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 24px; }
.bsp-steps li { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.6; }
.bsp-steps .n { font-family: var(--serif); font-size: 28px; color: var(--champagne-text); }
.bsp-steps strong { font-weight: 500; font-size: 16px; }

.bsp-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.bsp-gallery figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bsp-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--line); }
.bsp-gallery figcaption { font-size: 13px; color: var(--ink-2); }

.bsp-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.bsp-brief-intro { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 24px; }
.bsp-brief .form { max-width: 720px; position: relative; }
.bsp-brief .step[aria-invalid="true"] legend { color: var(--error); }
@media (max-width: 900px) {
  .bsp-brief { grid-template-columns: 1fr; }
  .bsp-brief-intro { position: static; }
}

.bsp-file { padding: 12px; height: auto; }

/* Account project page */
.bsp-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.bsp-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; font-size: 12px; }
.bsp-stages li { border-top: 2px solid var(--line); padding-top: 8px; color: var(--ink-2); }
.bsp-stages li.done { border-color: var(--ink); color: var(--ink); }
.bsp-stages li.now { border-color: var(--champagne); color: var(--champagne-text); font-weight: 500; }
@media (max-width: 600px) {
  .bsp-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
}

.bsp-version, .bsp-quote { border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.bsp-version.is-current, .bsp-quote.is-current { border-color: var(--ink); }
.bsp-version-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.bsp-files { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.bsp-files img { width: 180px; height: 180px; object-fit: cover; background: var(--porcelain); }
.bsp-doc { display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); font-size: 13px; text-decoration: none; min-height: 44px; }
.bsp-doc small { color: var(--ink-2); font-size: 11px; letter-spacing: .08em; }
.bsp-decide { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.bsp-accept { border-top: 1px solid var(--line); padding-top: 16px; max-width: 640px; }
.bsp-reject summary { cursor: pointer; font-size: 14px; color: var(--ink-2); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.bsp-reject[open] summary { color: var(--ink); }
.bsp-reject .form { max-width: 560px; }
.bsp-pay .summary { max-width: 420px; }
.bsp-inline { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.bsp-inline .field { flex: 1 1 260px; }
.summary .row small { color: var(--ink-2); }

/* Admin */
.bsp-admin-version { border-bottom: 1px solid #EEEBE5; padding-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.bsp-admin-version:last-child { border-bottom: 0; padding-bottom: 0; }
.bsp-admin-version .bsp-files img { width: 110px; height: 110px; border-radius: 4px; }
.msg.bsp-internal { background: #FBF6EA; border-color: #E3D3B4; }