/* Slide items 8 + 12 · a POC (not final): the globe as the journeys example sizes it, the card beside it, and the popover
   toward the example's. Home page only, loaded last. Older rules still carry .world-status — refinement.css hides it
   (display:none!important), final-theme.css boxes it with a "TRIP DATA LINKED" line and a slide-in — so this sets what
   it needs with !important and turns those off. */

/* 8 · the globe: min(48vw, 690px) as the example, from 781 px (refinement.css made it the whole column). Phones as before. */
@media (min-width: 781px) {
  .world-hero .globe-wrap { width: min(48vw, 690px) !important; }
}

/* 12 · where the card goes, with the globe in the middle of the page at every width, as the example keeps it (owner,
   17 Sep: "ปรับลูกโลกให้อยู่ตรงกลางเสมอ"). The example lays its copy and card over the globe; here they stay clear of it.
   From 1024 px: copy | globe | card, the globe's buttons under it. The copy's and the card's columns are the same
   minmax(280px, 1fr), so a wide monitor's spare width goes either side of the globe — the copy's column used to take all
   of it, and at 2560 × 970 the globe sat against the card, 507 px right of the middle. The globe keeps the example's
   min(48vw, 690px) and gives way only where a side would fall under 280 px, the copy's widest line being 271 px ("กัน"
   alone on a line otherwise): 1366 → 656 as before, 1280 → 592, 1024 → 362. No gap between the columns, as the sphere
   is round and its box's corners are empty; the card keeps its 250–280 px at the right-hand edge, so a little of its
   column stays clear beside the globe. The card at the top, so its ← → stay above the fixed "Let's Talk Travel" (bottom
   right) on 768–800 px high laptops. 781–1023 px (tablets upright): one column — the copy, then the globe and its
   buttons in the middle, the card under them. Up to 780 px: the same order, refinement.css's. */
@media (min-width: 1024px) {
  .world-hero {
    grid-template-columns: minmax(280px, 1fr) minmax(0, min(48vw, 690px)) minmax(280px, 1fr) !important;
    grid-template-areas: "copy globe card" ". controls ." ". feedback ." !important;
    column-gap: 0 !important;
  }
  .world-hero .globe-wrap { width: 100% !important; }  /* its column: min(48vw, 690px), or less where the sides need their 280 px */
  .world-hero .world-status { align-self: start; justify-self: end; width: clamp(250px, 19vw, 280px) !important; }
}
@media (min-width: 781px) and (max-width: 1023px) {
  .world-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "copy" "globe" "controls" "feedback" "card" !important;
    row-gap: 24px !important;
  }
  .world-hero .world-status { justify-self: center; width: min(100%, 560px) !important; }
}
@media (min-width: 781px) {
  .world-hero .world-copy { grid-area: copy; }
  .world-hero .globe-wrap { grid-area: globe; }
  .world-hero .world-status { grid-area: card; }
  .world-hero .globe-controls { grid-area: controls !important; }
  .world-hero .globe-feedback { grid-area: feedback !important; }
}

/* The globe's round buttons — × on the popover, ← → on the card and under the globe (owner, 17 Sep: "ปุ่ม ลูกศร ปุ่ม
   -> <- ปิด ลูกโลก เล็กแบบประหลาด"). refinement.css gives every button font-size:16px!important and min-height:48px, so
   the glyphs drew at body size and the 40/44 px circles were stretched to 48 px tall ovals. Circles are 48 × 48 now (the
   same touch target), and the glyphs are sized to them. */
.world-hero .globe-controls #rotateLeft, .world-hero .globe-controls #rotateRight { font-size: 22px !important; line-height: 1; }

