/* /en/reserve only (RV_LANG=en; site/css/reserve-en.css, loaded after reserve-r6f3.css on the English page).
   English words are longer than Chinese: only the places that need it. Every rule starts with .rv-r6f3. */

/* hero h1 = Chinese title + Kalam English line inside the h1 (as /en/access, /en/rental): the Chinese span carries the
   kit title look (block, confetti), the h1 itself keeps the title size so the English line keeps its own 22px */
.rv-r6f3 h1[data-rv-h1] { font-size: 33px; line-height: 1.25; }
.rv-r6f3 span.rs-hero__title { display: block; }
@media (min-width: 768px) {
  .rv-r6f3 h1[data-rv-h1] { font-size: 48px; }
}
@media (min-width: 1280px) {
  .rv-r6f3 h1[data-rv-h1] { font-size: 52px; }
}

/* phones: the English lead runs the full width, right where the small snow dot .rs-fl--4 sits (Chinese lead is shorter) */
@media (max-width: 767px) {
  .rv-r6f3 .rs-hero .rs-fl--4 { display: none; }
}

/* Class Process switch: "Half-day lesson (afternoon)" is about twice the Chinese label; from 768 the bar may grow so
   each button stays one line when there is room (phones: two lines inside the button, as before) */
@media (min-width: 768px) {
  .rv-r6f3 .rs6-seg--3 { max-width: 780px; }
}
/* phones: three buttons in a row would need three lines each ("Half-day / lesson / (afternoon)"): Full-day lesson takes
   the first row, the two half-day buttons share the second row (two lines each at most) */
@media (max-width: 599px) {
  .rv-r6f3 .rs6-seg--3 { flex-wrap: wrap; border-radius: 26px; }
  .rv-r6f3 .rs6-seg--3 .rs-seg__btn:first-child { flex-basis: 100%; }
}

/* fees, course cards (the card layout below the wide table): each multi-day line is "Day 2 | ¥5,000 off regular price";
   English does not fit one row in a 228-300px card (the label was drawn under the amount), so the label sits on the
   left and the amount and "off regular price" stack on the right. No media query: these grid properties only act where
   the card layout makes the cell a grid (in the wide table the cell is a table cell and ignores them). */
.rv-r6f3 .rs6f3-table .rs6f3-row > .rs6f3-off { grid-template-columns: minmax(max-content, 1fr) auto; row-gap: 0; text-align: right; }
.rv-r6f3 .rs6f3-table .rs6f3-row > .rs6f3-off::before { grid-row: span 2; align-self: start; padding-top: 3px; text-align: left; }
.rv-r6f3 .rs6f3-table .rs6f3-row > .rs6f3-off > .rs-off { justify-self: end; }
/* "1–2 students  ¥85,000" is 2-10px wider than the 600-703px two-card layout: the price may drop under the party,
   kept on the right (flex-wrap / auto margin only act where the card layout makes the cell a flex box) */
.rv-r6f3 .rs6f3-table .rs6f3-row > .rs6f3-price { flex-wrap: wrap; column-gap: 8px; }
.rv-r6f3 .rs6f3-table .rs6f3-row > .rs6f3-price > .rs-price { margin-left: auto; }
@media (max-width: 1199px) {   /* G7（整合者 11/10）：課程卡模式延到 <1200 */
  /* "Afternoon: 13:00–16:00" wraps after the label instead of running out of a narrow card; no lone "break" */
  .rv-r6f3 .rs6f3-table .rs6f3-row > .rs6f3-time .rs-time__main { white-space: normal; }
  .rv-r6f3 .rs6f3-table .rs6f3-row > .rs6f3-time .rs-time__sub { text-wrap: pretty; }
}

/* fees wide table (>= 1200; G7（整合者 11/10）寬表起點 1100 → 1200): "¥5,000 off regular price" is ~3x the Chinese cell; the amount stays one red line and the
   words go under it, so the six columns fit the 820-1000px column (Chinese: one line, nowrap) */
@media (min-width: 1200px) {
  .rv-r6f3 .rs6f3-table .rs6f3-row > .rs6f3-off { padding-inline: 8px; line-height: 1.5; text-align: center; }
  .rv-r6f3 .rs6f3-off .rs-off { display: block; }
}
/* below 1280 the column is 920-999px: the course name may take two lines (Full-day / lesson) */
@media (min-width: 1200px) and (max-width: 1279px) {
  .rv-r6f3 .rs6f3-table .rs6f3-course { white-space: normal; }
  .rv-r6f3 .rs6f3-table .rs6f3-course > span { min-width: 4.9em; max-width: 6em; }   /* never "Full- / day" */
}

/* 整合者 11/10：英文寬表最右欄（Day 3）離卡片右緣只有 9px，補右內距（表頭與表身一起，置中才對得齊） */
@media (min-width: 1200px) {
  .rv-r6f3 .rs6f3-table .rs6f3-row > .rs6f3-off--d3, .rv-r6f3 .rs6f3-table thead .rs6f3-cols > th:last-child { padding-right: 18px; }
}