/* ============================================================
   RESPONSIVE FIXES — MOBILE + NARROW DESKTOP + TALL SCREENS
   This file intentionally OVERRIDES desktop layouts
============================================================ */

@media (max-width: 1100px) {


  /* =========================
     GLOBAL HARD SAFETY
  ========================== */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  main,
  section,
  article,
  .container,
  .page-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  p, h1, h2, h3, h4, h5, h6, li {
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }


 

  /* =========================
     ABOUT PAGE — FORCE STACK
     (FIXES NARROW DESKTOP / SMALL HEIGHT)
  ========================== */
  .about-split,
  .about-grid,
  .about-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .about-split .left,
  .about-split .right {
    width: 100% !important;
    text-align: left !important;
  }

  .about-photo {
    width: 170px !important;
    height: 170px !important;
    margin: 0 auto 16px auto !important;
  }

  .founder-grid,
  .partner-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .values {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  /* =========================
     IDIOMS — FULL VERTICAL STACK
     (IMAGE + TAG + TEXT + WHY)
  ========================== */
  #idiomCard {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #idiomCard,
  #idiomCard *,
  #idiomCard > * {
    float: none !important;
    display: block !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #idiomImg {
    width: 100% !important;
    height: auto !important;
    margin: 0 0 18px 0 !important;
  }

  #idiomTag {
    margin: 14px 0 8px 0 !important;
    padding: 6px 12px !important;
    display: inline-block !important;
  }

  #idiomTitle {
    font-size: 18px !important;
    margin: 0 0 10px 0 !important;
  }

  #idiomMeaning,
  #idiomExample,
  #idiomExtra {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 0 12px 0 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* =========================
     LESSONS: full-width stacked bubbles
  ========================== */
  .lesson-bubble,
  #lessonCloud button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 12px 14px !important;
    line-height: 1.4 !important;
  }

  /* =========================
     GYM EXERCISES — MD POSTS
     FORCE SINGLE COLUMN + RESPONSIVE MEDIA
  ========================== */
  
/* === NAV — MOBILE: NO JUMP, NEON ONLY === */
.page-header .mini-nav a:hover,
.page-header .mini-nav a:active,
.page-nav .nav-orb:hover,
.page-nav .nav-orb:active,
.overlay-nav .nav-orb:hover,
.overlay-nav .nav-orb:active {
  transform: none !important;
}

/* FRONT PAGE — English Booster latest YouTube thumbnail (fix top gap) */
.yt-latest {
  position: relative !important;
  overflow: hidden !important;
}

.yt-latest img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;         /* overrides global height:auto !important */
  object-fit: cover !important;
  display: block !important;
}


}



