/* ===========================================================
   Wild Tiger Safaris — global responsive layer
   Pages use inline styles; DC/React serializes them WITH spaces
   (e.g. "grid-template-columns: repeat(3, 1fr)", "font-size: 64px"),
   so every attribute-substring selector below matches that spaced form.
   =========================================================== */

/* ---- Fluid headings (apply at all widths; clamp keeps the
        original size on desktop and scales down on small screens) ---- */
[style*="font-size: 104px"]{font-size:clamp(44px,11.5vw,104px)!important}
[style*="font-size: 96px"] {font-size:clamp(40px,10.5vw,96px)!important}
[style*="font-size: 88px"] {font-size:clamp(40px,10vw,88px)!important}
[style*="font-size: 84px"] {font-size:clamp(38px,9.5vw,84px)!important}
[style*="font-size: 72px"] {font-size:clamp(36px,9vw,72px)!important}
[style*="font-size: 64px"] {font-size:clamp(33px,8vw,64px)!important}
[style*="font-size: 54px"] {font-size:clamp(30px,6.5vw,54px)!important}
[style*="font-size: 50px"] {font-size:clamp(30px,6vw,50px)!important}
[style*="font-size: 46px"] {font-size:clamp(28px,5.5vw,46px)!important}

/* ---- Tablet: 3-up card grids become 2-up ---- */
@media (max-width: 960px){
  [style*="grid-template-columns: repeat(3"]{grid-template-columns:repeat(2,1fr)!important}
  /* Two-column feature layouts stack */
  [style*="grid-template-columns: 1fr 360px"],
  [style*="grid-template-columns: 200px 1fr 360px"],
  [style*="grid-template-columns: 0.85fr 1fr"],
  [style*="grid-template-columns: 1fr 0.85fr"],
  [style*="grid-template-columns: 1fr 0.7fr"]{grid-template-columns:1fr!important}
  /* Booking rail stops sticking once stacked */
  aside[style*="position: sticky"]{position:static!important;top:auto!important}
}

/* ---- Phones: everything to a single column ---- */
@media (max-width: 640px){
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
  /* Stat strips (4 & 5 up) become 2-up */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(5"]{grid-template-columns:repeat(2,1fr)!important}
  /* Trim generous side padding on section shells */
  section, header, footer{padding-left:22px!important;padding-right:22px!important}
  /* Hero inner blocks that carry their own 48px side padding */
  [style*="padding: 0 48px 72px"]{padding-left:22px!important;padding-right:22px!important}
  [style*="padding: 96px 32px 70px"]{padding-left:20px!important;padding-right:20px!important}
  /* Roomy inner cards (contact form, booking card, CTA panels) */
  [style*="padding: 44px 46px"],
  [style*="padding: 54px 56px"]{padding-left:24px!important;padding-right:24px!important}
  /* Itinerary rows: let the day label sit above the text */
  [style*="grid-template-columns: 120px 1fr"]{grid-template-columns:1fr!important;gap:6px!important}
  /* Departure rows wrap instead of overflowing */
  [style*="grid-template-columns: 1fr auto auto auto"]{grid-template-columns:1fr auto!important;row-gap:10px!important}
}

/* ---- Navigation: swap desktop links for a hamburger + slide panel ---- */
@media (max-width: 860px){
  nav{position:relative!important;padding-left:22px!important;padding-right:22px!important}
  .site-nav-desktop{display:none!important}
  .site-nav-burger{display:flex!important}
  .site-nav-mobile-panel{display:flex!important}
}

/* ---- Premium image polish: crisp rendering + gentle hover lift on cards ---- */
img{max-width:100%;height:auto}
[style*="border-radius:3px;overflow:hidden;display:flex;flex-direction:column"],
[style*="border-radius: 3px; overflow: hidden; display: flex; flex-direction: column"]{
  transition:transform .35s ease,box-shadow .35s ease;
}
@media (hover:hover){
  [style*="border-radius:3px;overflow:hidden;display:flex;flex-direction:column"]:hover,
  [style*="border-radius: 3px; overflow: hidden; display: flex; flex-direction: column"]:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px rgba(20,28,22,0.16);
  }
}

/* ---- Mobile: full-bleed hero photos never crop awkwardly tall ---- */
@media (max-width: 640px){
  header{min-height:0!important}
  header > img{position:absolute!important}
}