/*
 * Component "trade" (components/trade.php): the travel-advisors page as a trade sheet. Swiss-leaning: a letterhead strip,
 * ink hairlines, numbered terms, printer's crop marks around the one photo, a façade sheet per hacienda. Tokens only (rmh-landing.css
 * --l-*), px only (rem = 10 px here). Motion: the term rules draw in (transform) and their words rise (opacity, transform),
 * only with trade.js and never under reduced motion.
 */

/* ---------- Draft flags (?rmh_draft=1 only) ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-trade__draft {
	margin-bottom: 24px; padding: 10px 14px; border: 1px dashed var(--l-taupe-deep); background: var(--l-white);
	font: 500 14px/1.45 var(--l-sans); color: var(--l-ink);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-trade__held {
	display: block; margin-top: 12px; padding: 8px 12px; border: 1px dashed var(--l-taupe-deep); background: var(--l-white);
	font: 400 15px/1.45 var(--l-sans); color: var(--l-ink);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-trade__flag {
	display: block; margin-bottom: 2px; font: 600 12px/1.4 var(--l-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--l-taupe-deep);
}

/* ---------- Letterhead ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head { padding-block: clamp(28px, 4vw, 56px) clamp(48px, 7vw, 96px); }
:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__strip {
	display: flex; flex-wrap: wrap; gap: 4px 20px; padding-bottom: 14px; margin-bottom: clamp(28px, 3.6vw, 48px);
	border-bottom: 1px solid var(--l-ink); font: 600 12px/1.4 var(--l-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--l-ink-soft);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__grid { display: grid; gap: 40px; align-items: end; }
:is(#rmh-landing, .rmh-lc) h1.rmh-l-trade-head__title:not(#_) {
	font-size: clamp(40px, 22px + 3.8vw, 80px); line-height: 1.02; letter-spacing: -.01em; max-width: 12ch; color: var(--l-ink);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__line { margin-top: 22px; max-width: 40ch; font-size: clamp(18px, 15px + .5vw, 21px); line-height: 1.5; }
:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin-top: 32px; }
/* the one photo, mounted like a proof: four printer's crop marks just outside its corners */
:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__figure {
	--mark: 16px; position: relative; padding: 12px;
	background:
		linear-gradient(var(--l-ink) 0 0) left top / var(--mark) 1px no-repeat, linear-gradient(var(--l-ink) 0 0) left top / 1px var(--mark) no-repeat,
		linear-gradient(var(--l-ink) 0 0) right top / var(--mark) 1px no-repeat, linear-gradient(var(--l-ink) 0 0) right top / 1px var(--mark) no-repeat,
		linear-gradient(var(--l-ink) 0 0) left bottom / var(--mark) 1px no-repeat, linear-gradient(var(--l-ink) 0 0) left bottom / 1px var(--mark) no-repeat,
		linear-gradient(var(--l-ink) 0 0) right bottom / var(--mark) 1px no-repeat, linear-gradient(var(--l-ink) 0 0) right bottom / 1px var(--mark) no-repeat;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__figure .rmh-l__caption { margin-top: 10px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__facts { margin-top: clamp(36px, 4.4vw, 56px); padding-top: 28px; border-top: 1px solid var(--l-ink); }
@media (min-width: 768px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__strip { justify-content: space-between; }
}
@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: clamp(48px, 6vw, 96px); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-trade-head__img { aspect-ratio: 4 / 3; }
}

/* ---------- Terms: numbered rows on hairlines ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-terms { border-bottom: 1px solid var(--l-ink); }
:is(#rmh-landing, .rmh-lc) .rmh-l-terms__row {
	position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; padding-block: 24px 28px;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-terms__row::before {
	content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--l-ink); transform-origin: left center;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-terms__num { font: 400 18px/1.3 var(--l-serif); color: var(--l-taupe-deep); letter-spacing: .04em; }
:is(#rmh-landing, .rmh-lc) h3.rmh-l-terms__term:not(#_) {
	font-family: var(--l-serif) !important; font-weight: 400; font-size: clamp(24px, 18px + 1.2vw, 34px); line-height: 1.12;
	letter-spacing: -.005em; text-transform: none; color: var(--l-ink); margin: 0;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-terms__text { grid-column: 2; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--l-ink-soft); }
:is(#rmh-landing, .rmh-lc) .rmh-l-terms__notes { display: grid; gap: 24px; margin-top: clamp(36px, 5vw, 56px); }
:is(#rmh-landing, .rmh-lc) .rmh-l-terms__notes li + li { padding-top: 20px; border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-terms__note-label {
	display: block; margin-bottom: 6px; font: 600 12px/1.4 var(--l-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--l-taupe-deep);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-terms__notes p { font-size: 16px; line-height: 1.55; color: var(--l-ink); max-width: 46ch; }
/* The terms on a dark band (the agency-link section, 10-16): white text, hairlines in white. */
:is(#rmh-landing, .rmh-lc) .rmh-l__band--ink .rmh-l-terms { border-bottom-color: rgba(255, 255, 255, .5); }
:is(#rmh-landing, .rmh-lc) .rmh-l__band--ink .rmh-l-terms__row::before { background: rgba(255, 255, 255, .5); }
:is(#rmh-landing, .rmh-lc) .rmh-l__band--ink .rmh-l-terms__num,
:is(#rmh-landing, .rmh-lc) .rmh-l__band--ink .rmh-l-terms__note-label { color: var(--l-taupe); }
:is(#rmh-landing, .rmh-lc) .rmh-l__band--ink h3.rmh-l-terms__term:not(#_),
:is(#rmh-landing, .rmh-lc) .rmh-l__band--ink .rmh-l-terms__notes p { color: var(--l-white); }
:is(#rmh-landing, .rmh-lc) .rmh-l__band--ink .rmh-l-terms__text { color: rgba(255, 255, 255, .82); }
:is(#rmh-landing, .rmh-lc) .rmh-l__band--ink .rmh-l-terms__notes li + li { border-top-color: rgba(255, 255, 255, .2); }
@media (min-width: 768px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-terms__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-terms__notes li + li { padding-top: 0; border-top: 0; }
}
@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-terms__row {
		grid-template-columns: 88px minmax(0, 5fr) minmax(0, 7fr); column-gap: 32px; align-items: baseline; padding-block: 36px 40px;
	}
	:is(#rmh-landing, .rmh-lc) .rmh-l-terms__num { font-size: 22px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-terms__text { grid-column: 3; }
}
/* trade.js marks the rows ([data-t]) only when motion is welcome: each rule draws left to right, then its words rise */
@media (prefers-reduced-motion: no-preference) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-terms__row[data-t]::before { transition: transform 1s var(--l-ease); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-terms__row[data-t] > * { transition: opacity .8s var(--l-ease) .15s, transform .8s var(--l-ease) .15s; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-terms__row[data-t]:not(.is-drawn)::before { transform: scaleX(0); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-terms__row[data-t]:not(.is-drawn) > * { opacity: 0; transform: translateY(12px); }
}

/* ---------- Sheets: one façade per hacienda ---------- */
:is(#rmh-landing, .rmh-lc) .rmh-l-sheets { display: grid; gap: 0; border-bottom: 1px solid var(--l-ink); }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet {
	position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; align-items: start;
	padding-block: 20px; border-top: 1px solid var(--l-ink);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet:focus-within { outline: 2px solid var(--l-ink); outline-offset: 6px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__frame {
	aspect-ratio: 119 / 193; overflow: hidden; background: var(--l-sand);
	-webkit-mask: var(--facade) center / 100% 100% no-repeat; mask: var(--facade) center / 100% 100% no-repeat;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__img { width: 100%; height: 100%; object-fit: cover; }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__num { display: block; font: 400 14px/1 var(--l-serif); letter-spacing: .08em; color: var(--l-taupe-deep); }
:is(#rmh-landing, .rmh-lc) h3.rmh-l-sheet__name:not(#_) {
	margin: 8px 0 0; font-family: var(--l-serif) !important; font-size: 22px; font-weight: 400; line-height: 1.1;
	letter-spacing: .08em; text-transform: uppercase; color: var(--l-ink);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__name a { text-decoration: none; transition: color .2s; }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__name a::after { content: ""; position: absolute; inset: 0; } /* the whole sheet is the link */
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet:hover .rmh-l-sheet__name a { color: var(--l-taupe-deep); }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__name a:focus-visible { outline: none; box-shadow: none; }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__facts { margin: 12px 0 0; }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__facts div { display: flex; justify-content: space-between; gap: 12px; padding-block: 7px; border-top: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__facts dt { font: 600 12px/1.5 var(--l-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--l-ink-soft); }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__facts dd { margin: 0; font: 600 15px/1.4 var(--l-sans); color: var(--l-ink); text-align: right; }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__pick { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--l-ink-soft); }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheets__notes { display: grid; gap: 14px; margin-top: 32px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheets__notes p { font-size: 15px; line-height: 1.55; color: var(--l-ink); max-width: 60ch; }
:is(#rmh-landing, .rmh-lc) .rmh-l-sheets__notes p:last-child { color: var(--l-ink-soft); }
@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-sheets { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); border-bottom: 0; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-sheet { display: block; padding-block: 24px 0; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__frame { width: min(100%, 220px); margin-bottom: 24px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-sheets__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--l-ink); }
}
@media (prefers-reduced-motion: no-preference) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-sheet__img { transition: transform 1s var(--l-ease); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-sheet:hover .rmh-l-sheet__img { transform: scale(1.05); }
}