/* Recast a finished ad: 16:9 comparisons. Landscape takes fill the article width in two columns and
   stack on phones; the 9:16 input sits beside its note. Detail strips are full-size crops. */
.recast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 24px; align-items: stretch; }
.recast-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recast-grid .article-take-card { min-width: 0; max-width: none; padding: 12px; }
.recast-grid .article-take-card-head { display: block; min-height: 64px; }
.recast-grid .article-take-card-head .article-take-number { margin: 0 0 6px; font: 12px/1.5 var(--face); color: var(--light); }
.recast-grid .article-take-card-head h3 { font-size: 18px; line-height: 1.35; }
.recast-grid .article-take-media { aspect-ratio: 16 / 9; margin-top: 10px; background: var(--well); }
.recast-grid .article-take-media video { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; }
.recast-input { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 24px; }
.recast-input video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border: 1px solid var(--edge-strong); }
.recast-input p { margin-top: 0; }
.recast-detail { margin: 18px 0 0; }
.recast-detail img { display: block; width: 100%; height: auto; border: 0; }
.recast-detail figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-quiet); }
.article-body > .article-prompt-button { margin-top: 18px; }
@media (max-width: 949px) {
  .recast-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .recast-grid, .recast-grid--three { grid-template-columns: 1fr; }
  .recast-grid .article-take-card-head { min-height: 0; }
  .recast-input { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 16px; }
}