/* ============================================================
   KINDER KIDZ — TABLET PORTRAIT
   Single source of truth for tablet portrait only.
   Protected range: 700px–1180px AND portrait orientation.
   Mobile and landscape/desktop versions are outside this query.
   ============================================================ */
@media (orientation: portrait) and (min-width:700px) and (max-width:1180px){

  /* PAGE FRAME */
  html body{
    overflow-x:hidden!important;
  }
  html body .container,
  html body.contact-page header .nav,
  html body.contact-page .hero-grid{
    width:min(940px,calc(100% - 48px))!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body .section{padding-top:44px!important;padding-bottom:44px!important}
  html body .section-tight{padding-top:28px!important;padding-bottom:28px!important}

  /* HEADER — tablet portrait uses language + burger, never the long desktop nav */
  html body .topbar{display:none!important}
  html body header{
    position:sticky!important;
    top:0!important;
    z-index:100!important;
  }
  html body .nav{
    width:min(940px,calc(100% - 48px))!important;
    height:84px!important;
    min-height:84px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
  }
  html body .brand{
    min-width:0!important;
    margin-right:auto!important;
    flex:0 1 auto!important;
  }
  html body .brand img{
    width:170px!important;
    height:58px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
  html body .header-visit,
  html body .header-visit.visit-action,
  html body .nav>.desktop-only{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body .kk-lang-desktop{display:none!important}
  html body .kk-lang-mobile{
    display:block!important;
    margin-left:auto!important;
    flex:0 0 auto!important;
  }
  html body .kk-lang-mobile .kk-lang-toggle{
    height:42px!important;
    min-width:136px!important;
    padding:0 12px!important;
    border-radius:12px!important;
    font-size:13px!important;
    gap:7px!important;
  }
  html body .kk-lang-mobile .kk-current-name{display:inline!important}
  html body .kk-lang-mobile .kk-lang-menu{
    width:178px!important;
    top:calc(100% + 8px)!important;
  }

  html body .menu-btn{
    display:grid!important;
    margin-left:6px!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    border-radius:12px!important;
    padding:7px!important;
    background:#f3f7ec!important;
    color:var(--green)!important;
    place-items:center!important;
  }
  html body .menu-btn svg{width:28px!important;height:28px!important}

  html body .navlinks{
    display:none!important;
    position:fixed!important;
    left:auto!important;
    right:0!important;
    top:84px!important;
    width:min(44vw,330px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100vh - 84px)!important;
    overflow:auto!important;
    flex:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    align-content:stretch!important;
    gap:0!important;
    padding:8px 16px 12px!important;
    background:#fffdf7!important;
    border-left:1px solid #e9e5dc!important;
    border-bottom:1px solid #e9e5dc!important;
    border-radius:0 0 0 20px!important;
    box-shadow:-14px 18px 34px rgba(0,0,0,.12)!important;
    z-index:300!important;
  }
  html body .navlinks.open{display:flex!important}
  html body .navlinks a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-height:42px!important;
    margin:0!important;
    padding:9px 12px!important;
    font-size:14px!important;
    line-height:1.25!important;
    text-align:left!important;
    white-space:normal!important;
    position:relative!important;
  }
  html body .navlinks a.active:after,
  html body .navlinks a:hover:after{
    left:12px!important;
    right:auto!important;
    bottom:3px!important;
    width:40px!important;
    height:2px!important;
  }

  /* HERO — one clean column in tablet portrait */
  html body .hero{
    min-height:0!important;
    height:auto!important;
    padding:18px 0 12px!important;
    overflow:hidden!important;
  }
  html body .hero > .container,
  html body .hero-grid{
    width:min(940px,calc(100% - 48px))!important;
    min-height:0!important;
    height:auto!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-top:0!important;
    padding-bottom:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:20px!important;
  }
  html body .hero-copy{
    width:100%!important;
    max-width:none!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    align-self:start!important;
    --kk-v87-title-slot:auto!important;
  }
  html body .eyebrow,
  html body .hero .eyebrow{
    margin:0 0 10px!important;
    font-size:12.5px!important;
    line-height:1.3!important;
    letter-spacing:.075em!important;
  }
  html body #kkHeroTitle,
  html body .hero h1{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(42px,5vw,50px)!important;
    line-height:1.04!important;
    letter-spacing:-.03em!important;
    overflow:visible!important;
  }
  html body.page-rooms #kkHeroTitle,
  html body.page-learning #kkHeroTitle,
  html body.page-fees #kkHeroTitle,
  html body.page-gallery #kkHeroTitle,
  html body.page-parents #kkHeroTitle,
  html body.page-contact #kkHeroTitle{
    font-size:clamp(39px,4.6vw,46px)!important;
    line-height:1.05!important;
  }
  html body .kk-title-line{white-space:normal!important}
  html body #kkHeroTitle>.kk-v87-animation-row,
  html body #kkHeroTitle>.kk-v86-animation-row,
  html body #kkHeroTitle>.kk-title-animation-line{
    display:none!important;
  }

  html body .hero-copy p,
  html body .hero-copy .lead{
    width:100%!important;
    max-width:760px!important;
    margin:14px 0 18px!important;
    font-size:16px!important;
    line-height:1.55!important;
  }
  html body .hero-actions{
    width:auto!important;
    margin:0!important;
    display:flex!important;
    grid-template-columns:none!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:12px!important;
  }
  html body .hero-actions .btn{
    width:auto!important;
    min-width:170px!important;
    height:46px!important;
    padding:0 18px!important;
    font-size:14px!important;
  }

  html body .hero-media{
    position:relative!important;
    width:100%!important;
    height:390px!important;
    min-height:390px!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    align-self:stretch!important;
  }
  html body .hero-media img{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:cover!important;
    border-radius:30px!important;
  }
  html body .hero-media::before{
    inset:10px -8px -8px 12px!important;
    border-radius:32px!important;
  }

  /* HOME / TRUST INFORMATION — 3 x 2 instead of six cramped columns */
  html body .trust{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }
  html body .trust-wrap{margin-top:8px!important}
  html body .trust-item{
    min-height:108px!important;
    padding:17px 10px!important;
    border-right:1px solid #eee9df!important;
    border-bottom:1px solid #eee9df!important;
  }
  html body .trust-item:nth-child(3n){border-right:0!important}
  html body .trust-item:nth-last-child(-n+3){border-bottom:0!important}

  html body .stat-row{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    border-radius:20px!important;
  }
  html body .stat-row .stat-item{
    min-height:104px!important;
    border-right:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important;
  }
  html body .stat-row .stat-item:nth-child(3n){border-right:0!important}
  html body .stat-row .stat-item:nth-last-child(-n+3){border-bottom:0!important}

  /* CONTENT GRIDS */
  html body .room-grid,
  html body .feature-grid,
  html body .proof-grid,
  html body .grid-5,
  html body .grid-4,
  html body .grid-3,
  html body .gallery-highlights,
  html body .accent-grid,
  html body .testimonial-grid,
  html body .photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
  }
  html body .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .price-grid{grid-template-columns:1fr!important}
  html body .room-card{
    display:block!important;
    min-height:0!important;
  }
  html body .room-card img{
    width:100%!important;
    height:190px!important;
    min-height:190px!important;
    object-fit:cover!important;
  }

  html body .dual-columns,
  html body .contact-layout,
  html body .map-panel,
  html body .parent-strip,
  html body .banner-grid,
  html body .action-banner .banner-grid{
    grid-template-columns:1fr!important;
    gap:20px!important;
  }
  html body .parent-strip .actions{justify-content:flex-start!important}

  /* CTA — title left, compact buttons right when that component exists */
  html body .cta-inner{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:22px!important;
  }
  html body .cta-actions{
    width:auto!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  html body .cta-actions .btn{
    width:170px!important;
    min-width:170px!important;
  }

  /* FOOTER — tablet portrait: brand above, then Quick Links | Contact Us | Information */
  html body .footer-grid,
  html body .footer-grid-v5{
    display:grid!important;
    grid-template-columns:minmax(0,1.18fr) minmax(0,1.08fr) minmax(0,.92fr)!important;
    grid-template-areas:
      "brand brand brand"
      "quick contact info"!important;
    column-gap:22px!important;
    row-gap:18px!important;
    align-items:start!important;
  }

  html body .footer-grid>.footer-brand,
  html body .footer-grid-v5>.footer-brand{
    grid-area:brand!important;
    min-width:0!important;
    width:100%!important;
    justify-self:stretch!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  /* Semantic footer used by Home/About/Rooms/Learning */
  html body .footer-grid-v5>.quicklinks-group{grid-area:quick!important;min-width:0!important}
  html body .footer-grid-v5>.footer-contact-col{grid-area:contact!important;min-width:0!important}
  html body .footer-grid-v5>.footer-info{grid-area:info!important;min-width:0!important}

  /* Same visual order for Fees/Gallery/Parents/Contact */
  html body .footer-grid:not(.footer-grid-v5)>:nth-child(2){grid-area:quick!important;min-width:0!important}
  html body .footer-grid:not(.footer-grid-v5)>:nth-child(3){grid-area:info!important;min-width:0!important}
  html body .footer-grid:not(.footer-grid-v5)>:nth-child(4){grid-area:contact!important;min-width:0!important}

  html body footer .footer-brand img{
    margin-left:auto!important;
    margin-right:auto!important;
  }
  html body footer .footer-brand p{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  html body .quicklinks-columns,
  html body .footer-links-2{
    grid-template-columns:1fr 1fr!important;
    column-gap:14px!important;
  }

  html body footer .footer-title,
  html body footer h3{
    margin-top:0!important;
  }

  html body footer .footer-contact-col .footer-list,
  html body .footer-grid:not(.footer-grid-v5)>:nth-child(4) .footer-list{
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }

  html body .footer-bottom{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:14px!important;
    flex-wrap:wrap!important;
  }

  /* Keep floating navigation comfortably inside tablet edge */
  html body .scroll-nav-btn,
  html body .scroll-top{
    right:22px!important;
    bottom:22px!important;
  }
}