/* The card: a line down its side as the example's, the pins' colours for status. */
.world-hero .world-status {
  display: block !important;
  position: relative !important;
  inset: auto !important;
  z-index: 3;
  width: auto;
  margin: 0;
  padding: 0 0 0 24px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, .22) !important;
  background: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  color: #f5f4f0;
}
.world-hero .world-status[hidden] { display: none !important; }
.world-hero .world-status::before, .world-hero .world-status::after { content: none !important; display: none !important; }
/* ข้อ 2 · รูปของรอบที่การ์ดกำลังแสดง — รูปเดียวกับที่ป้ายเด้งของหมุดเคยแสดง (เจ้าของงาน 18 ก.ย.
   "นำรูปไปใส่ที่แถบเมนูด้านขวาแทน"). อยู่ในแถวเดียวกับปุ่ม ← → ชิดขวา สูงเท่าปุ่ม (48 px) สัดส่วน 16/9
   = 85 × 48 px · **ไม่เพิ่มความสูงให้การ์ดแม้แต่ px เดียว** ซึ่งเป็นเงื่อนไขเดียวที่ทำได้จริง:
   ช่องว่างระหว่างท้ายการ์ดกับปุ่มลอย "Let's Talk Travel" (ยึดมุมขวาล่างของจอ) เหลือ 146 px ที่ 1512×860 ·
   168 px ที่ 1440×900 · **13 px ที่ 1366×768 · 23 px ที่ 1280×800 · −7 px ที่ 1024×768** (สองจอหลังนี้แถบสี
   ท้ายการ์ดชนปุ่มลอยอยู่ก่อนแล้วตั้งแต่ก่อนมีรูป) — รูปที่กินความสูงเท่าไรก็ตามจะดันแถบสีไปอยู่ใต้ปุ่มลอย
   บนจอสูง 768–800 px เสมอ · แถวปุ่มสูง 48 px และปุ่มสองปุ่มกิน 106 px จากการ์ดกว้าง 250–280 px
   จึงเหลือที่ว่างข้างปุ่ม 144–174 px พอสำหรับรูป 85 px โดยไม่ต้องขยับอะไรเลย
   ช่องรูปว่างในชีต = ไม่มีรูป ไม่เหลือช่องว่าง (media.js ซ่อน <img> ให้เอง) */
