/* Travel Atlas V7 shared touch/responsive layer.
   Desktop geometry stays unchanged unless a coarse/touch pointer is present. */

body.ta-touch button,
body.ta-touch select,
body.ta-touch input[type="checkbox"]{touch-action:manipulation}

body.ta-touch .travel-atlas-header button,
body.ta-touch .travel-atlas-header select,
body.ta-touch .mode-switch button{
  min-height:44px!important;
  height:44px!important;
  font-size:14px!important;
  padding:7px 12px!important;
}
body.ta-touch #ta-help-button,
body.ta-touch .inspector-close,
body.ta-touch .viewer-side-nav,
body.ta-touch .note-badge,
body.ta-touch .info-badge,
body.ta-touch .viewer-info-close,
body.ta-touch #close-note{
  min-width:44px!important;
  min-height:44px!important;
}
body.ta-touch .location{padding:15px 14px}
body.ta-touch .sublocation-item{min-height:44px;align-items:center;padding:10px 9px}

/* Touch Safari can leave a synthetic :hover state on a different location row
   after a tap. Only the runtime's real .active selection should remain visibly
   selected on touch devices. Desktop mouse hover behavior is unchanged. */
body.ta-touch .location:hover:not(.active){background:transparent!important}
body.ta-touch .sublocation-item:hover:not(.active){background:transparent!important;color:inherit!important}

body.ta-touch .card .meta,body.ta-touch .album-meta{font-size:13px}
body.ta-touch .map-label{min-height:38px;display:flex;align-items:center;padding:7px 10px;font-size:12px}
body.ta-touch .leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:40px!important;font-size:22px!important}

/* On touch devices the enlarged photograph gets the full available width.
   The map remains available immediately after the viewer is closed. */
body.ta-touch.viewer-active .photo-inspector{
  left:0!important;
  right:0!important;
  width:100vw!important;
  min-width:0!important;
}
body.ta-touch .inspector-image{touch-action:none;overscroll-behavior:contain}
body.ta-touch .inspector-controls{min-height:52px;padding:4px 64px!important}
body.ta-touch .inspector-controls button{min-height:44px;height:44px;padding:5px 16px;font-size:14px}
body.ta-touch .viewer-side-nav{font-size:34px!important;opacity:.82;z-index:60!important}
body.ta-touch .viewer-info-panel{max-width:min(520px,88vw)!important;z-index:40!important}

.ta-touch-swipe-hint{
  display:none;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:2100;padding:8px 12px;border-radius:999px;background:rgba(17,24,39,.78);
  color:#fff;font:600 12px Segoe UI,Arial,sans-serif;pointer-events:none;opacity:0;
  transition:opacity .18s;white-space:nowrap
}
body.ta-touch .ta-touch-swipe-hint.show{display:block;opacity:1}

/* iPad-size screens: remove desktop drag splitters and reserve more usable area
   for map and gallery. The three-pane model remains intact in landscape. */
@media (hover:none) and (pointer:coarse) and (max-width:1180px){
  header.travel-atlas-header{
    height:112px!important;min-height:112px!important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:46px 50px;
    grid-template-areas:"brand help" "modes toolbar";
    gap:8px 10px!important;padding:7px 10px!important
  }
  .travel-atlas-product{font-size:23px!important}
  .travel-atlas-trip-title{max-width:190px!important}
  /* Keep overflow visible on iPad so the Show dropdown can extend below the
     toolbar instead of being clipped by Safari's scroll/overflow container. */
  .travel-atlas-header .map-toolbar{justify-self:stretch!important;justify-content:flex-start!important;overflow:visible!important;padding-bottom:2px!important}
  main{height:calc(100vh - 112px)!important;grid-template-columns:210px minmax(300px,1fr) 320px!important}
  #split-left,#split-right{display:none!important}
  .photo-inspector,.photo-album,.journal-view{top:112px!important}
  .photo-inspector:fullscreen,.photo-inspector:-webkit-full-screen{top:0!important}
  .grid{grid-template-columns:1fr!important}
  .card img{height:150px!important}
}

/* Portrait iPad: when More Information is open, keep a substantial photograph
   above a scrollable information card instead of squeezing the photo into a
   narrow strip beside the card. */
