/* ------------------------------------------------------------------
   Solo portfolio pages.
   The design is inline styled with no classes, so this file carries
   only the responsive switches that were logic values in the design
   component (navDisplay, gridCols, factCols and so on), plus the
   hover states inline styles cannot express.
   Breakpoints match the design exactly: m < 768, t < 992.
   ------------------------------------------------------------------ */

.sp-nav { display: flex; }
.sp-burger { display: none; }
.sp-menu { display: none; }
.sp-menu.is-open { display: block; }
@media (max-width: 991px) {
  .sp-nav { display: none; }
  .sp-burger { display: inline-flex; }
}

.sp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sp-footer-cols { grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; }
.sp-hero-cols { grid-template-columns: 1.6fr 1fr; }
.sp-hero-meta { align-items: flex-end; }
.sp-fact-cols { grid-template-columns: repeat(4, 1fr); }
.sp-editorial-cols { grid-template-columns: 260px 1fr; }
.sp-built-cols { grid-template-columns: 1fr 1fr; }
.sp-next-cols { grid-template-columns: 260px 1fr; }
.sp-caption-cols { grid-template-columns: 1fr 1fr; }
.sp-caption-right { text-align: right; }
/* The live site frame. It holds the whole full page capture and scrolls
   inside itself, so a visitor can look through the entire site rather than
   just the top of it. A fixed height replaces the old 16:9 crop. */
.sp-live { height: 80vh; min-height: 340px; scrollbar-width: thin; scrollbar-color: rgba(28,27,24,0.28) transparent; }
.sp-live::-webkit-scrollbar { width: 10px; }
.sp-live::-webkit-scrollbar-track { background: transparent; }
.sp-live::-webkit-scrollbar-thumb { background: rgba(28,27,24,0.22); border-radius: 999px; border: 3px solid #fff; }
.sp-live:hover::-webkit-scrollbar-thumb { background: rgba(28,27,24,0.38); }
.sp-live-hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--solo-gold-text); }
@media (max-width: 767px) {
  .sp-live { height: 70vh; }
}
.sp-result-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.sp-ba-stage { aspect-ratio: 16 / 10; }
.sp-ba-wrap { max-width: 100%; }
.sp-fact-cell { border-right: 1px solid var(--line); }
.sp-fact-cell:last-child { border-right: 0; }
.sp-built-last { border-bottom: 1px solid var(--line); }

