/* ============================================================
   pages.css – about / electricity-law / formulas / lighting
   ============================================================ */

/* ============================================================ PAGE HERO */
.page-hero{
  padding:72px 48px 52px;background:var(--clr-bg);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;top:-100px;left:0;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(245,200,66,.14) 0%,transparent 65%);
  pointer-events:none;
}
.page-hero__title{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.9rem,4vw,3rem);color:var(--clr-heading);
  line-height:1.1;margin-bottom:14px;position:relative;
}
.page-hero__title em{color:var(--clr-yellow-dark);font-style:normal}
.page-hero__desc{
  color:var(--clr-muted);font-size:1rem;line-height:1.85;
  max-width:580px;position:relative;
}

/* ============================================================ ABOUT */
.about-text{
  color:var(--clr-muted);font-size:1.02rem;line-height:1.9;
  margin-bottom:16px;max-width:740px;
}

.cert-list{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.cert-list__item{
  display:flex;align-items:center;gap:14px;
  background:var(--clr-bg-card);border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);padding:14px 20px;
  font-size:.92rem;transition:border-color var(--transition);
}
.cert-list__item:hover{border-color:var(--clr-yellow)}
.cert-list__check{
  width:28px;height:28px;min-width:28px;border-radius:50%;
  background:var(--clr-yellow-bg);border:1.5px solid rgba(245,200,66,.45);
  color:var(--clr-yellow-dark);font-weight:900;font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}

/* ============================================================ OHM'S LAW */
.ohm-showcase{
  margin:0 48px 48px;
  background:var(--clr-bg-card);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);padding:52px 40px;text-align:center;
  box-shadow:0 4px 24px rgba(0,0,0,.05);
}
.ohm-showcase__formula{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.2rem,6vw,3.8rem);
  color:var(--clr-heading);letter-spacing:5px;margin:16px 0;
}
.ohm-showcase__formula span{color:var(--clr-yellow-dark)}
.ohm-showcase__sub{color:var(--clr-muted);margin-bottom:36px;font-size:.95rem}

/* Triangle widget */
.ohm-triangle{
  display:inline-flex;flex-direction:column;align-items:stretch;
  border:2px solid var(--clr-yellow);border-radius:var(--radius-md);
  overflow:hidden;margin:0 auto 24px;min-width:240px;
}
.ohm-triangle__top{
  background:var(--clr-yellow);color:#111;
  font-family:var(--font-display);font-weight:900;font-size:2rem;
  padding:14px 40px;text-align:center;
}
.ohm-triangle__bottom{display:flex}
.ohm-triangle__cell{
  flex:1;padding:14px 0;
  font-family:var(--font-display);font-weight:800;font-size:1.9rem;
  text-align:center;background:var(--clr-yellow-light);
  color:var(--clr-heading);
}
.ohm-triangle__cell--left{border-left:1px solid rgba(245,200,66,.5)}
.ohm-showcase__hint{color:var(--clr-muted);font-size:.83rem}

/* ============================================================ FORMULA GROUP HEADING */
.formula-group{margin-bottom:52px}
.formula-group__heading{
  font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  color:var(--clr-heading);border-right:4px solid var(--clr-yellow);
  padding-right:14px;margin-bottom:22px;
}

/* ============================================================ CALCULATOR */
.calc-wrap{max-width:460px}
.calc-box{
  background:var(--clr-bg-card);border:1px solid var(--clr-border);
  border-radius:var(--radius-lg);padding:34px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
}
.calc-box__title{
  color:var(--clr-heading);font-family:var(--font-display);
  font-weight:700;font-size:1.15rem;margin-bottom:24px;
}
.form-row{margin-bottom:16px}
.form-row label{
  display:block;color:var(--clr-muted);
  font-size:.82rem;font-weight:600;margin-bottom:6px;
}
.form-row input,
.form-row select{
  width:100%;background:var(--clr-bg);
  border:1.5px solid var(--clr-border);border-radius:var(--radius-sm);
  padding:11px 14px;color:var(--clr-text);
  font-family:var(--font-body);font-size:.95rem;
  outline:none;direction:rtl;transition:border-color var(--transition);
}
.form-row input:focus,.form-row select:focus{border-color:var(--clr-yellow)}
.calc-result{
  margin-top:20px;background:var(--clr-yellow-bg);
  border:1.5px solid rgba(245,200,66,.4);border-radius:var(--radius-md);
  padding:20px;text-align:center;
}
.calc-result__label{color:var(--clr-muted);font-size:.8rem;margin-bottom:6px}
.calc-result__value{
  font-family:var(--font-display);font-weight:900;
  font-size:2.2rem;color:var(--clr-yellow-dark);
}

