/**
 * ExtremeFood Layout System
 * Container, Grid, Flex utilities and responsive layout
 * 
 * @package ExtremeFood
 */

/* ==========================================
   CONTAINER
   ========================================== */

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

@media (min-width: 768px) {
  .ef-container {
    padding-left: var(--ef-container-padding-tablet);
    padding-right: var(--ef-container-padding-tablet);
  }
}

@media (min-width: 1024px) {
  .ef-container {
    padding-left: var(--ef-container-padding-desktop);
    padding-right: var(--ef-container-padding-desktop);
  }
}

/* Full width container (breaks out of padding) */
.ef-container--full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Narrow container */
.ef-container--narrow {
  max-width: 960px;
}

/* ==========================================
   GRID SYSTEM
   ========================================== */

.ef-grid {
  display: grid;
  gap: var(--ef-spacing-6);
}

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

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

.ef-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.ef-grid--6 {
  grid-template-columns: repeat(6, 1fr);
}

/* Responsive grid */
@media (max-width: 767px) {
  .ef-grid--3,
  .ef-grid--4,
  .ef-grid--6 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ef-grid--4.ef-grid--products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ef-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .ef-grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Auto-fit grid (responsive without breakpoints) */
.ef-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ef-grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Gap variations */
.ef-grid--gap-2 { gap: var(--ef-spacing-2); }
.ef-grid--gap-4 { gap: var(--ef-spacing-4); }
.ef-grid--gap-8 { gap: var(--ef-spacing-8); }
.ef-grid--gap-12 { gap: var(--ef-spacing-12); }

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

.ef-flex {
  display: flex;
}

.ef-inline-flex {
  display: inline-flex;
}

/* Direction */
.ef-flex-row {
  flex-direction: row;
}

.ef-flex-col {
  flex-direction: column;
}

.ef-flex-row-reverse {
  flex-direction: row-reverse;
}

.ef-flex-col-reverse {
  flex-direction: column-reverse;
}

/* Wrap */
.ef-flex-wrap {
  flex-wrap: wrap;
}

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

/* Justify content */
.ef-justify-start {
  justify-content: flex-start;
}

.ef-justify-end {
  justify-content: flex-end;
}

.ef-justify-center {
  justify-content: center;
}

.ef-justify-between {
  justify-content: space-between;
}

.ef-justify-around {
  justify-content: space-around;
}

/* Align items */
.ef-items-start {
  align-items: flex-start;
}

.ef-items-end {
  align-items: flex-end;
}

.ef-items-center {
  align-items: center;
}

.ef-items-baseline {
  align-items: baseline;
}

.ef-items-stretch {
  align-items: stretch;
}

/* Align self */
.ef-self-start {
  align-self: flex-start;
}

.ef-self-end {
  align-self: flex-end;
}

.ef-self-center {
  align-self: center;
}

/* Gap */
.ef-gap-0 { gap: 0; }
.ef-gap-1 { gap: var(--ef-spacing-1); }
.ef-gap-2 { gap: var(--ef-spacing-2); }
.ef-gap-3 { gap: var(--ef-spacing-3); }
.ef-gap-4 { gap: var(--ef-spacing-4); }
.ef-gap-5 { gap: var(--ef-spacing-5); }
.ef-gap-6 { gap: var(--ef-spacing-6); }
.ef-gap-8 { gap: var(--ef-spacing-8); }
.ef-gap-10 { gap: var(--ef-spacing-10); }
.ef-gap-12 { gap: var(--ef-spacing-12); }

/* Flex grow/shrink */
.ef-flex-1 {
  flex: 1 1 0%;
}

.ef-flex-auto {
  flex: 1 1 auto;
}

.ef-flex-none {
  flex: none;
}

/* ==========================================
   TWO COLUMN LAYOUTS
   ========================================== */

.ef-two-col {
  display: grid;
  gap: var(--ef-spacing-8);
}

@media (min-width: 1024px) {
  .ef-two-col {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ef-two-col--60-40 {
    grid-template-columns: 60% 40%;
  }
  
  .ef-two-col--40-60 {
    grid-template-columns: 40% 60%;
  }
  
  .ef-two-col--55-45 {
    grid-template-columns: 55% 45%;
  }
}

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

/* Margin */
.ef-m-0 { margin: 0; }
.ef-m-auto { margin: auto; }
.ef-mt-0 { margin-top: 0; }
.ef-mt-4 { margin-top: var(--ef-spacing-4); }
.ef-mt-6 { margin-top: var(--ef-spacing-6); }
.ef-mt-8 { margin-top: var(--ef-spacing-8); }
.ef-mt-12 { margin-top: var(--ef-spacing-12); }

.ef-mb-0 { margin-bottom: 0; }
.ef-mb-4 { margin-bottom: var(--ef-spacing-4); }
.ef-mb-6 { margin-bottom: var(--ef-spacing-6); }
.ef-mb-8 { margin-bottom: var(--ef-spacing-8); }
.ef-mb-12 { margin-bottom: var(--ef-spacing-12); }

.ef-mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.ef-p-0 { padding: 0; }
.ef-p-4 { padding: var(--ef-spacing-4); }
.ef-p-6 { padding: var(--ef-spacing-6); }
.ef-p-8 { padding: var(--ef-spacing-8); }

.ef-pt-0 { padding-top: 0; }
.ef-pt-4 { padding-top: var(--ef-spacing-4); }
.ef-pt-6 { padding-top: var(--ef-spacing-6); }
.ef-pt-8 { padding-top: var(--ef-spacing-8); }
.ef-pt-12 { padding-top: var(--ef-spacing-12); }
.ef-pt-16 { padding-top: var(--ef-spacing-16); }
.ef-pt-24 { padding-top: var(--ef-spacing-24); }

.ef-pb-0 { padding-bottom: 0; }
.ef-pb-4 { padding-bottom: var(--ef-spacing-4); }
.ef-pb-6 { padding-bottom: var(--ef-spacing-6); }
.ef-pb-8 { padding-bottom: var(--ef-spacing-8); }
.ef-pb-12 { padding-bottom: var(--ef-spacing-12); }
.ef-pb-16 { padding-bottom: var(--ef-spacing-16); }
.ef-pb-24 { padding-bottom: var(--ef-spacing-24); }

/* ==========================================
   DISPLAY UTILITIES
   ========================================== */

.ef-block { display: block; }
.ef-inline-block { display: inline-block; }
.ef-inline { display: inline; }
.ef-hidden { display: none; }

/* Responsive display */
@media (max-width: 767px) {
  .ef-hidden-mobile { display: none; }
}

@media (min-width: 768px) {
  .ef-hidden-tablet-up { display: none; }
}

@media (min-width: 1024px) {
  .ef-hidden-desktop { display: none; }
}

@media (max-width: 1023px) {
  .ef-show-desktop-only { display: none; }
}

/* ==========================================
   POSITION UTILITIES
   ========================================== */

.ef-relative { position: relative; }
.ef-absolute { position: absolute; }
.ef-fixed { position: fixed; }
.ef-sticky { position: sticky; }

/* ==========================================
   OVERFLOW
   ========================================== */

.ef-overflow-hidden { overflow: hidden; }
.ef-overflow-auto { overflow: auto; }
.ef-overflow-x-auto { overflow-x: auto; }
.ef-overflow-y-auto { overflow-y: auto; }

/* ==========================================
   WIDTH & HEIGHT
   ========================================== */

.ef-w-full { width: 100%; }
.ef-w-auto { width: auto; }
.ef-h-full { height: 100%; }
.ef-h-auto { height: auto; }

.ef-min-h-screen {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile */
}

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

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

.ef-aspect-video {
  aspect-ratio: 16 / 9;
}

.ef-aspect-portrait {
  aspect-ratio: 4 / 5;
}

.ef-aspect-vertical {
  aspect-ratio: 9 / 16;
}

/* ==========================================
   SECTIONS
   ========================================== */

.ef-section {
  padding-top: var(--ef-spacing-12);
  padding-bottom: var(--ef-spacing-12);
}

@media (min-width: 768px) {
  .ef-section {
    padding-top: var(--ef-spacing-16);
    padding-bottom: var(--ef-spacing-16);
  }
}

@media (min-width: 1024px) {
  .ef-section {
    padding-top: var(--ef-spacing-24);
    padding-bottom: var(--ef-spacing-24);
  }
}

.ef-section--sm {
  padding-top: var(--ef-spacing-8);
  padding-bottom: var(--ef-spacing-8);
}

.ef-section--lg {
  padding-top: var(--ef-spacing-16);
  padding-bottom: var(--ef-spacing-16);
}

@media (min-width: 1024px) {
  .ef-section--lg {
    padding-top: var(--ef-spacing-32);
    padding-bottom: var(--ef-spacing-32);
  }
}

/* Section backgrounds */
.ef-section--black {
  background-color: var(--ef-black);
}

.ef-section--surface {
  background-color: var(--ef-surface);
}

.ef-section--surface-dark {
  background-color: var(--ef-surface-dark);
}

/* ==========================================
   MAX WIDTH UTILITIES
   ========================================== */

.ef-max-w-prose {
  max-width: 65ch;
}

.ef-max-w-screen-sm {
  max-width: 640px;
}

.ef-max-w-screen-md {
  max-width: 768px;
}

.ef-max-w-screen-lg {
  max-width: 1024px;
}

.ef-max-w-screen-xl {
  max-width: 1280px;
}

/* ==========================================
   OBJECT FIT
   ========================================== */

.ef-object-cover {
  object-fit: cover;
}

.ef-object-contain {
  object-fit: contain;
}

.ef-object-center {
  object-position: center;
}