/* Mobile Responsive Fixes for Ivy Protocol Website */
/* These rules ensure grids stack properly on tablets and mobile devices */

/* Privacy policy and imprint page fixes */
.container.privacy-policy {
  max-width: 1200px !important;
  padding-left: 24px;
  padding-right: 24px;
}

/* Tablet and below (767px and under) - Stack all multi-column grids */
@media screen and (max-width: 767px) {
  /* Privacy policy container adjustments for mobile */
  .container.privacy-policy {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Techy stuff section - make first block full width */
  .techy-grid-1-box_1,
  .techy-grid-2-box_1,
  .techy-grid-2-box_2 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .techy-box-text-wrapper {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Database grid - reduce padding for better use of space */
  .database-grid,
  .database-grid-2 {
    grid-row-gap: 40px;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .database-grid-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Main grid sections that should stack */
  .third-party-grid {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr !important;
  }

  .grid-techy-1,
  .grid-techy-1.m-b-16 {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr !important;
  }

  .grid-techy-2 {
    grid-template-columns: 1fr !important;
  }

  .third-party-coming-soon-grid {
    grid-row-gap: 40px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr !important;
  }

  /* Logo grid - reduce to 2 columns on tablet */
  .logo-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Team grid - reduce to 2 columns on tablet (acceptable for team members) */
  .team-grid,
  .team-grid.m-b-160 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Small mobile (479px and under) - Single column for everything */
@media screen and (max-width: 479px) {
  /* Force single column for logo grid on very small screens */
  .logo-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Team grid can stay 2 columns even on small mobile */
  .team-grid,
  .team-grid.m-b-160 {
    grid-template-columns: 1fr 1fr !important;
  }
}