/* ===========================================================================
   ATBIO UI Framework / Responsive Foundation
   Breakpoint-only overrides for framework primitives.
   =========================================================================== */

.ui-only-desktop,
.ui-only-laptop,
.ui-only-tablet,
.ui-only-mobile { display: none !important; }
.ui-hide-desktop,
.ui-hide-laptop,
.ui-hide-tablet,
.ui-hide-mobile { display: initial !important; }

@media (min-width: 1025px) {
  .ui-only-desktop { display: initial !important; }
  .ui-hide-desktop { display: none !important; }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  .ui-only-laptop { display: initial !important; }
  .ui-hide-laptop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ui-only-tablet { display: initial !important; }
  .ui-hide-tablet { display: none !important; }
}

@media (max-width: 1024px) {
  :root {
    --ui-container-padding: 24px;
    --ui-grid-gap: var(--ui-space-5);
    --ui-section-space-md: 80px;
    --ui-section-space-lg: 104px;
  }

  .ui-grid,
  .ui-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-col-span-8,
  .ui-col-span-6,
  .ui-col-span-4,
  .ui-col-span-3 { grid-column: span 12; }
}

@media (max-width: 767px) {
  :root {
    --ui-container-padding: 16px;
    --ui-grid-gap: var(--ui-space-4);
    --ui-section-space-xs: var(--ui-space-8);
    --ui-section-space-sm: var(--ui-space-12);
    --ui-section-space-md: var(--ui-space-16);
    --ui-section-space-lg: 88px;
  }

  .ui-grid,
  .ui-grid--2,
  .ui-grid--3,
  .ui-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ui-form-row { gap: var(--ui-space-3); }
  .ui-button,
  .ui-btn { min-height: 44px; padding-inline: var(--ui-space-5); }
  .ui-only-mobile { display: initial !important; }
  .ui-hide-mobile { display: none !important; }
}