/* ============================================================ LIGHTING */
.lighting-glow{
  position:absolute;top:-80px;left:50%;transform:translateX(-50%);
  width:600px;height:340px;
  background:radial-gradient(ellipse,rgba(245,200,66,.12) 0%,transparent 68%);
  pointer-events:none;
}
.light-card__icon{font-size:2.6rem;margin-bottom:16px;display:block}
.light-card__specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}

.lux-card{
  background:var(--clr-bg-card);border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);padding:16px 20px;
  display:flex;align-items:center;gap:14px;
  transition:border-color var(--transition);
}
.lux-card:hover{border-color:var(--clr-yellow)}
.lux-card__value{
  font-family:var(--font-display);font-weight:800;
  font-size:1.15rem;color:var(--clr-yellow-dark);min-width:76px;
}
.lux-card__room{color:var(--clr-text);font-size:.87rem;font-weight:500}

/* ============================================================ RESPONSIVE */
@media(max-width:768px){
  .page-hero{padding:52px 20px 40px}
  .ohm-showcase{margin:0 20px 32px;padding:32px 20px}
}

/* ── Mobile compact layout for calculators ── */
@media(max-width:600px){

  /* General section spacing */
  .section { padding-top: 36px; padding-bottom: 36px; }
  .section--alt { padding-top: 36px; padding-bottom: 36px; }

  /* Calc boxes tighter */
  .calc-box { padding: 16px 14px !important; }
  .calc-box__title { font-size: 1rem; margin-bottom: 14px; }

  /* Gap between calc boxes */
  #cc-pane-fwd > div,
  #cc-pane-rev > div { gap: 10px !important; }

  /* form-row spacing */
  .form-row { margin-bottom: 10px; }
  .form-row label { font-size: .78rem; margin-bottom: 4px; }
  .form-row input,
  .form-row select { padding: 8px 10px; font-size: .88rem; }

  /* VD fields: force 2 columns on mobile */
  .vd-fields-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 12px !important;
    max-width: 100% !important;
  }

  /* VD x0 row: full width */
  .vd-fields-grid .form-row[style*="grid-column:1/-1"] {
    grid-column: 1 / -1 !important;
  }

  /* Mode toggles full width */
  .vd-mode-toggle { max-width: 100% !important; }
  .vd-mode-btn { padding: 9px 8px; font-size: .80rem; }

  /* Material grid: 2 columns, compact */
  .vd-mat-grid {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
    gap: 8px;
  }
  .vd-mat-btn { padding: 9px 10px; font-size: .82rem; }
  .vd-mat-rho { font-size: .68rem; }

  /* VD components display */
  .vd-components { padding: 10px 12px; gap: 8px; }
  .vd-component-label { font-size: .70rem; }
  .vd-component-val { font-size: 1rem; }

  /* VD results */
  .vd-verdict { padding: 16px 14px; }
  #vd-res-dv { font-size: 1.9rem !important; }
  .vd-verdict-badge { font-size: .88rem; padding: 6px 12px; }
  .vd-result-row { padding: 9px 12px; font-size: .80rem; }

  /* CC basic params: 2 cols instead of 3 */
  #cc-pane-fwd [style*="grid-template-columns:1fr 1fr 1fr"],
  #cc-pane-rev [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* CC grouping 2-col grids stay 2 col */
  #cc-fg4, #cc-rg4,
  #cc-fg5, #cc-rg5 {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Temp correction 2 cols stay 2 cols */
  #cc-ftb [style*="grid-template-columns:1fr 1fr"],
  #cc-rtb [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* CC result box */
  .calc-result { padding: 16px 14px !important; }
  #cc-frv, #cc-rrv { font-size: 2rem !important; }

  /* Factors row: keep 4 cols but smaller */
  .calc-result [style*="grid-template-columns:repeat(4,1fr)"] {
    gap: 4px !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
  }

  /* Section headings less margin */
  .section__title { margin-bottom: 16px; font-size: 1.4rem; }
  p[style*="margin-bottom:36px"] { margin-bottom: 16px !important; }
  p[style*="margin-top:-24px"] { margin-top: -10px !important; }

  /* VD section spacing */
  #btn-1ph, #btn-3ph { padding: 8px 6px; font-size: .78rem; }
  div[style*="margin-bottom:28px"] { margin-bottom: 14px !important; }

  /* Pills compact */
  .cc-pill { padding: 5px 10px; font-size: .78rem; }
}

/* ── Basic params: 3-col with vertical pills ── */
.basic-params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.basic-params-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.bp-pill-full {
  width: 100%;
  text-align: center;
  justify-content: center;
}