/* Micro-TESE page styles.
   The retrieval estimator reuses the quiz chrome from page-male-infertility.css
   and the estimator layout from page-vasectomy-reversal.css; the overview photo
   reuses .vr-overview from the latter. Only the six-option cause grid lives here. */

.est-body .mt-opts{grid-template-columns:repeat(2,1fr)}
@media (max-width:700px){.est-body .mt-opts{grid-template-columns:1fr}}

/* Keep "Micro-TESE" on one line in headings; browsers otherwise break at the hyphen. */
.mt-nowrap{white-space:nowrap}

/* The display serif draws its hyphen long and low, so in headings it reads like an
   underscore. Borrow the sans hyphen, which is short and sits at mid-height. */
.mt-hyphen{font-family:var(--font-sans);font-weight:300;margin:0 .1em}

/* Six cards: the shared card grid centres boxes 4 and 5 for a 3 + 2 layout,
   which pushes a sixth box onto its own row. Lay six out as 3 + 3 instead. */
@media (min-width:769px){
  .def-list--six .def-item:nth-child(4),
  .def-list--six .def-item:nth-child(5){grid-column:span 2}
}

/* Section backgrounds alternate white and beige down the page. */
section.mt-bg-alt{background:var(--c-bg-alt)}
section.mt-bg-white{background:var(--c-bg)}

/* Show the whole diagram (labels sit near the edges). The shared cover rule can
   load after the diagram rule, so raise specificity to keep contain. */
.itype-panel-img.itype-panel-img--diagram{aspect-ratio:3 / 2;background:#fff}
.itype-panel-img.itype-panel-img--diagram img{object-fit:contain}

/* Retrieval Estimator: square corners on the card and every box inside it. */
#retrieval-estimator .quiz-card,#retrieval-estimator .quiz-card *{border-radius:0}