/*=================================*
 * utilities.css - William Astley
 * A boutique ultra minimalist utility-first CSS framework for Kymetric Consulting internal use.
/*=================================*
 * 1. Layout Classes
 *=================================*/

.container {width: 100%; max-width: clamp(320px, 90vw, 1140px); margin-inline: auto;}
.container-wide{width: 100%; max-width: clamp(320px, 96vw, 1380px); margin-inline: auto;}
.grid {display:grid;}
.grid-cols-2 {grid-template-columns: repeat(2, 1fr);}
.grid-cols-3 {grid-template-columns: repeat(3, 1fr);}
.grid-cols-4 {grid-template-columns: repeat(4, 1fr);}
.flex{display:flex;}
.block{display:block;}
.center-all {display:flex; align-items:center; justify-content:center;}
.mb-override {}

/*=================================*
 * 2. Typography Classes
 *=================================*/

.text-xs {font-size: 0.65rem;}
.text-sm{font-size: 1rem;}
.text-base {font-size: 1.25rem;}
.text-md {font-size: 1.5rem;}
.text-lg {font-size: 2rem;}
.text-xl {font-size: 2.5rem;}
.text-center {text-align: center;}
 
/*=================================*
 * 3. Margin, Padding, Gap, etc. 
 *=================================*/

/*Utility: Min-Height*/
.mh-1 { min-height: 50%;}
.mh-2 { min-height: 60%;}
.mh-3 { min-height: 70%;}
.mh-4 { min-height: 80%;}
.mh-5 { min-height: 90%;}
.mh-6 { min-height: 100%;}

/* Utility: Padding */
.p-1 { padding: 0.25rem;}
.p-2 { padding: 0.5rem;}
.p-3 { padding: 0.75rem;}
.p-4 { padding: 1rem;}
.p-5 { padding: 1.25rem;}
.p-6 { padding: 1.5rem;}
.p-7 { padding: 1.75rem;}
.p-8 { padding: 2rem;}

/* Utility: Padding Y */
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* Utility: Padding X */
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

/* Utility: Margin (m = all sides) */
.m-auto { margin: auto; }
.m-4 { margin: 1rem; }
.m-5 { margin: 1.25rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }

/* Utility: Margin Y (top & bottom) */
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }

/* Utility: Margin X (left & right) */
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; }
.mx-8 { margin-left: 2rem; margin-right: 2rem; }

/* Utility: Margin Top */
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }

/* Utility: Margin Bottom */
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

/* Utility: Margin Left */
.ml-4 { margin-left: 1rem; }
.ml-5 { margin-left: 1.25rem; }
.ml-6 { margin-left: 1.5rem; }
.ml-8 { margin-left: 2rem; }

/* Utility: Margin Right */
.mr-4 { margin-right: 1rem; }
.mr-5 { margin-right: 1.25rem; }
.mr-6 { margin-right: 1.5rem; }
.mr-8 { margin-right: 2rem; }

/* Utility: Gap */

.gap-1 {gap:0.25rem;}
.gap-2 {gap:0.5rem;}
.gap-3 {gap:1rem;}
.gap-4 {gap:2rem;}
.gap-5 {gap:2.5rem;}
.gap-6 {gap:3rem;}

/*=================================*
 * 4. Effect Classes
 *=================================*/
 @keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {opacity: 0; animation: fadeIn 1s ease-out forwards;}

/*=================================*
 * 5. Media Queries
 *=================================*/
 @media (max-width: 768px) {
  .grid-cols-4,
  .grid-cols-3, 
  .grid-cols-2 { grid-template-columns: 1fr;} /* Tablet */
}

@media (max-width: 480px) {
  .grid-cols-4,
  .grid-cols-3, 
  .grid-cols-2 { grid-template-columns: 1fr; } /* Mobile */
  .container { padding: 0 1rem; } /* Prevents overflow from padding */
    /* but remove outer margins from cards inside container */
    .mb-override {
    margin-left: 0 !important;
    margin-right: 0 !important;      /* remove any outer margin on mobile */
    max-width: 100% !important;  /* container-like behavior if needed */
    padding-inline: 1rem !important; /* optional gutter */
  }

}