/* ==========================================================================
   RESPONSIVE VISIBILITY UTILITIES
   
   Hide components on specific breakpoints using display: none.
   These classes are applied via the Visibility settings group that is
   automatically added to all components by field-generator.php.
   
   Breakpoints:
   - Mobile: < 640px
   - Tablet: 640px - 1023px
   - Desktop: >= 1024px
   ========================================================================== */

/* Mobile: screens smaller than 640px */
@media (max-width: 639px) {
    .hide-mobile { display: none !important; }
}

/* Tablet: screens between 640px and 1023px */
@media (min-width: 640px) and (max-width: 1023px) {
    .hide-tablet { display: none !important; }
}

/* Desktop: screens 1024px and larger */
@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

/* Display */
.flex { display: flex; }
.grid { display: grid; }

/* Direction (Flex) */
.dir-row { flex-direction: row; }
.dir-column { flex-direction: column; }

/* Gap (Desktop) */
.gap-d-none { gap: 0; }
.gap-d-xs { gap: var(--spacing-2); }
.gap-d-sm { gap: var(--spacing-4); }
.gap-d-md { gap: var(--spacing-6); }
.gap-d-lg { gap: var(--spacing-8); }
.gap-d-xl { gap: var(--spacing-12); }
.gap-d-2xl { gap: var(--spacing-16); }
.gap-d-3xl { gap: var(--spacing-24); }

/* Padding (all sides) */
.p-xs { padding: var(--spacing-2); }
.p-sm { padding: var(--spacing-4); }
.p-md { padding: var(--spacing-6); }
.p-lg { padding: var(--spacing-8); }
.p-xl { padding: var(--spacing-12); }
.p-2xl { padding: var(--spacing-16); }

/* Grid Columns */
.grid-col-1-1,
.grid-col-1-2,
.grid-col-2-1,
.grid-col-1-3,
.grid-col-3-1 { 
  grid-template-columns: 1fr 1fr;
}

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

/* Align Items (cross-axis) */
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }

/* Justify Content (main-axis) */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Min Height (section only) */
.min-h-sm { min-height: 300px; }
.min-h-md { min-height: 400px; }
.min-h-lg { min-height: 500px; }
.min-h-xl { min-height: 600px; }
.min-h-screen-50 { min-height: 50vh; }
.min-h-screen-75 { min-height: 75vh; }
.min-h-screen { min-height: 100vh; }

/* Column span utilities (desktop only) */
@media (min-width: 769px) {
  .col-span-2 { grid-column: span 2; }
  .col-span-3 { grid-column: span 3; }
  .col-span-4 { grid-column: span 4; }
  .col-span-full { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .grid-col-1-1 { grid-template-columns: 1fr 1fr; }
  .grid-col-1-2 { grid-template-columns: 1fr 2fr; }
  .grid-col-2-1 { grid-template-columns: 2fr 1fr; }
  .grid-col-1-3 { grid-template-columns: 1fr 3fr; }
  .grid-col-3-1 { grid-template-columns: 3fr 1fr; }
  .grid-col-1-1-1 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-col-1-1-1-1 { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

/* Mobile overrides */
@media (max-width: 768px) {
  .flex.dir-row { flex-direction: column; }
  .grid[class*="grid-col-"] { grid-template-columns: 1fr; }
  
  /* Gap (Mobile) */
  .gap-m-none { gap: 0; }
  .gap-m-xs { gap: var(--spacing-2); }
  .gap-m-sm { gap: var(--spacing-4); }
  .gap-m-md { gap: var(--spacing-6); }
  .gap-m-lg { gap: var(--spacing-8); }
  .gap-m-xl { gap: var(--spacing-12); }
  .gap-m-2xl { gap: var(--spacing-16); }
  .gap-m-3xl { gap: var(--spacing-24); }
  
  /* Order (Mobile) - for reordering columns on mobile */
  .order-m--2 { order: -2; }
  .order-m--1 { order: -1; }
  .order-m-1 { order: 1; }
  .order-m-2 { order: 2; }
  
  /* Min height reductions on mobile */
  .min-h-sm { min-height: 200px; }
  .min-h-md { min-height: 280px; }
  .min-h-lg { min-height: 350px; }
  .min-h-xl { min-height: 420px; }
}


/* ==========================================================================
   FILTER UTILITIES
   ========================================================================== */

.mono-images img {
  filter: brightness(0);
  opacity: 0.2;
}

.dark.mono-images img,
.dark .mono-images img {
  filter: brightness(0) invert(1);
}