@media (max-width: 900px) {
    
 .hero-premium::before {
  background:
    linear-gradient(
      rgba(5,10,25,0.55),
      rgba(5,10,25,0.55)
    ),
    url('../images/mob-bg-pannel.webp') center / cover no-repeat !important;
}

  /* =========================
     PAGE CONTENT GUTTER 
  ========================== */
  body.page .page-content {
    width: calc(100% - 32px) !important;
    margin: 16px auto !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  /* =========================
     GYM EXERCISE — MOBILE
     IMAGE ALWAYS LAST
  ========================== */
  .exercise-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  .exercise-text {
    order: 1;
    width: 100% !important;
  }

  .exercise-media {
    order: 2;
    margin-top: 20px;
  }

  .exercise-media img {
    width: 100%;
    height: auto;
  }
  
  /* =========================
     logo
  ========================== */
  
  .brand-divider {
    height: auto !important;
    margin: 14px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .brand-divider::before {
    width: 160px;
    height: 160px;
    filter: blur(22px);
  }

  .brand-divider img {
    width: 110px;      /* ⬅ slightly bigger */
    height: auto;
    border-radius: 50%;
    display: block;
  }
  
  .yt-latest {
  line-height: 0 !important;
}

.yt-latest img {
  display: block !important;
}

}

@media (max-width: 768px) {

/* 1️⃣ REMOVE TITLES + THEIR SPACE COMPLETELY */
  .page-title-wrap,
.training-header-row,
.gym-title {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2️⃣ HEADER: SIMPLE FLEX, NO TRICKS */
  .page-header {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 6px 10px !important;
    gap: 12px !important;
  }

  /* 3️⃣ HOME / BACK — SMALLER */
  .close-btn {
    font-size: 0.45rem !important;
    padding: 5px 8px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* 4️⃣ NAV — MOVE INTO TITLE SPACE */
  .mini-nav {
    margin-left: auto !important;   /* ⬅ THIS reclaims title space */
    display: flex !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  /* 5️⃣ CIRCLES — SMALLER */
  .mini-nav a {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
    padding: 0 !important;
  }
  
  
   .lesson-layout {
    display: block !important;
  }

  .lesson-left,
  .lesson-card {
    width: 100% !important;
  }

  .lesson-video {
    margin-bottom: 16px !important;
  }

  .lesson-video iframe {
    width: 100% !important;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
  }
  
   #idiomCloud {
    min-height: 300px;
  }
  #idiomCard {
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  #idiomCard.show {
    max-height: 2000px !important; /* big enough */
    padding: 20px !important;     /* restore your spacing */
    margin-top: 16px !important;
  }
  
  
  
  .axis-card:hover {
    transform: none;
  }
 


}




/* ============================================================
   IMPORTANT FIX: your old rule @media(max-width:1200px) was killing transforms.
   Replace JUST that part with this (do NOT set transform:none for hero-nav-panel/title).
============================================================ */
@media (max-width: 1200px){
  .hero-landing{ height: auto; min-height: auto; }
  
    .hero-landing-img{
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  /* keep the wrapper working, just scale down */
  .hero-panel-wrapper{
    position: static;
    margin: 1.5rem auto;
    transform: none; /* mobile: no tilt */
    width: min(92%, 420px);
  }

  .hero-nav-panel{
    --btnw: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .hero-nav-panel a{ width: 100%; }

  .hero-search{
    width: 100%;
  }
}


/* ============================================================
   HERO IMAGE — MOBILE & 9:16 (REPLACE DESKTOP IMAGE)
============================================================ */
@media (max-width: 768px), (max-aspect-ratio: 9/16) {

  .hero-landing-img {
    content: url("/wp-content/themes/idiotoon/assets/images/mobile-front.webp");
    width: 100%;
    height: auto;
    object-fit: cover;
  }

}


/* ============================================================
   FRONT PAGE — MOBILE STABILIZATION 
============================================================ */

@media (max-width: 1200px){

  /* stop 100vh traps */
  .hero-landing,
  .hero-premium{
    height: auto;
    min-height: auto;
  }

  /* collapse puzzle layout */
  .puzzle-premium{
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "fun"
      "idiom"
      "booster"
      "nav"
      "image";
    height: auto;
    transform: none;
  }

  /* neutralize 3D effects */
  .hero-nav-panel,
  .hero-title{
    position: static;
    transform: none;
    margin: 1.5rem auto;
    text-align: center;
    align-items: center;
  }

  /* buttons become tappable */
  .hero-nav-panel a{
    width: 90%;
    max-width: 360px;
    margin: 0 auto;
  }
}


/* MOBILE */
@media (max-width: 768px){
  .system-reveal{
    padding: 16vh 1rem 14vh;
  }

  .reflex-static{
    font-size: clamp(3.4rem, 10vw, 4.6rem);
    line-height: 1.06;
  }
}


/*------------------------------------*/


@media (max-width: 768px){

  .hero-title .brand{
    font-size: 1.4rem;
  }

  .hero-title .tagline{
    font-size: 0.85rem;
  }

  .hero-nav-panel{
    gap: 0.6rem;
  }
}


@media (max-width: 980px){
  .intro-grid{ grid-template-columns: 1fr; }
}