.world-status .status-photo { flex: none; height: 48px; width: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-left: auto; border: 1px solid rgba(122, 244, 230, .28); background: rgba(255, 255, 255, .04); }
.world-status .status-photo[hidden], .world-status .status-photo[data-media-error] { display: none !important; }
.world-status .status-count { font-size: .75rem; letter-spacing: .15em; color: #8f9b99; margin: 0 0 18px; }
.world-status .status-count span { color: var(--aqua); }
.world-status .status-count b { font-weight: 400; }
.world-status .status-region { margin: 0; font-size: .75rem; letter-spacing: .18em; color: #a4b0ae; }
/* The site's own face: ci.css names "Author Variable" for this heading, which the site does not load. */
.world-hero .world-status h2 { margin: 6px 0 12px; font-family: Prompt, sans-serif !important; font-size: clamp(1.45rem, 1.9vw, 2rem) !important; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.world-status .status-season {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px;
  padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2);
  font-size: .8125rem; letter-spacing: .04em;
}
/* The dot is the pin's own colour (final-theme.css): planned, tbd and coming-soon have no pin colour of their own, so the
   pins draw them in the default #d3dedb — as do the dot, its word, and the legend's last entry. On-trip pins are the mist
   colour at .58; its word is lighter to stay readable. */
.world-status .status-season span { --pin: #d3dedb; display: inline-flex; align-items: center; gap: 8px; color: var(--pin-text, var(--pin)); white-space: nowrap; }
.world-status .status-season span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pin); opacity: var(--pin-alpha, 1); flex: none; }
.world-status .status-season b { margin-left: auto; font-weight: 500; color: #dfe7e5; text-align: right; white-space: nowrap; }
.world-status .status-season .status-final-call { --pin: var(--gold); }
.world-status .status-season .status-available { --pin: var(--aqua); }
.world-status .status-season .status-confirmed { --pin: var(--green); }
.world-status .status-season .status-full { --pin: var(--violet); }
.world-status .status-season .status-on-trip { --pin: var(--mist); --pin-alpha: .58; --pin-text: #c1c9e0; }
.world-hero .world-status .status-reason { margin: 10px 0 0; font-size: .9375rem !important; line-height: 1.7; color: #aab5b3 !important; font-weight: 300; }
.world-status .status-seats { white-space: nowrap; }
.world-status .status-date { margin-top: 14px; }
.world-status .status-date small { display: block; font-size: .7rem; letter-spacing: .14em; color: #7f8c8a; }
.world-status .status-date strong { display: block; margin-top: 4px; font-size: 1rem; font-weight: 500; }
.world-status .status-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.world-status .status-nav button {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: none; color: #fff; font-size: 22px !important; line-height: 1; cursor: pointer;
}
.world-status .status-nav button:hover, .world-status .status-nav button:focus-visible { background: var(--aqua); color: #081520; border-color: var(--aqua); }
.world-status .status-legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 14px; font-size: .6875rem; letter-spacing: .1em; color: #97a3a1; }
.world-status .status-legend span { display: inline-flex; align-items: baseline; gap: 6px; }
.world-status .status-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
/* data-status, not classes: .confirmed is also the name of a whole section (mockup.css gives it 9rem of padding). */
.world-status .status-legend [data-status="final-call"] { --c: var(--gold); }
.world-status .status-legend [data-status="available"] { --c: var(--aqua); }
.world-status .status-legend [data-status="confirmed"] { --c: var(--green); }
.world-status .status-legend [data-status="full"] { --c: var(--violet); }
.world-status .status-legend [data-status="on-trip"] { --c: var(--mist); }
.world-status .status-legend [data-status="on-trip"]::before { opacity: .58; }
/* The legend's words one size to the eye (owner, 17 Sep: "FINAL CALL / AVAILABLE / CONFIRMED / FULL / ON TRIP /
   สอบถามรอบเดินทาง ขนาด font ไม่เท่ากัน"). final-theme.css sets every entry to 9px, but in Prompt a capital is .70 em tall
   and a Thai letter's body .55 em, so at 9px the Thai words drew 5.25 px beside 6.75 px capitals and looked smaller. At
   11.5px their body is the capitals' height. Their line stays the capitals' 9px × 1.65, so the legend is no taller (at
   1024 × 768 its last line already reaches "Let's Talk Travel"), and the entries line up on the words' baseline — the
   rules above — rather than on their boxes' middles, which left the Thai words 1 px low beside ON TRIP on a phone. */
.world-status .status-legend [data-status="planned"] { --c: #d3dedb; letter-spacing: 0; font-size: 11.5px; line-height: calc(9px * 1.65); }
@media (prefers-reduced-motion: no-preference) {
  .world-status h2, .world-status .status-season, .world-status .status-reason, .world-status .status-date { transition: opacity .25s ease; }
}

/* Up to 780 px: under the globe and its buttons, the full width, the line on top. */
@media (max-width: 780px) {
  /* A panel of its own on a phone: the card lands over the star field here, and the dots read through the text. */
  .world-hero .world-status { margin: 28px 0 8px; padding: 18px 12px 16px !important; border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .22) !important; background: rgba(4, 5, 11, .92) !important; }
  .world-status .status-count { position: absolute; right: 12px; top: 18px; margin: 0; }
  /* The round's name takes the clamp's own floor here (23.2 px). The 1.75rem that used to sit on this line made it
     larger on a phone than on a laptop, and as loud as a section title. */
  /* world.css still has the example's phone rules: its lines hidden (.world-status>p), ← → over the corner, a 270 px row. */
  .world-hero .world-status > p { display: block !important; }
  .world-hero .world-status .status-nav { position: static !important; }
  .world-hero .world-status .status-season { max-width: none !important; }
}

/* 12 · the popover toward the example's: its photo, status and region on one line, the round, dates, seats, and
   VIEW JOURNEY ↗ as a link (it opens the round's page). The round's reason line stays out; the select of rounds shows
   only for a pin with more than one. */
.world-hero .globe-popover {
  width: min(280px, calc(100% - 16px)) !important;
  border: 1px solid rgba(122, 244, 230, .6) !important;
  background: rgba(3, 5, 12, .94) !important;
  box-shadow: 0 0 0 1px rgba(122, 244, 230, .1), 0 0 32px rgba(122, 244, 230, .18) !important;
}
.world-hero .globe-popover::before { content: ""; position: absolute; z-index: 3; left: 0; top: 0; width: 42%; height: 2px; background: var(--aqua); }
@media (min-width: 781px) { .world-hero .globe-popover > img { height: 112px !important; } } /* phones keep refinement.css's shorter photo */
.world-hero .globe-popover-close { display: grid !important; place-items: center; padding: 0 !important; width: 48px !important; height: 48px !important; font-size: 28px !important; line-height: 1 !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, .5) !important; background: rgba(0, 0, 0, .58) !important; }
.world-hero .globe-popover-body > div { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; }
.world-hero .globe-popover-body span, .world-hero .globe-popover-body small { font-size: .75rem !important; letter-spacing: .08em !important; }
.world-hero .globe-popover-body small { color: #aab5b3; text-align: right; }
/* The status word in the pin's colour too (final-theme.css left planned, tbd and confirmed aqua). */
.world-hero .globe-popover-body .status-planned, .world-hero .globe-popover-body .status-tbd, .world-hero .globe-popover-body .status-coming-soon, .world-hero .globe-popover-body .status-returned { color: #d3dedb !important; }
.world-hero .globe-popover-body .status-confirmed { color: var(--green) !important; }
.world-hero .globe-popover-body h3 { font-size: 1.25rem !important; line-height: 1.25; margin: 10px 0 6px !important; }
.world-hero .globe-popover-body p { font-size: .875rem !important; line-height: 1.5; margin: 4px 0 !important; color: #cbd0da; }
.world-hero .globe-popover-body #globePopoverWhy { display: none; }
.world-hero .globe-popover-body a {
  display: block; margin-top: 12px; padding: 12px 0 0 !important; border-top: 1px solid rgba(255, 255, 255, .16);
  background: none !important; color: var(--aqua) !important; text-align: left !important; font-size: .8125rem !important; letter-spacing: .12em;
}
.world-hero .globe-popover-body a:hover, .world-hero .globe-popover-body a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ข้อ 3 · ลูกศรหลังลูกโลก (เจ้าของงาน 18 ก.ย. "หลังลูกโลกจะมีลูกศร เอาออก (hide ไว้ก่อน)") — เส้นโค้งหัวลูกศร
   /assets/brand/explorer-line.svg ที่ premium.css วางไว้หลังลูกโลก (.ci-explorer-hero · 66vw · opacity .28 ·
   z-index 0 · มีเฉพาะจอ 781 px ขึ้นไป). <img> ยังอยู่ใน index.html ปิดสวิตช์ใน /home-hidden.js แล้วกลับมาทันที.
   ปุ่ม ← พักการหมุน → ใต้ลูกโลก และ ← → ของการ์ดด้านขวาเป็นปุ่มใช้งาน ไม่ใช่ลูกศรประดับ — ไม่แตะ */
html[data-hide-globe-arrow] .world-hero .ci-explorer-hero { display: none !important; }
/* The popover without its photo (globe3d.js, while cardPhoto is off): the round close button needs its own room above the words. */
.world-hero .globe-popover > img[hidden] { display: none !important; }
.world-hero .globe-popover.no-photo .globe-popover-body { padding-top: 60px; }

/* ปุ่มกลางของแถว ← ▌▌ → เป็นรูปล้วนทุกขนาดจอ (เจ้าของงาน 19 ก.ย. "เอาพักการหมุน เปลี่ยนเป็น play/pause icon เลย")
   วาดรูปเอง ไม่ใช้อักขระ เพราะ ▶ ⏸ กลายเป็น emoji สีบนบางเครื่อง · สถานะมาจาก aria-pressed ที่ globe3d.js ตั้งอยู่แล้ว:
   true = พักอยู่ → สามเหลี่ยม · false = หมุนอยู่ → สองขีด · คำไทยยังอยู่ใน DOM เป็นคำอ่านของ screen reader */
.world-hero #toggleRotation { display: grid !important; place-items: center; width: 48px !important; min-width: 48px !important; height: 48px; padding: 0 !important; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: none !important; color: #fff; flex: none; }
.world-hero #toggleRotation:hover, .world-hero #toggleRotation:focus-visible { background: var(--aqua) !important; color: #081520; border-color: var(--aqua); }
.world-hero #toggleRotation .rotation-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.world-hero #toggleRotation .rotation-glyph { display: block; position: relative; width: 14px; height: 14px; flex: none; }
.world-hero #toggleRotation[aria-pressed="false"] .rotation-glyph::before,
.world-hero #toggleRotation[aria-pressed="false"] .rotation-glyph::after { content: ""; position: absolute; top: 0; width: 4px; height: 14px; background: currentColor; }
.world-hero #toggleRotation[aria-pressed="false"] .rotation-glyph::before { left: 1px; }
.world-hero #toggleRotation[aria-pressed="false"] .rotation-glyph::after { right: 1px; }
.world-hero #toggleRotation[aria-pressed="true"] .rotation-glyph::before { content: ""; position: absolute; top: 0; left: 3px; width: 0; height: 0; border: 7px solid transparent; border-right: 0; border-left: 12px solid currentColor; }

/* ≤760 px — ตรงกับสวิตช์ globePopoverPhone ใน globe3d.js (ไม่ใช่ 780 ของการ์ด)
   เจ้าของงาน 19 ก.ย. "ให้อยู่ระหว่างลูกศร ข้างปุ่ม pause · เอาแค่ชื่อกับรอบที่ใกล้ที่สุด · view journey เปลี่ยนเป็นแชท"
   ป้ายจึงเป็นสมาชิกของแถวปุ่ม ← ▌▌ [ป้าย] → เอง ไม่ใช่กล่องใต้แถว: กดหมุดแล้วแถวเดิมกลายเป็นคำตอบ ไม่มีอะไรงอกทับลูกโลก
   ตัดทิ้งบนมือถือ: รูปบนหัว · สถานะ · ที่นั่ง · เหตุผล · ตัวเลือกรอบ (เหลือรอบที่หมุดชูอยู่รอบเดียว) · ปุ่มปิด
   (กดที่ลูกโลกหรือหมุดอื่นก็เปลี่ยน/ปิดอยู่แล้ว — globe3d.js pointerdown) */
@media (max-width: 760px) {
  .world-hero .globe-controls { flex-wrap: nowrap !important; align-items: center; width: 100%; max-width: 100%; gap: 8px !important; }
  .world-hero .globe-controls #rotateLeft, .world-hero .globe-controls #rotateRight { flex: none; }

  .world-hero .globe-popover {
    position: static !important; flex: 1 1 auto; min-width: 0; width: auto !important; margin: 0 !important;
    border: 0 !important; border-left: 2px solid var(--aqua) !important; border-radius: 0 !important;
    background-color: rgba(4, 5, 11, .78) !important; backdrop-filter: none !important; box-shadow: none !important;
    /* รูปของปลายทางเป็นพื้นจาง ๆ — globe3d.js ตั้ง --trip-photo ให้ และตั้งเป็น none เมื่อสวิตช์ cardPhoto ปิดอยู่ */
    background-image: linear-gradient(90deg, rgba(4, 5, 11, .92), rgba(4, 5, 11, .62)), var(--trip-photo, none) !important;
    background-size: auto, cover !important; background-position: center !important; overflow: hidden;
  }
  .world-hero .globe-popover::before { content: none !important; }
  .world-hero .globe-popover > img, .world-hero .globe-popover-close,
  .world-hero .globe-popover-body > div, .world-hero .globe-popover-body #globePopoverSeats,
  .world-hero .globe-popover-body #globeTripSelect { display: none !important; }
  .world-hero .globe-popover.no-photo .globe-popover-body,
  .world-hero .globe-popover-body { padding: 6px 10px !important; }
  .world-hero .globe-popover-body h3 {
    font-size: .8125rem !important; line-height: 1.25 !important; margin: 0 !important; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .world-hero .globe-popover-body #globePopoverDate { font-size: .6875rem !important; line-height: 1.3 !important; margin: 1px 0 0 !important; color: #aab5b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .world-hero .globe-popover-body a {
    display: block; margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important;
    font-size: .6875rem !important; letter-spacing: .06em !important; white-space: nowrap;
  }
}