/* ============================================================
   SCOPE-DETAIL PAGES (catalog · in-project · process)
   ============================================================ */
.scope-page .content { display: flex; flex-direction: column; }

/* Product catalog grid — 6 tiles in 3×2 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
  margin-top: 4mm;
}
.product-card {
  background: var(--cream);
  border-radius: 6px;
  border-top: 2px solid var(--gold);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-card .imgph {
  height: 38mm;
  border-radius: 0;
}
.product-card .pc-body { padding: 3mm 4mm; }
.product-card .pc-name {
  font-family: "Tajawal", sans-serif;
  font-size: 11pt; font-weight: 700; color: var(--navy);
  margin-bottom: 2px;
}
.product-card .pc-spec {
  font-family: "Inter", sans-serif;
  font-size: 8.5pt; color: var(--muted); line-height: 1.4;
}

/* In-Project tiles — 2x2 large */
.project-tile-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5mm;
  margin-top: 4mm;
}
.project-tile {
  background: var(--cream);
  border-radius: 6px;
  border-top: 2px solid var(--gold);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.project-tile .imgph {
  height: 56mm;
  border-radius: 0;
}
.project-tile .pt-body { padding: 3mm 4mm; }
.project-tile .pt-name {
  font-size: 12pt; font-weight: 700; color: var(--navy);
}
.project-tile .pt-en {
  font-family: "Inter", sans-serif;
  font-size: 9pt; color: var(--ink-soft); margin-top: 1px;
}
.project-tile .pt-qty {
  font-size: 9pt; color: var(--muted);
  margin-top: 4px; padding-top: 3px;
  border-top: 1px dashed var(--line);
}
.project-tile .pt-qty strong { color: var(--gold); }

/* Process strip — 4 steps */
.process-strip-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4mm;
  margin-top: 3mm;
}
.proc-strip-step {
  background: var(--cream);
  border-radius: 6px;
  border-top: 2px solid var(--gold);
  overflow: hidden;
  padding-bottom: 3mm;
}
.proc-strip-step .imgph {
  height: 32mm;
  border-radius: 0;
  margin-bottom: 3mm;
}
.proc-strip-step .pss-num {
  font-family: "Inter", sans-serif; font-weight: 800;
  font-size: 11pt; color: var(--gold);
  padding: 0 4mm;
}
.proc-strip-step .pss-title {
  font-size: 11pt; font-weight: 700; color: var(--navy);
  padding: 0 4mm; margin-top: 1px;
}
.proc-strip-step .pss-desc {
  font-size: 9pt; color: var(--ink-soft); line-height: 1.45;
  padding: 2px 4mm 0;
}

/* Macro grid — 4 close-ups */
.macro-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3mm;
  margin-top: 3mm;
  height: 36mm;
}
.macro-grid-4 .imgph { height: 100%; }

/* Temp banner — only on screen, hidden in print */
@media print {
  .temp-banner { display: none !important; }
}

/* Project × Scope Matrix */
.proj-matrix {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4mm;
  font-size: 9pt;
  table-layout: fixed;
}
.proj-matrix th, .proj-matrix td {
  border: 0.4pt solid #cdd5e0;
  padding: 1.6mm 1mm;
  text-align: center;
  vertical-align: middle;
}
.proj-matrix thead th {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  font-size: 9pt;
  letter-spacing: .4px;
}
.proj-matrix tbody tr:nth-child(odd) { background: #f6f8fb; }
.proj-matrix tbody tr:nth-child(even) { background: #fff; }
.proj-matrix td.pm-proj, .proj-matrix th.pm-proj {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  width: 38%;
  font-size: 8.5pt;
  padding-right: 2mm;
}
.proj-matrix td.pm-y {
  color: var(--gold);
  font-weight: 700;
  font-size: 11pt;
}

/* Macro caption under each macro tile */
.macro-grid-4 .macro-tile { display: flex; flex-direction: column; }
.macro-grid-4 .macro-tile .imgph { flex: 1; }
.macro-cap {
  font-size: 7.5pt;
  color: var(--navy);
  text-align: center;
  margin-top: 1mm;
  font-weight: 600;
  letter-spacing: .2px;
}

/* Utility classes (replacing repeated inline styles) */
.p-scope-intro { margin-top: 3mm; font-size: 10pt; }
.fine { font-size: 8pt; color: var(--ink-soft); }
.tac { text-align: center; }