/* ==========================================================================
   LETNOVA RESPONSIVE FIXES
   Mobile-first responsive overrides for all breakpoints.
   Loaded after pages.css to ensure proper cascade.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════
   TABLET (max-width: 1024px)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .ln-plans__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ln-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ln-navbar__menu {
    gap: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE / SMALL TABLET (max-width: 768px)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* -- Section padding: 6rem is too much on mobile -- */
  .ln-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .ln-section--sm {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* -- Grid gap reduction -- */
  .ln-grid {
    gap: var(--ln-gap-sm);
  }

  /* -- Form inputs: prevent iOS zoom -- */
  .ln-form__input,
  .ln-form__textarea,
  .ln-form__select {
    font-size: 16px;
    padding: 1rem;
  }

  .ln-form__row {
    grid-template-columns: 1fr;
  }

  /* -- Post cover: don't break out of container on mobile -- */
  .ln-post-single__cover {
    width: 100%;
    margin-left: 0;
    transform: none;
    border-radius: var(--ln-radius);
  }

  /* -- Post content font -- */
  .ln-post-single__content {
    font-size: 1rem;
    line-height: 1.75;
  }

  /* -- Hero subtitle spacing -- */
  .ln-hero__subtitle {
    line-height: 1.8;
    max-width: 100%;
  }

  /* -- Pricing table on services -- */
  .ln-pricing-table {
    font-size: 0.8rem;
  }

  .ln-pricing-table th,
  .ln-pricing-table td {
    padding: 0.5rem 0.4rem;
  }

  .ln-pricing-table thead {
    top: 4rem;
  }

  /* -- Comparison table (about page) -- */
  .ln-comparison-table {
    font-size: 0.85rem;
  }

  .ln-comparison-table th,
  .ln-comparison-table td {
    padding: 0.6rem 0.5rem;
  }

  /* -- Plans grid: single column -- */
  .ln-plans__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* -- Cases grid -- */
  .ln-cases__grid {
    grid-template-columns: 1fr;
  }

  .ln-case-card--featured {
    grid-column: span 1;
  }

  /* -- Stats grid centering -- */
  .ln-stats__grid {
    justify-items: center;
  }

  /* -- Footer: 2 columns earlier -- */
  .ln-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* -- Blog card title truncation -- */
  .ln-blog-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* -- Steps: hide connecting lines -- */
  .ln-steps__item:not(:last-child)::after {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SMALL MOBILE (max-width: 480px)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* -- Container: tighter padding -- */
  .ln-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* -- Navbar: compact -- */
  .ln-navbar__container {
    height: 4rem;
    padding: 0 1rem;
  }

  .ln-navbar__logo-text {
    font-size: 1.25rem;
  }

  .ln-navbar__mobile {
    padding: 1rem;
  }

  .ln-navbar__mobile-menu {
    gap: 0.75rem;
  }

  /* -- Footer: single column -- */
  .ln-footer__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .ln-footer__legal {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .ln-footer__bottom-container {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  /* -- AI suites cards (services page) -- */
  .ln-ai-suite {
    grid-template-columns: 1fr;
  }

  .ln-ai-suite__card {
    padding: var(--ln-gap-sm);
  }

  /* -- Values grid: single column -- */
  .ln-values-grid {
    grid-template-columns: 1fr;
  }

  /* -- CTA section: smaller heading -- */
  .ln-cta__title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  /* -- Blog card image: less tall -- */
  .ln-blog-card__img {
    aspect-ratio: 16 / 12;
  }

  .ln-blog-card__body {
    padding: var(--ln-gap-sm);
  }

  /* -- Heading display: slightly smaller on very small screens -- */
  .ln-heading-display {
    font-size: clamp(1.8rem, 6vw, 4.25rem);
  }

  /* -- Before/after arrow rotation margin fix -- */
  .ln-before-after__arrow {
    margin: 0 auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VERY SMALL MOBILE (max-width: 360px)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {
  .ln-container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .ln-heading-display {
    font-size: 1.6rem;
  }

  .ln-heading-2 {
    font-size: 1.3rem;
  }

  .ln-btn--lg {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   TOUCH DEVICE OVERRIDES
   ══════════════════════════════════════════════════════════════════════ */

@media (hover: none) {
  .ln-hover-lift:hover {
    transform: none;
  }

  .ln-card--hover:hover {
    transform: none;
  }

  .ln-btn:hover {
    transform: none;
  }
}