/* ==========================================================================
   Mobisat — Page & feature-specific styles
   (Connected Infrastructure Explorer, forms, prose, hero visual)
   ========================================================================== */

/* ---------- Hero image figure with floating system labels ---------- */
.hero-figure {
  position: relative; z-index: 2;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--shadow-lg);
}
.hero-figure .hero-img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,31,53,0.15) 0%, rgba(7,31,53,0.05) 40%, rgba(7,31,53,0.72) 100%),
    linear-gradient(90deg, rgba(11,41,66,0.45), transparent 45%);
}
.hero-figure-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }

.float-label {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  background: rgba(7,20,36,0.66); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-pill);
  color: #fff; font-size: 0.78rem; font-weight: var(--fw-semibold); font-family: var(--font-display);
  white-space: nowrap; box-shadow: var(--shadow-sm);
}
.float-label svg { width: 14px; height: 14px; }
.float-label .fl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
@media (max-width: 460px) { .float-label { font-size: 0.7rem; padding: 0.32rem 0.55rem; } .float-label svg { display: none; } }

.hero-status {
  position: absolute; z-index: 3; inset-inline: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(7,20,36,0.74); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-md);
  padding: 0.7rem 0.9rem; color: #fff;
}
.hero-status .dot { flex: none; }
.hero-status b { display: block; font-family: var(--font-display); font-size: 0.9rem; }
.hero-status span { font-size: 0.72rem; color: var(--muted-on-dark); }

/* ---------- Prose (articles / legal / rich content) ---------- */
.prose { max-width: var(--container-reading); }
.prose > * + * { margin-block-start: 1.1rem; }
.prose h2 { font-size: var(--fs-700); margin-block-start: 2.2rem; }
.prose h3 { font-size: var(--fs-600); margin-block-start: 1.6rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose a { font-weight: var(--fw-medium); }
.prose ul, .prose ol { padding-inline-start: 1.3em; }
.prose blockquote { border-inline-start: 4px solid var(--brand-blue); padding-inline-start: 1rem; color: var(--muted); font-style: italic; }
.prose code { font-family: var(--font-mono); background: var(--surface-soft); padding: 0.1em 0.4em; border-radius: 5px; font-size: 0.9em; }

.toc { background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.25rem; }
.toc h4 { font-size: var(--fs-400); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.toc ol { margin: 0; }
.toc a { text-decoration: none; }

/* ---------- Forms ---------- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }
.form-progress { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.form-progress .step-dot { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--line); }
.form-progress .step-dot[data-done="true"] { background: var(--brand-blue); }
.form-progress .step-dot[data-current="true"] { background: var(--brand-red); }
.form-step { display: none; }
.form-step[data-active="true"] { display: block; animation: fadeStep var(--dur-2) var(--ease); }
@keyframes fadeStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.form-step legend { font-family: var(--font-display); font-size: var(--fs-600); color: var(--ink-navy); margin-bottom: 0.35rem; }
.form-step .step-hint { color: var(--muted); margin-bottom: 1.1rem; }

.field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.field > label { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-400); color: var(--ink-navy); }
.field .req { color: var(--brand-red); }
.field .hint { font-size: var(--fs-300); color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--brand-blue); box-shadow: var(--ring); outline: none; }
.field[data-invalid="true"] .input, .field[data-invalid="true"] .select, .field[data-invalid="true"] .textarea { border-color: var(--error); }
.field .error-msg { color: var(--error); font-size: var(--fs-300); }
.field .error-msg:empty { display: none; }

.choice-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice {
  position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 0.9rem 1rem; cursor: pointer; display: flex; gap: 0.6rem; align-items: flex-start;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.choice:hover { border-color: var(--brand-blue); background: var(--surface-soft); }
.choice input { margin-top: 0.15rem; accent-color: var(--brand-blue); width: 18px; height: 18px; }
.choice:has(input:checked) { border-color: var(--brand-blue); background: var(--surface-blue); box-shadow: inset 0 0 0 1px var(--brand-blue); }
.choice b { font-family: var(--font-display); font-size: var(--fs-400); color: var(--ink-navy); display: block; }
.choice span { font-size: var(--fs-300); color: var(--muted); }

.form-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; }
.error-summary { border: 1px solid #f1c9cc; background: #fdeff0; border-radius: var(--r-md); padding: 1rem 1.2rem; margin-bottom: 1.25rem; }
.error-summary h3 { color: var(--error); font-size: var(--fs-500); }
.error-summary a { color: var(--error); }
.error-summary:empty, .error-summary[hidden] { display: none; }

.form-confirm { text-align: center; padding: 1.5rem 0; }
.form-confirm .check-badge { width: 68px; height: 68px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; margin: 0 auto 1rem; }
.form-confirm .check-badge svg { width: 34px; height: 34px; }
.confirm-summary { text-align: start; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.25rem; margin: 1.25rem 0; }
.ref-code { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.05em; color: var(--brand-blue-deep); }

/* Consent row */
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-400); color: var(--muted); }
.consent input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--brand-blue); }

/* ---------- Office cards ---------- */
.office-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; display: grid; gap: 0.85rem; }
.office-card h3 { font-size: var(--fs-500); }
.office-card .rows { display: grid; gap: 0.6rem; }
.office-card .row { display: grid; grid-template-columns: 22px 1fr; gap: 0.6rem; align-items: start; font-size: var(--fs-400); color: var(--ink-soft); }
.office-card .row svg { width: 20px; height: 20px; color: var(--brand-blue); margin-top: 2px; }
.office-card .quick { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.office-card .quick a { font-size: var(--fs-300); }

/* Related grid */
.related-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--brand-blue-deep), var(--brand-blue)); color: #fff; border-radius: var(--r-xl); padding: clamp(1.75rem, 4vw, 3rem); position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(400px 200px at 90% 20%, rgba(234,30,36,0.25), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.85); }