/**
 * Property Detail Page - Responsive Utilities
 * 
 * Helper classes and utilities for responsive design
 * Modern CSS with container queries support
 * 
 * Version: 2.0 (Modern CSS)
 * Created: 2025-01-27
 */

/* ========================================================================
   VISIBILITY UTILITIES
   ======================================================================== */

/* Mobile only */
.show-mobile-only {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile-only {
    display: none !important;
  }
}

/* Desktop only */
.hide-mobile {
  display: none;
}

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

.hide-desktop {
  display: block;
}

@media (min-width: 992px) {
  .hide-desktop {
    display: none !important;
  }
}

/* ========================================================================
   FLUID SPACING UTILITIES
   ======================================================================== */

.space-y-fluid {
  margin-block: var(--space-lg);
}

.space-y-fluid-sm {
  margin-block: var(--space-md);
}

.space-y-fluid-lg {
  margin-block: var(--space-xl);
}

.space-x-fluid {
  margin-inline: var(--space-lg);
}

/* ========================================================================
   CONTAINER QUERY UTILITIES
   ======================================================================== */

@supports (container-type: inline-size) {
  .container-responsive {
    container-type: inline-size;
    container-name: responsive-container;
  }
  
  /* Responsive font sizes within containers */
  @container responsive-container (max-width: 400px) {
    .container-text {
      font-size: var(--font-small);
    }
  }
  
  @container responsive-container (min-width: 401px) {
    .container-text {
      font-size: var(--font-body);
    }
  }
}

/* ========================================================================
   FLEX UTILITIES
   ======================================================================== */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-fluid {
  gap: var(--space-md);
}

.gap-fluid-sm {
  gap: var(--space-sm);
}

.gap-fluid-lg {
  gap: var(--space-lg);
}

/* ========================================================================
   GRID UTILITIES
   ======================================================================== */

.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--similar-card-min-width), 1fr));
  gap: var(--grid-gap-md);
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--similar-card-min-width), 1fr));
  gap: var(--grid-gap-md);
}

/* ========================================================================
   TEXT UTILITIES
   ======================================================================== */

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-truncate-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================================================
   ASPECT RATIO UTILITIES
   ======================================================================== */

.aspect-16-10 {
  aspect-ratio: 16 / 10;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-3-4 {
  aspect-ratio: 3 / 4;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

/* ========================================================================
   RESPONSIVE PADDING UTILITIES
   ======================================================================== */

.p-fluid {
  padding: var(--card-padding);
}

.p-fluid-sm {
  padding: var(--card-padding-sm);
}

.p-fluid-lg {
  padding: var(--card-padding-lg);
}

/* ========================================================================
   RESPONSIVE MARGIN UTILITIES
   ======================================================================== */

.m-fluid {
  margin: var(--space-md);
}

.m-fluid-sm {
  margin: var(--space-sm);
}

.m-fluid-lg {
  margin: var(--space-lg);
}

/* ========================================================================
   SCREEN READER ONLY
   ======================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================
   REDUCED MOTION UTILITIES
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .no-motion {
    transition: none !important;
    animation: none !important;
  }
}

/* ========================================================================
   HIGH CONTRAST UTILITIES
   ======================================================================== */

@media (prefers-contrast: high) {
  .high-contrast-border {
    border-width: 2px !important;
  }
}