/* ============================================================ DESKTOP LAYER — responsive scale-up for tablet/desktop. Pure additive: nothing below 760px changes. Loaded after design.css; every selector is prefixed with `html` so it outranks the equal-specificity rules the screen modules inject into at runtime. Tiers: ≥760px wider shell, 2-up grids, centered modal ≥1140px full desktop, two-pane Trip/Explore + sticky map ============================================================ */ /* ============================================================ TIER 1 — ≥760px ============================================================ */ @media (min-width:760px){ /* ---- shell: wider frame, roomier gutters ---- */ html .app{max-width:720px;overflow:clip} html .screen-body{padding:2px 32px 0} html .scroll{padding:2px 32px 0} html .topbar{padding-left:32px;padding-right:32px} html .bleed{margin-left:-32px;margin-right:-32px} /* ---- home hero: contained column, inline CTA ---- */ html #screen-home .home-hero-top{min-height:520px} html #screen-home .home-hero-in{padding:36px 40px 40px} html #screen-home .home-hero-count{max-width:560px} html #screen-home .home-trip-cta{align-self:flex-start;padding:0 30px} html #screen-home .greet-t{font-size:29px} html #screen-home .greet-name{font-size:42px} /* ---- home: journey carousel becomes a grid (dots retire) ---- */ html #screen-home .jrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;overflow:visible;margin:14px 0 0;padding:0} html #screen-home .jcard{flex:none;width:auto;height:320px} html #screen-home .jdots{display:none} html #screen-home .tw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} html #screen-home .cx-out{grid-template-columns:repeat(4,1fr)} /* ---- apps directory: 2-up cards ---- */ html #screen-apps .ap-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} /* ---- guide: phrasebook + drivers breathe ---- */ html #screen-guide .g-ph-grid{grid-template-columns:repeat(3,1fr)} html #screen-guide .g-dr-grid{grid-template-columns:repeat(2,1fr)} /* ---- stays: hotels 2-up inside each tier ---- */ html #screen-stays .st-tier{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px} html #screen-stays .st-tier-name{grid-column:1/-1;margin-bottom:0} html #screen-stays .st-hotel{margin-bottom:0} /* a tier with a single hotel (e.g. the booked stay) fills the row */ html #screen-stays .st-hotel:nth-child(2):last-child{grid-column:1/-1} html #screen-stays .st-cityhead{min-height:160px} html #screen-stays .st-fx-out{grid-template-columns:repeat(4,1fr)} /* ---- trip: taller hero map ---- */ html #screen-trip .trip-hero{min-height:420px} /* ---- explore: filters wrap instead of scrolling ---- */ html #screen-explore .exp-filters{flex-wrap:wrap;overflow:visible} /* ---- activity editor: bottom sheet becomes a centered modal ---- */ html .tsheet{align-items:center;padding:28px} html .tsheet-card{max-width:520px;border-radius:var(--r-lg);max-height:min(720px,90vh);transform:translateY(26px);opacity:0;transition:transform .28s var(--ease),opacity .22s var(--ease)} html .tsheet.on .tsheet-card{transform:none;opacity:1} html .tsheet-grab{display:none} } /* ============================================================ TIER 2 — ≥1140px ============================================================ */ @media (min-width:1140px){ /* rail width — 76px icons-only here, widened to 240px in the ≥1440 tier */ html .app{ --rail:76px; max-width:none;width:100%;margin:0;border-radius:0; padding-left:var(--rail);padding-bottom:32px; } /* 2200, not 1520: on a wide monitor the old cap left ~1100px of empty backdrop and pinned the map at 627px however much room there was. */ html #ap-scroll{max-width:2200px;margin:0 auto} /* ---- NAV: bottom pill becomes a full-height left rail ---- */ html .nav{ left:0;top:0;bottom:0;transform:none; width:var(--rail);height:100vh; flex-direction:column;justify-content:flex-start;align-items:stretch; gap:4px;padding:22px 12px; border-radius:0;border:0;border-right:1px solid rgba(255,255,255,.08); box-shadow:none; } html .nav-ind{display:none} html .nitem{ flex:none;flex-direction:row;align-items:center;justify-content:center; gap:12px;min-height:48px;padding:12px;border-radius:var(--r); transition:background .2s var(--ease),color .2s var(--ease); } /* the label is hidden in the narrow icons-only rail; the ≥1440 tier shows it */ html .nitem span:last-child{display:none} html .nitem.on{ background:rgba(15,181,174,.16); box-shadow:inset 0 0 0 1px rgba(15,181,174,.4); } html .screen-body{padding:2px 48px 0} html .scroll{padding:2px 48px 0} html .topbar{padding-left:48px;padding-right:48px} html .bleed{margin-left:-48px;margin-right:-48px} /* ---- home: 4-up journey, 3-up quick links ---- */ html #screen-home .home-hero-top{min-height:560px} html #screen-home .jrow{grid-template-columns:repeat(4,minmax(0,1fr))} html #screen-home .jcard{height:340px} html #screen-home .qlinks{grid-template-columns:repeat(3,1fr)} /* ---- reading-width screens center at a comfortable measure ---- */ html #screen-stays .screen-body, html #screen-guide .screen-body, html #screen-apps .screen-body{max-width:1080px;margin:0 auto} /* ---- TRIP: two panes — plan on the left, sticky map right ---- */ html #screen-trip .screen-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(460px,48%,1400px);column-gap:40px;align-items:start} html #screen-trip .screen-body>*{grid-column:1;min-width:0} html #screen-trip .trip-hero{ grid-column:2;grid-row:1/span 40; position:sticky;top:20px; margin:6px 0 0;height:calc(100vh - 104px);min-height:560px; /* !important: .bleed pins border-radius:0!important in design.css */ border-radius:var(--r-lg)!important;overflow:hidden; box-shadow:var(--sh-2);border:1px solid var(--line); } /* ---- EXPLORE: same two-pane treatment ---- */ html #screen-explore .screen-body{display:grid;grid-template-columns:minmax(0,1fr) clamp(460px,48%,1400px);column-gap:40px;align-items:start} html #screen-explore .screen-body>*{grid-column:1;min-width:0} html #screen-explore .exp-mapwrap{ grid-column:2;grid-row:1/span 40; position:sticky;top:20px; margin:6px 0 0; border-radius:var(--r-lg)!important;overflow:hidden; box-shadow:var(--sh-2);border:1px solid var(--line); } html #screen-explore #exp-map{height:calc(100vh - 104px);min-height:560px} } /* ============================================================ TIER 3 — ≥1440px: the rail earns its labels ============================================================ */ @media (min-width:1440px){ html .app{--rail:240px} html .nav{padding:24px 16px} html .nitem{justify-content:flex-start;gap:14px;padding:12px 16px} html .nitem span:last-child{display:inline;font-size:14px;letter-spacing:0} /* a wordmark so the rail has a head — CSS-generated, no DOM change */ html .nav::before{ content:'Thailand 2026'; font-family:var(--f-disp);font-size:17px;font-weight:600; color:rgba(255,255,255,.9);padding:4px 16px 18px; } } /* ============================================================ Pointer polish — only where a real hover exists (mobile stays tap-first per the contract) ============================================================ */ @media (hover:hover) and (min-width:760px){ /* side-scrolling rails: no vertical give, and a slim scrollbar as the affordance (core.js also pans them with the wheel) */ html .cal-rail, html .near-row{overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent} html .cal-rail::-webkit-scrollbar, html .near-row::-webkit-scrollbar{display:block;height:5px} html .cal-rail::-webkit-scrollbar-thumb, html .near-row::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px} html .cal-rail::-webkit-scrollbar-track, html .near-row::-webkit-scrollbar-track{background:transparent} html .nitem{cursor:pointer} html .nitem:not(.on):hover{color:#fff} html #screen-home .jcard:hover, html #screen-home .qlink:hover, html #screen-apps .ap-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)} html #screen-explore .exp-row:hover{box-shadow:var(--sh-2)} html .day:hover{border-color:var(--line-2);transform:translateY(-1px)} html .day.sel:hover{transform:none} }