/* ======================================================================
   ThePixelHero – iPad / Tablet ONLY
   Scope: touch tablets only. Desktop + phone layouts stay untouched.
   Target: portrait + landscape, 700–1366 CSS px, min-height 700px.
   ====================================================================== */

@media (pointer:coarse) and (hover:none) and (min-width:700px) and (min-height:700px) and (max-width:1366px){
  html,body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:clip !important;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  *,*::before,*::after{min-width:0}

  img,video,canvas,picture,iframe{
    max-width:100% !important;
  }

  input,select,textarea,button{
    max-width:100% !important;
    font-size:max(16px,1em);
  }

  a,button,summary,input,select,textarea{
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(190,83,54,.12);
  }

  .wrap,.legal-wrap{
    width:min(var(--max,1460px),calc(100% - 48px)) !important;
    max-width:calc(100% - 48px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  main,section,article,aside,form,footer{
    max-width:100%;
  }

  section[id],form[id],header[id]{
    scroll-margin-top:calc(var(--tph-header-h,88px) + 18px) !important;
  }

  /* Safari/iPad: long words, mail addresses and URLs must not stretch cards. */
  p,li,dd,dt,.lead,.muted,.legal-content,.legal-section,.field,.contact-item{
    overflow-wrap:anywhere;
  }

  /* Keep tables inside the viewport on tablet instead of widening the page. */
  table{
    max-width:100% !important;
  }

  /* Tablet touch should not depend on desktop hover-only navigation helpers. */
  .rail{
    display:none !important;
  }

  /* Fotografie quick navigation: swipe inside the strip, never widen the page. */
  .quicknav{
    max-width:100vw !important;
    overflow:hidden !important;
  }
  .quickgrid{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .quickgrid::-webkit-scrollbar{display:none}
  .quickgrid > *{
    flex:0 0 clamp(118px,18vw,175px) !important;
    scroll-snap-align:start;
  }

  /* Footer: no clipped legal/contact links in portrait or landscape. */
  .foot,.footin,.foot-nav,.footnav{
    max-width:100% !important;
  }
  .foot-nav,.footnav{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px 16px !important;
  }

  /* Dialog/lightbox/image viewers stay inside the usable iPad viewport. */
  [role="dialog"],.modal,.lightbox,.qrpro-modal{
    max-width:min(94vw,1100px) !important;
    max-height:92dvh !important;
  }
}

/* ----------------------------------------------------------------------
   iPad / tablet navigation mode.
   Up to 1220px a full desktop nav is too cramped; use the existing menu.
   This affects tablets only (coarse pointer + no hover + tablet dimensions).
   ---------------------------------------------------------------------- */
@media (pointer:coarse) and (hover:none) and (min-width:700px) and (min-height:700px) and (max-width:1220px){
  body > .tph-site-header{
    width:100% !important;
    max-width:100% !important;
    z-index:10000 !important;
  }

  body > .tph-site-header .tph-header-inner{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    padding:12px 22px !important;
    margin:0 !important;
  }

  body > .tph-site-header .tph-mobile-row{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    width:100% !important;
  }

  body > .tph-site-header .tph-header-logo{
    display:block !important;
    width:min(300px,52vw) !important;
    max-width:300px !important;
    margin:0 !important;
    flex:0 1 auto !important;
  }

  body > .tph-site-header .tph-header-logo img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:72px !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  html body > .tph-site-header .tph-nav-wrap{
    display:none !important;
  }

  html body > .tph-site-header .tph-mobile-menu{
    display:block !important;
    position:relative !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
    z-index:10020 !important;
  }

  body > .tph-site-header .tph-mobile-menu > summary{
    display:grid !important;
    place-items:center !important;
    width:54px !important;
    height:54px !important;
    padding:0 !important;
    margin:0 !important;
    cursor:pointer !important;
  }

  body > .tph-site-header .tph-mobile-panel{
    position:absolute !important;
    top:64px !important;
    right:0 !important;
    left:auto !important;
    width:min(430px,calc(100vw - 44px)) !important;
    max-width:calc(100vw - 44px) !important;
    max-height:calc(100dvh - 118px) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
    z-index:10030 !important;
  }

  body > .tph-site-header .tph-mobile-panel a{
    min-height:48px;
  }

  /* Old/simple menu markup gets comfortable tablet spacing. Premium icon
     rows keep their own grid styling and are only size-corrected here. */
  body > .tph-site-header .tph-mobile-panel > a:not(.tph-mobile-nav-row):not(.tph-mobile-nav-request){
    display:flex !important;
    align-items:center !important;
    width:100% !important;
    padding:12px 14px !important;
    font-size:1rem !important;
    line-height:1.2 !important;
  }

  body > .tph-site-header .tph-mobile-panel .tph-mobile-nav-row,
  body > .tph-site-header .tph-mobile-panel .tph-mobile-nav-request{
    width:100% !important;
  }

  /* Final specificity guard against legacy page-level !important rules. */
  html body > header.tph-site-header.tph-site-header .tph-nav-wrap{display:none !important;}
  html body > header.tph-site-header.tph-site-header .tph-mobile-menu{display:block !important;}
}


/* Largest iPad landscape: keep desktop navigation, but make it fit without
   the tiny cramped 820/1024 treatment. Still tablet-only. */
@media (pointer:coarse) and (hover:none) and (min-width:1221px) and (min-height:700px) and (max-width:1366px){
  html body > header.tph-site-header.tph-site-header .tph-mobile-menu{display:none !important;}
  html body > header.tph-site-header.tph-site-header .tph-nav-wrap{display:flex !important;}
  body > .tph-site-header .tph-header-inner{
    width:100% !important;
    max-width:none !important;
    padding-left:24px !important;
    padding-right:24px !important;
  }
  body > .tph-site-header .tph-header-logo{
    width:210px !important;
    max-width:210px !important;
  }
  body > .tph-site-header .tph-main-nav{
    gap:clamp(8px,1vw,15px) !important;
    flex-wrap:nowrap !important;
  }
  body > .tph-site-header .tph-main-nav > a,
  body > .tph-site-header .tph-nav-group > a{
    font-size:clamp(.78rem,1vw,.9rem) !important;
    white-space:nowrap !important;
  }
}

/* Portrait tablet: stack only the genuinely wide editorial/form structures.
   Existing mobile rules below 700px and desktop rules above tablet are untouched. */
@media (pointer:coarse) and (hover:none) and (orientation:portrait) and (min-width:700px) and (min-height:700px) and (max-width:1024px){
  .section-head,
  .why-grid,.second-card,.gallery-cta,.booth-intro,.about-grid,.contact-grid,
  .tph-hubpro-stage,.tph-hubtease-card,.why-pro-grid,
  .contact-wedding .contact-grid,
  .demo-grid,.module-grid,.hub-v9-qrwow,.hub-qr-summary,.demo-story-card,
  .hub-inquiry-head,.qrpro-modal-main{
    grid-template-columns:1fr !important;
  }

  .foot,.footin{
    grid-template-columns:1fr !important;
  }

  .hero-copy,.hero-in,.legal-hero > *,
  .contact-wedding,.hub-inquiry,.qrpro-library{
    max-width:100% !important;
  }

  .fields,.hub-form-fields{
    grid-template-columns:1fr 1fr !important;
  }

  .field.full,.full{
    grid-column:1 / -1;
  }
}

/* Narrow portrait iPads (768px): one-column form controls are calmer and
   avoid Safari's keyboard squeezing the second column. */
@media (pointer:coarse) and (hover:none) and (orientation:portrait) and (min-width:700px) and (max-width:790px) and (min-height:900px){
  .fields,.hub-form-fields,.contact-wedding .fields{
    grid-template-columns:1fr !important;
  }
}

/* Landscape tablet: keep useful two-column content, but guarantee that grid
   children can shrink instead of forcing horizontal overflow. */
@media (pointer:coarse) and (hover:none) and (orientation:landscape) and (min-width:980px) and (min-height:700px) and (max-width:1366px){
  .section-head > *,
  .contact-grid > *,
  .about-grid > *,
  .demo-grid > *,
  .module-grid > *,
  .hub-inquiry-head > *,
  .qrpro-modal-main > *{
    min-width:0 !important;
    max-width:100% !important;
  }
}