/* =====================================================================
   ADU models: /adu-models and /adu-models/<slug> (md- prefix)
   Cards live in styles.css. Model pages also load projects.css (pj-dhero, pj-facts, lightbox).
   ===================================================================== */

/* ---------- Lineup page ---------- */
.md-hero { padding-bottom: 20px; }
.md-hero .h1 { margin-top: 10px; }
.md-hero .hx-lead { margin-top: 16px; max-width: 700px; }
.md-sec-top { padding-bottom: 70px; }
.md-sec-top .md-row { margin-top: 10px; }

.md-table-wrap { margin-top: 36px; overflow-x: auto; }
.md-table { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; font: 400 16px/1.4 var(--f-inter); }
.md-table th, .md-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.md-table thead th { font: 600 15px/1.2 var(--f-dg); letter-spacing: 0.05em; text-transform: uppercase; color: var(--red-bright); background: var(--off); }
.md-table tbody th { font-weight: 600; }
.md-table tbody th a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.md-table tbody th a:hover { color: var(--red-bright); }
.md-table tbody tr:hover { background: var(--off); }

.md-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.md-steps li { padding: 30px; background: #fff; }
.md-steps h3 { margin-top: 16px; font: 500 22px/1.2 var(--f-dm); text-transform: uppercase; color: var(--ink); }
.md-steps p { margin-top: 10px; font: 400 16px/1.5 var(--f-inter); color: var(--ink-soft); }
.md-custom { margin-top: 30px; font: 400 17px/1.5 var(--f-inter); }
.md-custom a { color: var(--red-bright); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Model page ---------- */
.md-dhero .pj-dimg img { aspect-ratio: 16 / 9; }
.md-dhero .pj-dimg a { display: block; cursor: zoom-in; }
.md-dcost { margin-top: 20px; font: 400 16px/1.4 var(--f-inter); color: var(--ink-soft); }
.md-dcost b { display: block; font: 500 34px/1.1 var(--f-dm); color: var(--ink); margin: 2px 0 4px; }

.md-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 60px; align-items: center; scroll-margin-top: 90px; }
.md-plan { margin: 0; }
.md-plan a { display: block; background: #fff; padding: 16px; cursor: zoom-in; box-shadow: inset 0 0 0 1px var(--line); }
.md-plan img { display: block; width: 100%; height: auto; }
.md-plan figcaption { margin-top: 10px; font: 600 14px/1.2 var(--f-dg); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.md-layout-text .checks { margin-top: 20px; gap: 12px; }
.md-layout-text .checks svg { width: 24px; height: 24px; }

.md-yours .hx-big { margin-top: 10px; }
.md-price { border-left: 1px solid var(--line); padding-left: 60px; margin-left: -60px; }

.md-row.md-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1199px) {
  .md-layout { grid-template-columns: 1fr; gap: 30px; }
  .md-steps { grid-template-columns: 1fr; }
}
@media (max-width: 809px) {
  .md-hero { padding-top: 30px; }
  .md-sec-top { padding-bottom: 40px; }
  .md-steps li { padding: 22px; }
  .md-plan a { padding: 8px; }
  .md-price { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--line); padding-top: 30px; }
  .md-dcost b { font-size: 28px; }
}

/* Keep sizes and price ranges on one line in the compare table (phone) */
html.v2 .md-table td:nth-child(2), html.v2 .md-table td:last-child { white-space: nowrap; }