@media (hover:none) and (pointer:coarse) and (orientation:portrait) and (max-width:1180px){
  body.ta-touch.viewer-info-open #viewerstage{
    box-sizing:border-box!important;
    padding:8px 8px calc(52vh + 14px) 8px!important;
  }
  body.ta-touch.viewer-info-open .viewer-info-panel{
    left:8px!important;right:8px!important;top:auto!important;bottom:8px!important;
    width:auto!important;min-width:0!important;max-width:none!important;
    height:52vh!important;max-height:52vh!important;
  }
  body.ta-touch.viewer-info-open .viewer-side-nav{top:22%!important}
  body.ta-touch.viewer-info-open .ta-touch-swipe-hint{bottom:calc(52vh + 24px)!important}
  body.ta-touch.viewer-info-open .photo-inspector:fullscreen #viewerstage,
  body.ta-touch.viewer-info-open .photo-inspector.is-fullscreen #viewerstage{
    padding-bottom:calc(52vh + 14px)!important;
  }
}

/* iPad portrait and small tablets: two useful panes are better than three narrow
   desktop panes. The destination list remains available while the gallery gets
   the main reading area; Map + Photos can still be selected normally. */
@media (hover:none) and (pointer:coarse) and (max-width:820px){
  header.travel-atlas-header{
    height:150px!important;min-height:150px!important;
    grid-template-columns:1fr auto!important;
    grid-template-rows:42px 48px 48px!important;
    grid-template-areas:"brand help" "modes modes" "toolbar toolbar"!important
  }
  main{height:calc(100vh - 150px)!important;grid-template-columns:190px minmax(0,1fr)!important}
  main>.gallery{display:none!important}
  main>.mapwrap{grid-column:2!important}
  .photo-inspector,.photo-album,.journal-view{top:150px!important}
  .photo-inspector:fullscreen,.photo-inspector:-webkit-full-screen{top:0!important}
  .travel-atlas-trip-title{display:none!important}
}

/* iPhone / narrow phone: use one content surface at a time. The base runtime
   already starts narrow screens in Photos Only mode; these rules make that mode
   comfortably tappable and keep Map mode usable when selected. */
@media (hover:none) and (pointer:coarse) and (max-width:700px){
  header.travel-atlas-header{
    height:146px!important;min-height:146px!important;
    grid-template-columns:1fr auto!important;
    grid-template-rows:38px 48px 48px!important;
    grid-template-areas:"brand help" "modes modes" "toolbar toolbar"!important;
    padding:6px 8px!important
  }
  .travel-atlas-product{font-size:20px!important}
  .travel-atlas-version{display:none!important}
  .travel-atlas-header .mode-switch{width:100%!important}
  .travel-atlas-header .mode-switch button{flex:1 1 0!important;padding:5px 7px!important}
  /* Phones still need horizontal toolbar scrolling because all controls cannot
     fit at once. The iPad rule above remains overflow-visible. */
  .travel-atlas-header .map-toolbar{width:100%!important;max-width:100%!important;justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch}
  main{height:calc(100vh - 146px)!important;display:block!important}
  body:not(.photos-only):not(.journal-only) main .sidebar{display:none!important}
  body:not(.photos-only):not(.journal-only) main .mapwrap{display:block!important;width:100%!important;height:100%!important}
  body:not(.photos-only):not(.journal-only) main .gallery{display:none!important}
  .photo-album,.journal-view,.photo-inspector{top:146px!important}
  .photo-inspector:fullscreen,.photo-inspector:-webkit-full-screen{top:0!important}
  .album-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .photo-album{padding-left:8px!important;padding-right:8px!important}
  .album-head{margin-left:-8px!important;margin-right:-8px!important}
  .inspector-header{gap:8px!important;padding-left:10px!important;padding-right:52px!important;font-size:11px!important}
  .inspector-header #viewerdate,.inspector-header #viewertime{display:none!important}
  .inspector-controls #photoindex{font-size:12px!important}
  body.ta-touch .viewer-info-panel{left:8px!important;right:8px!important;top:8px!important;bottom:8px!important;max-width:none!important;width:auto!important}
}