@media (max-width: 991px) {
  .sp-footer-cols { grid-template-columns: 1fr 1fr; }
  .sp-editorial-cols { grid-template-columns: 1fr; }
  .sp-result-cols { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .sp-grid-2 { grid-template-columns: 1fr; }
  .sp-footer-cols { grid-template-columns: 1fr; }
  .sp-hero-cols { grid-template-columns: 1fr; }
  .sp-hero-meta { align-items: flex-start; }
  .sp-fact-cols { grid-template-columns: 1fr 1fr; }
  .sp-fact-cell { border-bottom: 1px solid var(--line); }
  .sp-fact-cell:nth-child(2n) { border-right: 0; }
  .sp-fact-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .sp-built-cols { grid-template-columns: 1fr; }
  .sp-built-last { border-bottom: 0; }
  .sp-next-cols { grid-template-columns: 1fr; }
  .sp-caption-cols { grid-template-columns: 1fr; }
  .sp-caption-right { text-align: left; }
  .sp-live { aspect-ratio: 4 / 3; }
  .sp-ba-stage { aspect-ratio: 390 / 700; }
  .sp-ba-wrap { max-width: 330px; }
}

/* an oEmbed provider returns its own iframe, so it needs a rule, not a style */
.sp-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* hover states */
.sp-link-soft:hover { color: var(--ink) !important; }
.sp-cta:hover { background: var(--solo-gold-deep) !important; }
.sp-foot-link:hover { color: #fff !important; }
.sp-live-link:hover { color: var(--ink) !important; border-bottom-color: var(--ink) !important; }
.sp-card:hover h2 { color: var(--solo-gold-text); }
.sp-chip { transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.sp-chip:hover { border-color: var(--solo-gold); }
.sp-card-wrap[hidden] { display: none; }


/* ---- Contact page ---------------------------------------------------- */

.sp-contact-cols{grid-template-columns:1fr}
@media (min-width: 900px){
  .sp-contact-cols{grid-template-columns:1.35fr 1fr}
}

/* Fluent Forms, restyled into the Solo system. Selectors are doubled so
   they outrank Elementor's Global Kit and the Fluent Forms defaults. */

.sp-ff .fluentform .ff-el-group{margin-bottom:20px}
.sp-ff .ff-el-input--label label.ff-el-input--label label,
.sp-ff .ff-el-input--label label{font-family:Inter,Helvetica,Arial,sans-serif;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px}
.sp-ff .ff-el-input--label .ff-el-is-required.asterisk-right:after{color:var(--solo-gold-text)}
.sp-ff .fluentform input[type=text].ff-el-form-control,
.sp-ff .fluentform input[type=email].ff-el-form-control,
.sp-ff .fluentform input[type=tel].ff-el-form-control,
.sp-ff .fluentform select.ff-el-form-control,
.sp-ff .fluentform textarea.ff-el-form-control{width:100%;background:var(--canvas);border:1px solid var(--line);border-radius:10px;padding:13px 15px;font-family:Inter,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--ink);box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease}
.sp-ff .fluentform textarea.ff-el-form-control{min-height:150px;resize:vertical}
.sp-ff .fluentform .ff-el-form-control::placeholder{color:#96938B}
.sp-ff .fluentform .ff-el-form-control:focus{border-color:var(--solo-gold);box-shadow:0 0 0 3px rgba(223,181,75,0.28);outline:none}
.sp-ff .fluentform .ff-el-form-check label{font-size:14px;line-height:1.55;color:var(--ink-soft)}
.sp-ff .fluentform .ff-el-form-check input[type=checkbox]{accent-color:var(--solo-gold-deep)}
.sp-ff .fluentform .ff-btn-submit{background:var(--solo-gold);color:var(--ink);font-family:Inter,Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;border:0;border-radius:10px;padding:15px 28px;cursor:pointer;transition:background .15s ease}
.sp-ff .fluentform .ff-btn-submit:hover{background:var(--solo-gold-deep);color:var(--ink)}
.sp-ff .fluentform .ff-el-is-error .ff-el-form-control{border-color:#B4443A}
.sp-ff .fluentform .error.text-danger{font-size:13px;color:#B4443A;margin-top:6px}
.sp-ff .ff-message-success{background:var(--solo-gold-tint);border:1px solid var(--solo-gold);border-radius:12px;padding:20px 22px;color:var(--ink);font-size:16px}

/* Fluent Forms writes per-form rules behind an ID selector, so the submit
   button needs !important to take the Solo gold. */
.sp-ff .fluentform .ff-btn-submit{background:var(--solo-gold-bright)!important;background-color:var(--solo-gold-bright)!important;color:var(--ink)!important;border:0!important;border-radius:10px!important;padding:15px 28px!important;font-weight:600!important;font-size:16px!important;box-shadow:none!important}
.sp-ff .fluentform .ff-btn-submit:hover{background:var(--solo-gold)!important;background-color:var(--solo-gold)!important;color:var(--ink)!important}
.sp-contact h1,.sp-contact h2,.sp-contact h3{text-transform:none}


/* ---- Text pages and blog ---------------------------------------------- */
/* Editor content cannot be styled inline, so these rules double their
   selectors to outrank Elementor's Global Kit. */

.sp-post-grid.sp-post-grid{grid-template-columns:1fr}
@media (min-width: 760px){
  .sp-post-grid.sp-post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sp-post-grid a:hover .sp-tile-title{color:var(--solo-gold-text)}

.sp-pager.sp-pager a,.sp-pager.sp-pager span{display:inline-block;padding:9px 15px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.sp-pager.sp-pager a:hover{border-color:var(--solo-gold);background:var(--solo-gold-tint)}
.sp-pager.sp-pager .current{background:var(--solo-gold-tint);border-color:var(--solo-gold);color:var(--ink);font-weight:600}

.sp-prose.sp-prose{font-family:Inter,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.72;color:var(--ink)}
.sp-prose.sp-prose > *:first-child{margin-top:0}
.sp-prose.sp-prose p{margin:0 0 1.15em;color:var(--ink)}
.sp-prose.sp-prose h2{font-family:'Newsreader',Georgia,'Times New Roman',serif;font-size:clamp(26px,2.6vw,34px);line-height:1.24;font-weight:700;color:var(--ink);text-transform:none;margin:2.2em 0 0.5em;padding-top:0.7em;border-top:1px solid var(--line)}
.sp-prose.sp-prose h3{font-family:Poppins,Helvetica,Arial,sans-serif;font-size:clamp(19px,1.7vw,22px);line-height:1.32;font-weight:600;color:var(--ink);text-transform:none;margin:1.9em 0 0.45em}
.sp-prose.sp-prose h4{font-family:Poppins,Helvetica,Arial,sans-serif;font-size:17px;font-weight:600;color:var(--ink);text-transform:none;margin:1.6em 0 0.4em}
.sp-prose.sp-prose strong{font-weight:600;color:var(--ink)}
.sp-prose.sp-prose a{color:var(--solo-gold-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sp-prose.sp-prose a:hover{color:var(--ink)}
.sp-prose.sp-prose ul,.sp-prose.sp-prose ol{margin:0 0 1.15em;padding-left:0;list-style:none}
.sp-prose.sp-prose ol{counter-reset:sp-ol}
.sp-prose.sp-prose li{position:relative;padding-left:26px;margin-bottom:0.5em}
.sp-prose.sp-prose ul > li:before{content:"";position:absolute;left:4px;top:0.72em;width:7px;height:7px;border-radius:999px;background:var(--solo-gold)}
.sp-prose.sp-prose ol > li{counter-increment:sp-ol}
.sp-prose.sp-prose ol > li:before{content:counter(sp-ol);position:absolute;left:0;top:0.06em;font-size:13px;font-weight:600;color:var(--solo-gold-text)}
.sp-prose.sp-prose li ul,.sp-prose.sp-prose li ol{margin-top:0.5em}
.sp-prose.sp-prose blockquote{margin:1.7em 0;padding:2px 0 2px 22px;border-left:3px solid var(--solo-gold);font-family:'Newsreader',Georgia,serif;font-size:1.1em;line-height:1.5;color:var(--ink)}
.sp-prose.sp-prose img{max-width:100%;height:auto;border-radius:12px;display:block;margin:1.7em 0}
.sp-prose.sp-prose figure{margin:1.7em 0}
.sp-prose.sp-prose figcaption{margin-top:8px;font-size:14px;color:var(--ink-soft)}
.sp-prose.sp-prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.sp-prose.sp-prose code{background:var(--canvas-warm);border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:0.9em}
.sp-prose.sp-prose table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:16px}
.sp-prose.sp-prose th,.sp-prose.sp-prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.sp-prose.sp-prose th{background:var(--canvas-warm);font-weight:600}
.sp-prose.sp-prose .wp-block-table{overflow-x:auto}

.sp-hero-split.sp-hero-split{grid-template-columns:1fr}
@media (min-width: 900px){
  .sp-hero-split.sp-hero-split{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr)}
}