/**
 * Léyo — mobile-only overrides (max-width: 768px / 640px).
 * Desktop layout untouched; all rules live inside media queries.
 */

@media (max-width: 768px) {
  html {
    overflow-x: clip;
  }

  body.leyo-site {
    overflow-x: clip;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  body.leyo-site .nav {
    padding-top: env(safe-area-inset-top, 0);
  }

  .nav-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
  }

  .hamburger {
    min-width: 44px;
    min-height: 44px;
    padding: 11px;
    margin-right: calc(-1 * env(safe-area-inset-right, 0));
    -webkit-tap-highlight-color: transparent;
  }

  .nav-links a {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 0.74rem;
  }

  .nav-drawer-footer .nav-cta {
    min-height: 44px;
    padding: 12px 16px;
  }

  .nav-drawer-meta .nav-mobile {
    min-height: 44px;
    padding: 10px 12px;
  }

  .nav-drawer-meta .nav-gear {
    width: 44px;
    height: 44px;
  }

  .leyo-nav-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  body.leyo-site .container,
  .footer-inner {
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
  }

  body.leyo-site .hero {
    min-height: min(88vh, 720px);
    padding: max(48px, env(safe-area-inset-top, 0) + 32px) 0 56px;
  }

  body.leyo-site .hero h1,
  .hero h1 {
    font-size: clamp(1.85rem, 9.5vw, 3rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .hero-sub {
    font-size: 0.92rem;
    max-width: 100%;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-buttons .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .section {
    padding: 64px 0;
  }

  .section-title {
    font-size: clamp(1.65rem, 7vw, 2.2rem);
    margin-bottom: 36px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .svc {
    padding: 28px 20px;
  }

  .btn,
  .btn-send,
  .btn-google,
  .btn-maps {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .review-card {
    min-width: min(280px, 85vw);
    max-width: min(300px, 88vw);
  }

  .reviews-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .reviews-actions .btn-google,
  .reviews-actions .btn-maps {
    width: 100%;
    justify-content: center;
  }

  body.leyo-site .topbar {
    padding: 10px 0;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0));
  }

  body.leyo-site .topbar::before,
  body.leyo-site .topbar::after {
    width: 36px;
  }

  body.leyo-site .logo-item {
    padding: 0 16px;
    height: 32px;
  }

  body.leyo-site .logo-item svg,
  body.leyo-site .logo-item img {
    height: 18px;
    opacity: 0.72;
  }

  .ticker-item {
    padding: 0 24px;
    font-size: 0.64rem;
  }

  /* Portfolio */
  .portfolio-hero {
    min-height: min(72vh, 640px);
    padding: max(40px, env(safe-area-inset-top, 0) + 24px) 0 48px;
  }

  .portfolio-hero h1 {
    font-size: clamp(1.75rem, 8.5vw, 2.6rem);
  }

  .section {
    padding: 64px 0;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .work-card {
    width: 100%;
  }

  .client-strip.work-filter-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    gap: 10px;
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0)));
    margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0)));
    padding: 4px max(16px, env(safe-area-inset-right, 0)) 8px
      max(16px, env(safe-area-inset-left, 0));
    scrollbar-width: thin;
  }

  .client-strip.work-filter-strip .client-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    padding: 10px 16px;
  }

  .portfolio-modal {
    padding: 0;
    justify-content: stretch;
    align-items: stretch;
  }

  .portfolio-modal-panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .portfolio-modal-header {
    padding: max(16px, env(safe-area-inset-top, 0) + 8px) 52px 12px 16px;
  }

  .portfolio-modal-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0) + 12px);
  }

  .portfolio-modal-tab {
    min-height: 44px;
    padding: 12px 14px;
  }

  .portfolio-modal-prev,
  .portfolio-modal-next {
    width: 44px;
    height: 44px;
    top: auto;
    bottom: calc(72px + env(safe-area-inset-bottom, 0));
    transform: none;
  }

  .portfolio-modal-prev {
    left: max(8px, env(safe-area-inset-left, 0));
  }

  .portfolio-modal-next {
    right: max(8px, env(safe-area-inset-right, 0));
  }

  .portfolio-modal-carousel {
    min-height: min(42vh, 320px);
    touch-action: pan-y pinch-zoom;
  }

  .portfolio-modal-dot {
    width: 10px;
    height: 10px;
    padding: 12px;
    margin: -12px 0;
    background-clip: content-box;
  }

  .portfolio-modal-embed iframe {
    min-height: min(48vh, 400px);
    height: min(52vh, 440px);
  }

  /* SEO enquire + shared header pages */
  .container {
    padding-left: max(16px, env(safe-area-inset-left, 0));
    padding-right: max(16px, env(safe-area-inset-right, 0));
  }

  .hero {
    padding-top: max(48px, env(safe-area-inset-top, 0) + 24px);
  }

  .form-wrap {
    padding: 24px 18px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .leyo-qr-wrap {
    padding-left: max(20px, env(safe-area-inset-left, 0));
    padding-right: max(20px, env(safe-area-inset-right, 0));
    padding-bottom: max(64px, env(safe-area-inset-bottom, 0) + 40px);
  }

  .leyo-qr-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .leyo-qr-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) and (min-width: 480px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .seo-services-grid,
  .seo-pricing-grid,
  .seo-diff-grid {
    grid-template-columns: 1fr;
  }

  .stat-grid {
    grid-template-columns: 1fr;
  }

  .cta h2 {
    font-size: clamp(1.65rem, 8vw, 2.4rem);
  }

  .cta-phone {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
}

/* Privacy — standalone page (no leyo-site class) */
@media (max-width: 768px) {
  .navbar {
    padding: 16px max(16px, env(safe-area-inset-left, 0)) 16px
      max(16px, env(safe-area-inset-right, 0));
    flex-wrap: wrap;
    gap: 12px;
  }

  .nav-back {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .container {
    padding: 40px max(16px, env(safe-area-inset-left, 0)) 48px
      max(16px, env(safe-area-inset-right, 0));
  }

  h1 {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
    line-height: 1.15;
  }

  .footer-simple {
    padding: 24px max(16px, env(safe-area-inset-left, 0)) max(24px, env(safe-area-inset-bottom, 0))
      max(16px, env(safe-area-inset-right, 0));
  }
}