/* /css/hand-lab-view.css */

#hand-lab-view{
  max-width:min(1480px, calc(100vw - 2rem));
}

.handlab-header{
  margin-bottom:1.25rem;
}

.handlab-subtitle{
  max-width:920px;
  margin:.15rem 0 0;
  color:var(--text-soft);
  line-height:1.6;
  font-size:1rem;
}

.handlab-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(280px, .9fr);
  gap:1rem;
  align-items:stretch;
  margin-bottom:1.25rem;
}

.handlab-kicker{
  display:inline-block;
  margin-bottom:.5rem;
  padding:.34rem .65rem;
  border-radius:999px;
  background:rgba(var(--primary-rgb), .10);
  border:1px solid rgba(var(--primary-rgb), .18);
  color:var(--primary);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.handlab-hero-copy h3,
.handlab-card-head h3,
.handlab-section-head h3,
.handlab-bottom-cta h3{
  margin:.2rem 0 .55rem;
  font-size:clamp(1.3rem, 1vw + 1rem, 1.9rem);
  line-height:1.15;
  color:#fff;
}

.handlab-hero-copy p,
.handlab-card-head p,
.handlab-sample-card p,
.handlab-bottom-cta p{
  margin:0;
  color:var(--text-soft);
  line-height:1.6;
}

.handlab-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1rem;
}

.handlab-hero-side{
  display:grid;
  gap:.8rem;
}

.handlab-mini-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.25rem;
  padding:1rem 1rem;
  min-height:110px;
  border-radius:12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    rgba(var(--deep-rgb), .35);
  border:1px solid rgba(var(--primary-rgb), .14);
}

.handlab-mini-card strong{
  font-size:1.1rem;
  color:#fff;
}

.handlab-mini-label{
  color:var(--muted);
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.handlab-stats-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
  margin-bottom:1.25rem;
}

.handlab-stat-card{
  min-height:220px;
  justify-content:center;
}

.handlab-stat-value{
  font-size:clamp(2rem, 2.6vw, 3rem);
}

.handlab-main-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.7fr) minmax(290px, .85fr);
  gap:1rem;
  align-items:start;
  margin-bottom:1.25rem;
}

.handlab-form-card,
.handlab-info-card{
  height:100%;
}

.handlab-card-head{
  width:100%;
  margin-bottom:1rem;
  text-align:left;
}

.handlab-form{
  width:100%;
}

.handlab-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}

.handlab-field{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  text-align:left;
}

.handlab-field-full{
  grid-column:1 / -1;
}

.handlab-field label{
  font-size:.84rem;
  font-weight:800;
  color:var(--primary);
  letter-spacing:.02em;
}

.handlab-field input,
.handlab-field select,
.handlab-field textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(var(--primary-rgb), .16);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:.85rem .95rem;
  outline:none;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
  font-family:var(--font-body);
}

.handlab-field textarea{
  resize:vertical;
  min-height:120px;
}

.handlab-field input:focus,
.handlab-field select:focus,
.handlab-field textarea:focus{
  border-color:rgba(var(--primary-rgb), .45);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb), .12);
  background:rgba(255,255,255,.05);
}

.handlab-form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1rem;
}

.handlab-side-stack{
  display:grid;
  gap:1rem;
}

.handlab-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.7rem;
}

.handlab-list li{
  position:relative;
  padding-left:1rem;
  color:var(--text-soft);
  line-height:1.5;
}

.handlab-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.58rem;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb), .18);
}

.handlab-plan-list{
  width:100%;
  display:grid;
  gap:.7rem;
}

.handlab-plan-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem .95rem;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(var(--primary-rgb), .10);
}

.handlab-plan-row span{
  color:var(--text-soft);
  font-weight:700;
}

.handlab-plan-row strong{
  color:#fff;
}

.handlab-samples{
  margin-bottom:1.25rem;
}

.handlab-section-head{
  margin-bottom:1rem;
}

.handlab-sample-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}

.handlab-sample-card{
  align-items:flex-start;
  text-align:left;
}

.handlab-sample-top{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-bottom:.85rem;
}

.handlab-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.74rem;
  font-weight:800;
  background:rgba(var(--accent-rgb), .12);
  border:1px solid rgba(var(--accent-rgb), .18);
  color:var(--primary);
  letter-spacing:.04em;
}

.handlab-sample-shot{
  width:100%;
  aspect-ratio:16 / 10;
  border-radius:14px;
  margin-bottom:.85rem;
  border:1px solid rgba(var(--primary-rgb), .10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    radial-gradient(circle at 30% 20%, rgba(var(--primary-rgb), .22), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(var(--accent-rgb), .18), transparent 35%),
    #111822;
  position:relative;
  overflow:hidden;
}

.handlab-sample-shot::after{
  content:"HRC Preview";
  position:absolute;
  inset:auto 12px 12px auto;
  font-size:.76rem;
  font-weight:800;
  color:rgba(255,255,255,.75);
  letter-spacing:.08em;
}

.handlab-sample-shot--one::before,
.handlab-sample-shot--two::before,
.handlab-sample-shot--three::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(90deg, rgba(110,207,240,.16) 0 30%, transparent 30% 100%),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 44px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05) 0 1px,
      transparent 1px 34px
    );
}

.handlab-sample-card h4{
  margin:0 0 .4rem;
  font-size:1.05rem;
  color:#fff;
}

.handlab-bottom-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

@media (max-width:1180px){
  .handlab-stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .handlab-sample-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:980px){
  .handlab-hero,
  .handlab-main-grid,
  .handlab-bottom-cta{
    grid-template-columns:1fr;
    display:grid;
  }
}

@media (max-width:720px){
  .handlab-form-grid,
  .handlab-stats-grid{
    grid-template-columns:1fr;
  }

  .handlab-form-actions,
  .handlab-hero-actions{
    flex-direction:column;
  }

  .handlab-form-actions > *,
  .handlab-hero-actions > *{
    width:100%;
  }
}