/* TD-AI — English pages mobile parity with Hungarian (768px and below) */

@media (max-width: 768px) {
  html[lang="en"] header {
    position: relative !important;
    top: auto !important;
  }

  html[lang="en"] .nav a,
  html[lang="en"] .nav-links a,
  html[lang="en"] header nav a,
  html[lang="en"] .btn,
  html[lang="en"] .btnPrimary,
  html[lang="en"] .btnGhost,
  html[lang="en"] .btnOutlineGold,
  html[lang="en"] header .btn {
    white-space: normal !important;
    text-align: center;
    line-height: 1.25 !important;
    min-height: 44px;
  }

  html[lang="en"] .nav,
  html[lang="en"] .nav-bar,
  html[lang="en"] header .nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.65rem !important;
  }

  html[lang="en"] .nav ul,
  html[lang="en"] .nav-links,
  html[lang="en"] header nav ul {
    width: 100%;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.38rem !important;
  }

  html[lang="en"] .langSwitchWrap {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  html[lang="en"] .langSwitch {
    width: 100%;
    justify-content: center;
  }

  html[lang="en"] .langSwitch__label {
    width: 100%;
    text-align: center;
    margin-right: 0;
  }

  /* Grids → single column */
  html[lang="en"] .grid,
  html[lang="en"] .about-grid,
  html[lang="en"] .hero-grid,
  html[lang="en"] .hero-layout,
  html[lang="en"] .hero-grid-about,
  html[lang="en"] .ebook-grid,
  html[lang="en"] .blog-tiles {
    grid-template-columns: 1fr !important;
  }

  html[lang="en"] .hero-grid .hero-img,
  html[lang="en"] .hero-layout .hero-media,
  html[lang="en"] .hero-grid-about .portrait-wrap {
    order: -1;
  }

  /* Full-width CTAs */
  html[lang="en"] .cta-row .btn,
  html[lang="en"] .cta-row .btnPrimary,
  html[lang="en"] .cta-row .btnGhost,
  html[lang="en"] .cta .btn,
  html[lang="en"] .cta .btnPrimary,
  html[lang="en"] .contact-box .cta-row .btn {
    width: 100%;
    justify-content: center;
  }

  html[lang="en"] header .btn.btnPrimary,
  html[lang="en"] header .btnOutlineGold {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  /* Footer stack */
  html[lang="en"] footer .container[style*="flex"],
  html[lang="en"] footer .foot {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 0.85rem !important;
  }

  html[lang="en"] footer .container[style*="flex"] > div,
  html[lang="en"] footer .foot > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    width: 100%;
  }

  html[lang="en"] footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Blog tiles — tighter on phone */
  html[lang="en"] article.blog-tile {
    padding-right: 1.1rem !important;
    scroll-margin-top: 4.5rem;
  }

  html[lang="en"] .blog-jump {
    gap: 0.5rem 0.65rem;
  }

  html[lang="en"] .blog-jump a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Blog article prose */
  html[lang="en"] .article-body,
  html[lang="en"] .post-body,
  html[lang="en"] main article {
    font-size: clamp(0.92rem, 2.8vw, 1rem);
  }

  html[lang="en"] .series-strip {
    flex-direction: column;
    align-items: stretch;
  }

  html[lang="en"] .series-strip a {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* FAQ / details — touch-friendly */
  html[lang="en"] .faq summary,
  html[lang="en"] details summary {
    min-height: 44px;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }

  /* Ebook */
  html[lang="en"] .ebook-grid {
    gap: 1.25rem !important;
  }

  html[lang="en"] .ebook-form input,
  html[lang="en"] .ebook-form button,
  html[lang="en"] .btn-buy {
    width: 100%;
    min-height: 48px;
  }

  /* Legal pages */
  html[lang="en"] .legal-block {
    padding-left: 0;
    padding-right: 0;
  }

  /* About portrait */
  html[lang="en"] .portrait-wrap {
    min-height: 240px !important;
  }

  html[lang="en"] .portrait-frame {
    width: min(72%, 260px) !important;
  }

  html[lang="en"] .about-grid img {
    max-width: min(72%, 240px);
  }

  /* EN homepage section order: hero → services → about */
  html[lang="en"] main#top {
    display: flex;
    flex-direction: column;
  }

  html[lang="en"] main#top > .hero {
    order: 1;
  }

  html[lang="en"] main#top > .servicesImageSection {
    order: 2;
    padding-top: 0.5rem !important;
    padding-bottom: 0.75rem !important;
  }

  html[lang="en"] main#top > .aboutSection,
  html[lang="en"] main#top > #about {
    order: 3;
    padding-top: 0.75rem !important;
    padding-bottom: 1.25rem !important;
  }

  html[lang="en"] main#top > .section:not(.hero):not(.servicesImageSection):not(.aboutSection):not(#about) {
    order: 10;
  }

  html[lang="en"] .servicesImageIntro,
  html[lang="en"] .services-guide {
    text-align: left !important;
  }

  html[lang="en"] .heroLogoMedallion img {
    width: 52px;
    height: 52px;
  }

  html[lang="en"] .hero {
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important;
  }

  html[lang="en"] .section {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  html[lang="en"] .pill-row {
    gap: 0.38rem;
  }

  html[lang="en"] .services-image-only .servicesMobileCards {
    display: grid !important;
  }

  html[lang="en"] .services-image-only .servicesImageScroller,
  html[lang="en"] .services-image-only .hero-scroller {
    display: none !important;
  }

  html[lang="en"] .services-visual-wrap .servicesMobileCards {
    display: grid !important;
  }

  html[lang="en"] .services-visual-wrap .hero-scroller {
    display: none !important;
  }

  html[lang="en"] .contact-box {
    padding: 1rem 0.9rem;
  }
}

@media (max-width: 480px) {
  html[lang="en"] .container {
    padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
  }

  html[lang="en"] article.blog-tile h2 {
    font-size: 1.05rem !important;
  }

  html[lang="en"] .services-hub-en .service-card h3 {
    font-size: 0.94rem !important;
  }
}