/* Moroccan Trippers - responsive safety layer (all pages, all languages). v1
   Loaded last in <head> so it can correct page-level styles on small screens. */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}

/* media never wider than its container */
img,video,canvas{max-width:100%;height:auto}
iframe,embed,object{max-width:100%}
input,select,textarea,button{max-width:100%}

/* stop grid / flex columns being stretched by wide content (tables, long words) */
.main-layout>*,.tour-page-layout>*,.page-layout>*,.content-layout>*,
[class*="-grid"]>*,[class*="grid-"]>*,
.main-content,.sidebar,.tour-main-content,.tour-sidebar,.booking-widget,.sidebar-widget,
.hero-content,.tour-hero-content,article,main,section{min-width:0}

p,li,td,th,dd,dt,h1,h2,h3,h4,h5,h6,blockquote,figcaption{overflow-wrap:break-word}
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}

@media (max-width:768px){
  /* tables that are not already inside a scroll wrapper become swipeable */
  :not(.overflow-x-auto):not(.table-wrapper):not(.table-responsive):not(.mt-table-scroll)>table{
    display:block;max-width:100%;min-width:0!important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table th,table td{word-break:normal}

  /* header: smaller logo so it doesn't hang over the hero */
  .nav-logo img{height:56px}
  .header.scrolled .nav-logo img{height:50px}

  /* comfortable gutters */
  .container{padding-left:16px;padding-right:16px}
  .main-content,.tour-main-content{padding-left:18px;padding-right:18px}
  .sidebar-widget,.booking-widget{padding-left:18px;padding-right:18px}

  /* headings scale down on phones */
  h1{font-size:clamp(1.75rem,7.5vw,2.4rem);line-height:1.2}
  h2{font-size:clamp(1.4rem,6vw,2rem);line-height:1.25}

  /* page heroes grow with their text instead of cropping long titles */
  .blog-hero,.page-hero,.tour-hero,.about-hero,.activities-hero,.contact-hero{
    height:auto!important;min-height:320px;
    padding-top:calc(var(--nav-height,80px) + 28px)!important;padding-bottom:40px!important}
  .blog-hero h1,.page-hero h1,.tour-hero h1,.about-hero h1,.activities-hero h1,.contact-hero h1,.tour-hero-content h1,.hero-content h1{
    font-size:clamp(1.7rem,7.5vw,2.3rem)!important;line-height:1.2}
  .blog-hero p,.page-hero p,.about-hero p,.activities-hero p,.contact-hero p,.hero-content p{font-size:1rem!important}

  /* cookie banner stays inside the screen */
  .mt-cc{left:8px!important;right:8px!important;max-width:calc(100vw - 16px);box-sizing:border-box}
  .mt-cc-in{max-width:100%;box-sizing:border-box}

  /* tap targets */
  .nav-menu .nav-link{min-height:44px}
}

@media (max-width:380px){
  .container{padding-left:12px;padding-right:12px}
  .main-content,.tour-main-content,.sidebar-widget,.booking-widget{padding-left:14px;padding-right:14px}
}

/* group / shared / student tour heroes: grow with long titles */
.mt-hero-tall{padding-top:8rem}
@media (min-width:768px){.mt-hero-tall{min-height:70vh}}