/* Sale-ad test: built on the comparison page's styles (../ai-systems-comparison/page.css).
   Only what differs lives here: tall 3:4 ads, the "task" block, and one-picture research cards. */

/* hero without the picture mosaic */
.hero--plain { grid-template-columns: minmax(0, 1fr); }
.hero--plain > * { grid-column: 1; }
.hero--plain a { color: var(--accent-2); }

/* the task: the photo, the original ad, the prompt */
.task { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-xs-s); align-items: start; }
.task > .prompt { grid-column: span 2; }
@media (max-width: 900px) { .task > .prompt { grid-column: auto; } }
.task__fig { margin: 0; display: grid; gap: var(--space-2xs); }
.task__fig figcaption { color: var(--muted); font-size: var(--t-xs); }
.task__img { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--card); cursor: zoom-in; }
.task__img img { width: 100%; height: auto; }
.howto { margin: var(--space-3xs) 0 0; padding-inline-start: 1.1em; display: grid; gap: var(--space-3xs); font-size: var(--t-xs); color: var(--muted); }
.howto b { color: var(--ink); font-weight: 600; }

/* ads are 3:4 portraits, so the gallery shows them whole */
.grid--tall { grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(13rem, 13vw, 22rem)), 1fr)); }
@media (max-width: 560px) { .grid--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card__img--tall { aspect-ratio: 3 / 4; background: var(--card-2); }
.card__img--tall img { object-fit: contain; }

/* verdict: a yellow edge for "one or two mistakes", and a closing note */
.v--mid { border-top-color: var(--s-c); }
#verdict .note { margin-top: var(--space-xs); max-width: 90ch; padding: var(--space-xs) var(--space-s); border-radius: 8px; background: var(--card); border-inline-start: 3px solid var(--accent-2); }

/* research cards: the ad on one side, the notes on the other */
.rc__ad { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-xs); align-items: start; }
.rc__img--tall { aspect-ratio: 3 / 4; }
.rc__img--tall img { object-fit: contain; }
@media (max-width: 420px) { .rc__ad { grid-template-columns: 1fr; } }