/*
 * TFW Images
 *
 * Inherits the theme's own custom properties rather than restating colours, so
 * a future palette change moves these too. Fallbacks are supplied for every
 * token in case this stylesheet ever loads without the theme.
 *
 * Breakpoints are 1080px and 720px because those are the two the theme already
 * uses. Inventing a third would make the hero and the rows reflow at points
 * nothing else on the page reflows at.
 */

/* ---------- home hero ---------- */

/* The theme paints its card on .tfw-hero__copy rather than on the section, so
   dropping a figure in as a sibling leaves it stranded on the page background
   next to a bordered panel. The card is therefore promoted to the section and
   the copy is flattened, so copy and photograph share one surface.

   The photograph is inset with its own rounded corners rather than bled to the
   card edge, which is what the approved demo specified. */
.tfw-hero--img {
	grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
	/* The copy's own 34px padding supplies the space between text and photo,
	   so the gap is zero and the figure pads its remaining three sides. */
	gap: 0;
	align-items: center;
	background: var(--tfw-surface, #fff);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: var(--tfw-radius-lg, 28px);
	box-shadow: var(--tfw-shadow, 0 18px 40px rgba(15, 23, 42, 0.08));
}

/* Copy stays first in the document, so reading order and the h1 are unchanged
   for a crawler and a screen reader, and the photograph is placed to the right
   visually. Its own card treatment is removed because the section now carries
   it, otherwise there would be a panel drawn inside a panel. */
.tfw-hero--img > .tfw-hero__copy {
	order: 1;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Matches the copy's 34px on the three outer sides. */
.tfw-img-hero {
	order: 2;
	margin: 0;
	padding: 34px 34px 34px 0;
}

.tfw-img-hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	/* Held at the demo's radius rather than a theme token, because the theme
	   radii resolve to 6px here and the demo shows a visibly softer corner. */
	border-radius: 12px;
	background: var(--tfw-surface-alt, rgba(241, 245, 252, 0.9));
}

/* Matches the theme's own hero collapse. The photo leads the card because at
   the foot of a collapsed hero it fell below the fold on a phone, which meant
   the machine was never seen on the screen that matters most. */
@media (max-width: 1080px) {
	.tfw-hero--img {
		grid-template-columns: 1fr;
	}

	.tfw-img-hero {
		order: 0;
		padding: 24px 24px 0;
	}

	.tfw-img-hero img {
		aspect-ratio: 16 / 9;
	}
}

/* ---------- machine page lead image ---------- */

/* Deliberately small. The job of a spec page is to be read, so the photograph
   confirms the machine and then gets out of the way. */
figure.tfw-img-lead {
	margin: 0 0 22px;
	max-width: 340px;
}

figure.tfw-img-lead img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--tfw-radius-sm, 12px);
	border: 1px solid var(--tfw-border, rgba(148, 163, 184, 0.22));
	background: var(--tfw-surface-alt, rgba(241, 245, 252, 0.9));
}

figure.tfw-img-lead figcaption {
	margin-top: 6px;
	color: var(--tfw-text-soft, #475569);
	font-size: 0.7rem;
	line-height: 1.4;
}

@media (max-width: 720px) {
	figure.tfw-img-lead {
		max-width: 100%;
	}
}

/* ---------- browse row thumbnails ---------- */

/* The theme's card is already a two column grid of body and price. The
   thumbnail adds a fixed leading column rather than changing either of them. */
.tfw-list-card--img {
	grid-template-columns: 104px minmax(0, 1fr) auto;
	align-items: center;
}

.tfw-img-thumb {
	display: block;
	width: 104px;
	height: 70px;
}

.tfw-img-thumb img {
	display: block;
	width: 104px;
	height: 70px;
	object-fit: cover;
	border-radius: var(--tfw-radius-sm, 12px);
	border: 1px solid var(--tfw-border, rgba(148, 163, 184, 0.22));
	background: var(--tfw-surface-alt, rgba(241, 245, 252, 0.9));
}

/* Holds the column on the minority of rows with no photograph, so every title
   below it stays on the same left edge. */
.tfw-img-thumb--empty {
	border-radius: var(--tfw-radius-sm, 12px);
	border: 1px dashed var(--tfw-border, rgba(148, 163, 184, 0.22));
	background: var(--tfw-surface-alt, rgba(241, 245, 252, 0.9));
}

/* The theme collapses the card to a single column here. The thumbnail keeps a
   leading column and the price is pulled under the body rather than being
   stranded in a third row of its own. */
@media (max-width: 720px) {
	.tfw-list-card--img {
		grid-template-columns: 84px minmax(0, 1fr);
		gap: 12px;
		/* Aligns the thumbnail with the first line of the title rather than
		   floating it against the middle of a three line heading. */
		align-items: start;
	}

	.tfw-list-card--img > .tfw-price-block {
		grid-column: 2;
	}

	.tfw-img-thumb,
	.tfw-img-thumb img {
		width: 84px;
		height: 58px;
	}
}