/**
 * Print Profile: Math
 * V7.2 Multi-Site Platform
 *
 * Specialized print styles for arithmetic/math sites.
 * Optimized for 20-problem worksheets in 2-column layout on US Letter paper.
 * Target: 20 problems fit on one page with large, readable text.
 *
 * Supports both traditional templates and Detail Atom rendering.
 */

/* Math problems grid - 2 columns for typical 20-problem sets */
.problems-grid[data-profile="arithmetic"],
.problems-grid[data-profile="math"],
.form-exercise-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4mm 6mm !important; /* Increased gaps for better page fill */
  margin-top: 2mm !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Individual math problem */
.problems-grid[data-profile="arithmetic"] .problem-item,
.problems-grid[data-profile="math"] .problem-item,
.form-problem {
  display: grid !important;
  grid-template-columns: 10mm minmax(0, 1fr) 22mm !important; /* Keep long prompts inside the printable page */
  align-items: center !important;
  column-gap: 4mm !important; /* Increased for better spacing */
  min-height: 18mm !important; /* Increased from 10mm to fill page better (20 problems × 18mm = 360mm / 2 cols = 180mm per col) */
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  justify-content: start !important;
  page-break-inside: avoid !important;
  break-inside: avoid !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.problems-grid[data-profile="arithmetic"] .problem-item:has(.problem-visual-print),
.problems-grid[data-profile="math"] .problem-item:has(.problem-visual-print) {
  grid-template-columns: 7mm minmax(0, 1fr);
  grid-template-areas:
    "num question"
    "num visual"
    "num answer";
  align-items: start !important;
  row-gap: 2mm !important;
  min-height: 58mm !important;
  padding: 2mm !important;
  border: 0.8pt solid #d1d5db !important;
  border-radius: 2mm !important;
}

.problem-item:has(.problem-visual-print) .problem-number {
  grid-area: num;
  padding-top: 1mm;
}

.problem-item:has(.problem-visual-print) .problem-expression {
  grid-area: question;
  font-size: 13pt !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
}

.problem-visual-print {
  grid-area: visual;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 34mm !important;
  border: 0.8pt solid #d1d5db !important;
  border-radius: 1.5mm !important;
  padding: 1mm !important;
  overflow: hidden !important;
}

.problem-visual-print svg {
  width: 72mm !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 44mm !important;
}

.problem-visual-print--compact {
  min-height: 24mm !important;
}

.problem-visual-print--compact svg {
  width: 44mm !important;
  max-height: 34mm !important;
}

.problem-item:has(.problem-visual-print) .problem-answer-space {
  grid-area: answer;
  justify-self: end;
  width: 26mm !important;
  height: 7mm !important;
}

.problem-number,
.problem-label {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-size: 13pt !important; /* Increased for larger layout */
  line-height: 1 !important;
  text-align: left !important;
}

.problem-number::after {
  content: "." !important;
  margin-left: 0.5mm !important;
}

.problem-content.problem-expression,
.problem-expression,
.form-expression {
  font-size: 22pt !important; /* Increased for better page fill and readability */
  font-weight: 700 !important;
  font-family: Arial, sans-serif !important;
  letter-spacing: 0 !important;
  white-space: pre-line !important;
  overflow-wrap: anywhere !important;
  min-width: 0 !important;
}

.problem-equals {
  font-weight: 700 !important;
  margin-left: 1mm !important;
}

/* Answer space (worksheet mode) */
.problem-answer-space,
.form-answer-space {
  width: 22mm !important; /* Increased to match grid column width */
  height: 11mm !important; /* Increased for larger layout */
  border-bottom: 1.8px solid #111 !important;
}

/* Answer filled (answer-key mode) */
.problem-answer-filled,
.form-answer-filled {
  width: 22mm !important; /* Increased to match answer space */
  min-height: 10mm !important;
  border: 1.5px solid #111 !important;
  border-radius: 1.2mm !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18pt !important; /* Increased for larger layout */
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Ensure proper spacing for larger problem sets */
@media print {
  .problems-grid[data-profile="arithmetic"],
  .problems-grid[data-profile="math"] {
    orphans: 2;
    widows: 2;
  }
}