/* =============================================
   Lasting Language — Mobile Optimizations
   Loaded after Webflow CSS to override defaults
   ============================================= */

/* --- Desktop layout classes for index.html grids --- */
.ll-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.ll-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

/* --- 991px: Tablet --- */
@media screen and (max-width: 991px) {
  .ll-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .ll-blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 36px;
  }

  .buttons-row {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* --- 767px: Mobile --- */
@media screen and (max-width: 767px) {

  /* Grids */
  .ll-services-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ll-blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
  }

  /* Section paddings — reduce large spacing on mobile */
  .section.pd-top-170px {
    padding-top: 56px;
  }

  .section.top-bottom-180px {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section.top-bottom-160px {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .section.top-bottom-120px {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .section.cta-section {
    padding-bottom: 60px;
  }

  .section.cta-section-alt {
    padding-bottom: 80px;
  }

  /* Base section padding */
  .section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* Buttons — stack vertically on mobile */
  .buttons-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .buttons-row.center {
    align-items: center;
  }

  .buttons-row .btn-primary,
  .buttons-row .btn-secondary,
  .buttons-row .w-button {
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }

  .buttons-row.center .btn-primary,
  .buttons-row.center .btn-secondary,
  .buttons-row.center .w-button {
    width: auto;
  }

  /* Container horizontal padding */
  .container-default.w-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Footer CTA card */
  .card.card-footer-top-container {
    text-align: left;
  }

  .card.card-footer-top-container .buttons-row {
    align-items: stretch;
  }

  /* Nav padding on mobile */
  .ll-nav__inner {
    padding: 0 20px;
  }

  /* Blog preview cards on index */
  .ll-blog-grid a > div:first-child {
    padding: 24px 20px 16px;
  }

  .ll-blog-grid a > div:last-child {
    padding: 20px 20px 24px;
  }

  /* Footer grid */
  .grid-4-columns.menu-main-grid-4-col {
    grid-row-gap: 40px;
  }

  /* Experience cards grid */
  .grid-3-columns._1-col-tablet {
    grid-template-columns: 1fr;
  }

  /* About section image */
  .figure.mg-bottom-40px {
    margin-bottom: 28px;
  }
}

/* --- 479px: Small mobile --- */
@media screen and (max-width: 479px) {

  .section.pd-top-170px {
    padding-top: 40px;
  }

  .section.top-bottom-180px {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section.top-bottom-160px {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section.top-bottom-120px {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .buttons-row.center {
    align-items: stretch;
  }

  .buttons-row.center .btn-primary,
  .buttons-row.center .btn-secondary,
  .buttons-row.center .w-button {
    width: 100%;
    box-sizing: border-box;
  }

  /* Container padding tighter on small phones */
  .container-default.w-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ll-nav__inner {
    padding: 0 16px;
  }

  /* Footer top CTA */
  .card.card-footer-top-container {
    padding: 40px 20px;
  }

  /* Reduce heading sizes further */
  .display-1 {
    font-size: 28px;
  }

  .display-2 {
    font-size: 24px;
  }

  .display-3 {
    font-size: 22px;
  }

  .display-4 {
    font-size: 20px;
  }

  /* Service card images on homepage */
  .service-card-picture-01 {
    height: 200px !important;
  }

  /* Blog card layout */
  .ll-blog-grid a > div:first-child {
    padding: 20px 16px 14px;
  }

  .ll-blog-grid a > div:last-child {
    padding: 16px 16px 20px;
  }

  .ll-blog-grid h3 {
    font-size: 17px !important;
  }

  .ll-blog-grid p {
    font-size: 13px !important;
  }
}