/* ==========================================================================
   Responsive Utilities — Mobile-First Breakpoints
   Base: 375px (mobile), md: 768px (tablet), lg: 1024px (desktop), xl: 1440px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--max-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--screen-padding);
  padding-right: var(--screen-padding);
}

/* --------------------------------------------------------------------------
   Visibility Utilities
   -------------------------------------------------------------------------- */

.hide-mobile {
  display: none;
}

.hide-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }
}

/* Inline variants for flex/inline contexts */
.hide-mobile-inline {
  display: none;
}

.hide-desktop-inline {
  display: inline;
}

@media (min-width: 768px) {
  .hide-mobile-inline {
    display: inline;
  }

  .hide-desktop-inline {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive Grid System
   -------------------------------------------------------------------------- */

.grid-2,
.grid-3 {
  display: grid;
  gap: var(--space-lg);
}

/* Mobile: single column */
.grid-2 {
  grid-template-columns: 1fr;
}

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

/* Tablet (768px): 2 columns */
@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

/* Desktop (1024px): 3 columns for grid-3 */
@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Responsive Typography Scale
   -------------------------------------------------------------------------- */

/* Mobile base — slightly smaller display sizes */
.text-display-large {
  font-size: 28px;
  line-height: 36px;
}

.text-display-medium {
  font-size: 24px;
  line-height: 32px;
}

/* Tablet */
@media (min-width: 768px) {
  .text-display-large {
    font-size: 34px;
    line-height: 42px;
  }

  .text-display-medium {
    font-size: 28px;
    line-height: 36px;
  }
}

/* Desktop — full size */
@media (min-width: 1024px) {
  .text-display-large {
    font-size: var(--text-display-large);
    line-height: var(--text-display-large-lh);
  }

  .text-display-medium {
    font-size: var(--text-display-medium);
    line-height: var(--text-display-medium-lh);
  }
}

/* --------------------------------------------------------------------------
   Responsive Spacing Helpers
   -------------------------------------------------------------------------- */

.section-padding {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl);
  }
}

@media (min-width: 1024px) {
  .section-padding {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* --------------------------------------------------------------------------
   Responsive Flex Utilities
   -------------------------------------------------------------------------- */

.flex-col-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .flex-col-row {
    flex-direction: row;
    align-items: center;
  }
}

/* Text alignment */
.text-center-mobile {
  text-align: center;
}

@media (min-width: 768px) {
  .text-center-mobile {
    text-align: left;
  }
}