/* Home page: three section tones (white / faint gray / light gray), same structure as
   globaluf.cn. Red kept for the primary button and logo only. Loaded after components.css. */

:root {
	--bg-light: #ffffff;
	--bg-mid:   #f6f8f9;
	--bg-dark:  #eceff2;
}

/* ---------------------------------------------------------------- section tones */
.rp-bg-light { background: var(--bg-light); --surface-1: #f2f4f6; }
.rp-bg-mid   { background: var(--bg-mid);   --surface-1: #eceff2; }
.rp-bg-dark  { background: var(--bg-dark);  --surface-1: #e2e6ea; --line: #d6dbe0; }
.rp-bg-mid .rp-machine:not(.rp-machine--small), .rp-bg-mid .rp-story,
.rp-bg-dark .rp-machine:not(.rp-machine--small), .rp-bg-dark .rp-story { background: #fff; }
.rp-bg-light .rp-machine--small { background: var(--bg-dark); border-color: var(--bg-dark); }
.rp-band { background: transparent; }

/* ---------------------------------------------------------------- less red */
.rp-hero .rp-keyspec__value,
.rp-story__results b,
.rp-line__no,
.rp-feature::before,
.rp-step::before { color: var(--ink); }
.rp-feature::before, .rp-step::before, .rp-line__no { color: var(--ink-muted); }
.rp-btn--tertiary { color: var(--ink); border-color: var(--ink); }
.rp-btn--tertiary:hover { background: var(--ink); color: #fff; }
.rp-card__more, .rp-lines__head a, .rp-inq__mail { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rp-card__more:hover { color: var(--brand); }
.rp-home a:not(.rp-btn):hover { color: var(--brand); }
.rp-inq__card { border-top-color: var(--ink); }

/* ---------------------------------------------------------------- hero: company intro */
.rp-hero { border-bottom: 0; padding-bottom: var(--s8); }
.rp-hero h1 { font-size: clamp(34px, 3.8vw, 50px); }
.rp-hero__media { aspect-ratio: 3 / 2; }
.rp-nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- applications: narrow stacked photos, same height as the text */
.rp-split--top { grid-template-columns: 280px minmax(0, 1fr); align-items: center; }
.rp-apps__media { grid-template-columns: 1fr; gap: var(--s3); }
.rp-apps__media .rp-media { aspect-ratio: auto; background: transparent; }
.rp-apps__media .rp-media img { height: auto; object-fit: contain; }
.rp-apps__media figcaption { display: none; } /* bottle sizes are printed on the photos */

/* ---------------------------------------------------------------- factory: photo fills the column */
.rp-factory { align-items: stretch; }
.rp-factory__main { aspect-ratio: auto; min-height: 360px; height: 100%; }
.rp-factory__main img { height: 100%; }
.rp-bg-mid .rp-factory__thumbs .rp-media { border-color: var(--line); }

/* ---------------------------------------------------------------- inquiry */
.rp-home .rp-inq { background: var(--bg-mid); }
.rp-home .rp-inq .rp-inq__card { --surface-1: #f2f4f6; border: 1px solid var(--line); border-top: 4px solid var(--ink); }

@media (max-width: 1024px) {
	.rp-split--top { grid-template-columns: 1fr; }
	.rp-apps__media { grid-template-columns: 1fr 1fr; }
	.rp-factory__main { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
}