/**
 * Layout CSS - Using Grid Template Areas (CORRECT)
 * 
 * @package OIC_Atif_Al_Abbasi  
 * @version 1.0.015
 */

/**
 * ═══════════════════════════════════════════════════════════════════
 * Mobile First
 * ═══════════════════════════════════════════════════════════════════
 */

.content-area {
  display: grid !important;
  gap: 2rem !important;
  width: 100% !important;
}

.main-content {
  width: 100% !important;
}

.widget-area {
  width: 100% !important;
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Desktop - Grid Template Areas
 * ═══════════════════════════════════════════════════════════════════
 */

@media (min-width: 1024px) {
  
  /* RTL: content right, sidebar left */
  .content-area {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    grid-template-areas: "content sidebar" !important;
  }
  
  .main-content {
    grid-area: content !important;
  }
  
  .widget-area {
    grid-area: sidebar !important;
    width: 320px !important;
  }
  
  /* Sidebar Left */
  body.sidebar-left .content-area {
    grid-template-columns: 320px minmax(0, 1fr) !important;
    grid-template-areas: "sidebar content" !important;
  }
  
  /* No Sidebar */
  body.sidebar-none .content-area,
  .no-sidebar .content-area {
    grid-template-columns: 1fr !important;
    grid-template-areas: "content" !important;
  }
  
  body.sidebar-none .widget-area,
  .no-sidebar .widget-area {
    display: none !important;
  }
}

/**
 * ═══════════════════════════════════════════════════════════════════
 * Container
 * ═══════════════════════════════════════════════════════════════════
 */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* نهاية layout.css */