/* Mobile layer for the inline-styled design pages */
img{max-width:100%}
html{-webkit-text-size-adjust:100%}

@media (max-width: 760px){
  /* Header: compact logo row, menu scrolls sideways */
  [data-dc-root] header > div{padding:14px 18px!important;gap:10px!important}
  [data-dc-root] header [aria-label="soi society"]{font-size:24px!important}
  [data-dc-root] header nav{flex-wrap:nowrap!important;overflow-x:auto;gap:18px!important;width:100%;font-size:14px!important;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  [data-dc-root] header nav::-webkit-scrollbar{display:none}
  [data-dc-root] header nav a{white-space:nowrap;flex-shrink:0}
  [data-dc-root] header nav a[style*="background: #D4136F"]{padding:8px 14px!important;border-radius:10px!important}

  /* Type scale */
  [data-dc-root] h1{font-size:clamp(34px,9.6vw,44px)!important;line-height:1.02!important;letter-spacing:-0.025em!important;overflow-wrap:break-word}
  [data-dc-root] h2{font-size:clamp(26px,7.4vw,34px)!important;line-height:1.08!important}
  [data-dc-root] [style*="font-size: 104px"],[data-dc-root] [style*="font-size: 96px"],[data-dc-root] [style*="font-size: 88px"],[data-dc-root] [style*="font-size: 80px"],[data-dc-root] [style*="font-size: 72px"]{font-size:clamp(34px,9.6vw,44px)!important}
  [data-dc-root] [style*="font-size: 64px"],[data-dc-root] [style*="font-size: 60px"],[data-dc-root] [style*="font-size: 56px"]{font-size:clamp(28px,8vw,36px)!important}
  [data-dc-root] p[style*="font-size: 20px"],[data-dc-root] p[style*="font-size: 19px"]{font-size:16px!important;line-height:1.6!important}

  /* Spacing: less air between sections and inside big cards */
  [data-dc-root] [style*="padding: 96px"],[data-dc-root] [style*="padding: 88px"],[data-dc-root] [style*="padding: 80px"],[data-dc-root] [style*="padding: 72px"],[data-dc-root] [style*="padding: 64px"]{padding-top:44px!important;padding-bottom:44px!important}
  [data-dc-root] [style*="padding: 0 32px"],[data-dc-root] [style*="32px 40px"]{padding-left:18px!important;padding-right:18px!important}
  [data-dc-root] [style*="padding: 56px"],[data-dc-root] [style*="padding: 48px"]{padding:28px 22px!important}
  [data-dc-root] [style*="padding: 40px 48px"]{padding:24px 20px!important}
  [data-dc-root] [style*="gap: 56px"],[data-dc-root] [style*="gap: 48px"]{gap:32px!important}
  [data-dc-root] [style*="gap: 36px"],[data-dc-root] [style*="gap: 32px"]{gap:22px!important}

  /* Heroes */
  [data-dc-root] [style*="height: 620px"]{height:auto!important;min-height:440px}
  [data-dc-root] .ss-stamp{display:none!important}
  [data-dc-root] .ss-seen{display:none!important}


  /* Guide polaroids: swipe row instead of three full-width cards */
  [data-dc-root] [style*="grid-template-columns"]:has(> .ss-polaroid){display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:18px!important;padding:18px 6px 26px!important;margin:0 -18px;padding-left:18px!important;scrollbar-width:none}
  [data-dc-root] [style*="grid-template-columns"]:has(> .ss-polaroid)::-webkit-scrollbar{display:none}
  [data-dc-root] .ss-polaroid{flex:0 0 66%!important;scroll-snap-align:center}

  /* Photo grids (moments, galleries): two per row */
  [data-dc-root] [style*="minmax(200px, 1fr)"]:has(> figure){grid-template-columns:1fr 1fr!important;gap:8px!important}
  [data-dc-root] figure[style*="border-radius: 20px"]{border-radius:14px!important}

  /* Single-column grids for wide cards */
  [data-dc-root] [style*="minmax(300px"],[data-dc-root] [style*="minmax(320px"],[data-dc-root] [style*="minmax(340px"],[data-dc-root] [style*="minmax(360px"]{grid-template-columns:1fr!important}

  /* Small info tiles: two per row */
  [data-dc-root] [style*="minmax(180px, 1fr)"],[data-dc-root] [style*="minmax(200px, 1fr)"]{grid-template-columns:1fr 1fr!important;gap:8px!important}
  [data-dc-root] [style*="minmax(180px, 1fr)"] > div,[data-dc-root] [style*="minmax(200px, 1fr)"] > div{padding:14px!important}

  /* Marquee band */
  [data-dc-root] .ss-track{font-size:20px!important}
  [data-dc-root] .ss-track *{font-size:inherit!important}

  /* Sticky booking button on tour pages */
  .ss-mobile-book{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;align-items:center;justify-content:center;gap:8px;background:#D4136F;color:#FFFFFF!important;text-decoration:none;font:600 16px Inter,system-ui,sans-serif;padding:16px;border-radius:16px;box-shadow:0 10px 30px rgba(22,19,26,.35)}
  body:has(.ss-mobile-book){padding-bottom:80px}

  /* Big photos in journal and articles: less tall */
  [data-dc-root] [style*="height: 520px"],[data-dc-root] [style*="height: 480px"]{height:300px!important}
  /* Things to do: icon placeholder tiles shorter */
  [data-dc-root] .ss-card > div[style*="height: 230px"]:has(> div > svg){height:130px!important}
}
.ss-mobile-book{display:none}

/* Booking toggle: sliding knob */
.ss-toggle-knob{transition:transform .38s cubic-bezier(.65,0,.35,1)}
.ss-toggle[data-mode="private"] .ss-toggle-knob{transform:translateX(calc(100% + 6px))}

/* Page transitions (Chrome, Edge, Safari 18.2+; others just navigate) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
html:active-view-transition-type(to-private)::view-transition-old(root){animation:ss-vt-out .38s cubic-bezier(.4,0,.2,1) both}
html:active-view-transition-type(to-private)::view-transition-new(root){animation:ss-vt-in .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes ss-vt-out{to{opacity:0;transform:translateX(-6%)}}
@keyframes ss-vt-in{from{opacity:0;transform:translateX(12%)}}
@media (prefers-reduced-motion: reduce){
  .ss-toggle-knob{transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}